CSS和Javascript简单复习资料_javascript技巧

CSS:

内联样式表 标签内直接加style=””

嵌入式样式表 定义在<head>标签

              <style type=”text/css”>

外部样式表   

              <link rel=”StyleSheet” href=”style.css”>

<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

 

       选择器:

HTML选择器:接在html标签后加css

                            如:p{color:red}

                     class选择器:1 在html标签后加class名,再加css

                            如:p.red{color:red}

                                          2 直接加class名,再加css

                            如:.red{color:red} 注意前面有个点

                     ID选择器:在ID前加一个#号

                            如:#red{color:red} ID选择器只为某一ID的控件使用

                     关联选择器:有嵌套的html标签,用空格隔开

                            如:P EM{color:red}

                     组合选择器:多个html标签,用逗号隔开

                            如: H1,H2,H3{color:red}

                     伪元素选择器:HTML元素:伪元素

                            如:A:link{color:red}

 

       注释:使用 /* … */ 进行注释,不可嵌套

 

javascript:

javascript的数据类型:

              基本数据类型:数值、字符串、布尔、空、undefined

注意:javascript中字符串是基本类型,传递的是值,不是地址。和java不同。

              转义字符

              变量:字母、数字、下划线、美元符$ ,以字母开头

 

javascript的函数:

function 函数名 (参数){
函数体;

              return 表达式;

}

              注意:函数由function定义。

              形参:javascript不要求实参和形参个数相等,可以通过使用function_name.arguments.length来得到传过来的参数的个数。

              内部函数:    encodeURI / decodeURI

                                   parseInt / pareFloat

                                   isNan 检测parseInt / pareFloat的值是否是NaN

                                   escape / unescape 对一个字符串进行编码后的字符串

                                   eval 把一个字符串作为一个JavaScript表达式

 

javascript:

javascript的数据类型:

              基本数据类型:数值、字符串、布尔、空、undefined

注意:javascript中字符串是基本类型,传递的是值,不是地址。和java不同。

              转义字符

              变量:字母、数字、下划线、美元符$ ,以字母开头

 

javascript的函数:

function 函数名 (参数){
函数体;

              return 表达式;

}

              注意:函数由function定义。

              形参:javascript不要求实参和形参个数相等,可以通过使用function_name.arguments.length来得到传过来的参数的个数。

              内部函数:    encodeURI / decodeURI

                                   parseInt / pareFloat

                                   isNan 检测parseInt / pareFloat的值是否是NaN

                                   escape / unescape 对一个字符串进行编码后的字符串

                                   eval 把一个字符串作为一个JavaScript表达式

 

javascript的对象:

              对象的属性:不需要先定义,可以直接使用

              对象的方法:

                             定义:对象名.方法名 = 函数名

                             调用:对象名.方法名()

                             如:

                                   //定义了一个方法

                                          function sayname(){

                                                 alert(“name”);

                                          }

                                          object1.say=sayname;

                                          object1.say();

              对象的定义:

                            对象定义时,对象的属性可以自己定义。

                            用for ( var prop in object) {}可以遍历object里面的属性

              内部对象:    Object对象: new Object() 新建一个对象

                                  String对象:

                                                        属性:    length

                                                        方法:    indexOf() / lastIndexOf()

                                                                     match(正则表达式)

                                                                      正则表达式:

                                                                                    以/ …. /作为标志

                                                                                    使用test()方法,符合条件返回true

                                                                      replace() 替换第一次出现的字符

                                                                      split() 返回一个数组

                                                                      substring() 截位置 / substr() 截长度

                                   Math对象:   Math对象是静态对象,需要用Math.方法名()调用

                                   Date对象:   new Date() 构造方法

                                                        getYear() / getMonth()+1 / getDate() / getDay/ getTime()

                                   toString方法:     toString()可以转换进制 如toString(2);

 

数组:    var arr = new Array();

              同一个数组中可以加不同类型的值。数组的长度可变。

      

javascript的局部变量建立后,可以在整个函数体内中的任何地方使用。

 

事件驱动(通用): onClick();

                            onChange(): <?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" />text / textarea 输入字符时

                                                 select 中选项改变时

                            onSelect():   text / textarea 中文字被选中时

                            onFocus() / onBlur 获得 / 失去 焦点

                            onLoad() / onUnload();

 

document对象:  

方法:

              write() / writeln() 使用后要用 close() 关闭

              getElementById / getElementsByName 得到元素

              createElement()

包含对象:

              forms数组 得到<form></form>对象

              links数组 得到<a href=””></a>对象

              anchors数组 得到<a name=””></a>对象

              all数组 得到所有对象

 

body对象:          事件:

                                          onselectstart  =”return false” 时就不能选择网页上的东西了

                                          onscroll

                            包含对象:

                                          all

                                          style

form对象:          方法:   submit()

                                          reset()

                            事件:    onsubmit   函数体内 return true or false 判断是否提交表单

                            包含对象:

                                          text / textarea / select / checkbox / radio:

                                                        方法:    blur / focus

                                                                      click

                                                                      add (select 用)

                                                        属性:    disabled / readOnly

                                                                      value

                                                                      checked

                                                        select特殊的属性:

                                                                      multiple 是否可以复选

                                                                      selectedIndex 选择的Index

                                                                      options 返回options数组

                                                        option属性

                                                                      text / value

                                                                      selected

                                                                      index

 

                                                        事件:   onChange

                                                                      onSelect

                                                                      onFocus

                                                                      onBlur

 

window对象:      方法:    alert() / prompt() / confirm() :

                                                               prompt()返回的是值 / confirm()返回 true/false

                                          open() / close()

                                          setInterval() / setTimeout()   对应 clearInterval / clearTimeout

                                          moveTo / resizeTo

                                          showModalDialog() / showModalessDialog()

                                                        showModalDialog()中可以用第二个参数向对话框传值

                                                        对话框可以用returnValue返回值

                            事件:    onresize事件

                            对象:    location:地址栏对象,可以得到地址栏或者改变网页

                                                        刷新:reload()

                                          event:得到事件源

                                          frames:数组

                                          screen:提供显示器信息

                                          history: go(0 / -1)  / back() /     forward()

                                          navigator:浏览器信息

                                          document:文档信息  

时间: 2024-09-20 09:12:47

CSS和Javascript简单复习资料_javascript技巧的相关文章

预加载css或javascript的js代码_javascript技巧

预加载文件一般有两种常用的方式:xhr和动态插入节点的方式.动态插入节点是最为简单也最为广泛的一种异步加载方式(例如yui的Get模块),然后使用动态插入节点方法加载的文件都会在加载后立即执行,javascript的执行一方面会占用浏览器js执行进程,另一方面也可能改变页面结构,而css的执行更有可能让整个页面变化.xhr方式虽然不会执行脚本,但是由于同域的限制,且如今网站的静态文件都是部署在cdn服务器上,如何预加载css js文件也变有点玄妙了. Stoyan Stefanov 撰文简明的阐

两个Javascript小tip资料_javascript技巧

1. 定时循环执行代码 复制代码 代码如下: window.setInterval(function() { $.get("service.aspx?method=unreadmessage", function(data) { if (data != "0") $('#unreadCount').html(data).show(); else $('#unreadCount').hide(); }); }, 1000);可以类似这样写. 2. 刷新当前页面 复制代

简单实现JavaScript图片切换效果_javascript技巧

JavaScript实现图片切换,主要用到setInterval()函数和clearInterval()函数,前者功能是开启动画,后者功能则为清除动画(可理解为使动画停止),为了使动画停止,则需要定义全局变量作为标志,标志返回setInterval()函数的id,id作为clearInterval()函数的引用,目的是为了告诉clearInterval()函数动画暂停的位置.下面是实现的代码: 部分HTML代码:第一个为左按钮,是一张带箭头的透明图片,点击实现图片右滑动,第二个为图片展示区域,第

你未必知道的JavaScript和CSS交互的5种方法_javascript技巧

随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.css文件,但这并不意味着CSS和js是独立不能交互的.下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道! 用JavaScript获取伪元素(pseudo-element)属性 大家都知道如何通过一个元素的style属性获取它的CSS样式值,但能获取伪元素(pseudo-eleme

动态加载js、css的简单实现代码_javascript技巧

一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.

JavaScript蒙板(model)功能的简单实现代码_javascript技巧

思路: •创建一个蒙板, 设置蒙板的堆叠顺序保证能将其它元素盖住 position: absolute; top: 0; left: 0; display: none; background-color: rgba(9, 9, 9, 0.63); width: 100%; height: 100%; z-index: 1000; •设置蒙板中内容的背景色和展示格式 width: 50%; text-align: center; background: #ffffff; border-radius

javascript文件加载管理简单实现方法_javascript技巧

本文实例讲述了javascript文件加载管理简单实现方法.分享给大家供大家参考.具体如下: 这里介绍超级简单的进行javascript的文件(模块)的加载管理, 实现sea.js或者require.js核心功能,用一行 <script src="js/light/light.js"></script> 加载所有的js文件. //按照lightJs的顺序,让网页加载js文件: var lightJs = [ "./js/light/pre/jquery

JavaScript探测CSS动画是否已经完成的方法_javascript技巧

不啰嗦上代码: WN:(function(){ var el = $('<fakeelement>'), transition="transition", transitionEnd, animEvent={'start':null,'iteration':null,'end':null}, vendorPrefix; transition = transition.charAt(0).toUpperCase() + transition.substr(1); vendor

JavaScript编写简单的计算器_javascript技巧

本文实例讲述了JavaScript编写简单计算器的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>计算器</title> <style> /*Basic reset*/ *{ margin:0; padding:0; b