《javascript征途》学习笔记

基础 
1、 只有函数有作用域 
2、 如果在<script src>的src 中设置了src特性，则script元素包含的任意代码就无效了。应该分开放到不同的script块中。 
3、 外部js脚本文件和页面内嵌的js代码的执行顺序是按它们在文档中的位置决定的，而不是先执行内嵌脚本，后执行外部脚本文件。 
4、 建议通过外部文件形式导入js文件。 
5、 使用接口技术解决js文件函数重名的冲突。问题是如果封装的接口也冲突了怎么办？定义接口的对象名也不能够相同，否则也会冲突。P46 这个例子没运行起来。 
6、 Js为css设置样式，是以html文件为参考的，而不用考虑js文件的具体位置，而css文件是以它本身位置为参考的。 
7、 浏览器是从上到下解析网页源码的。 
8、 接口的概念？ 
9、 使用变量之前必须先声明。尽量少使用全局变量。 
10、 怎么区分构造函数、类和一般的函数？在命名时构造函数和类名建议首字母大写，而函数小写开头 
11、 使用alert和confirm进行手动调试

第四章 数据类型和变量 
1、 实词和虚词。实词指标识符、关键字保留字、直接量等。虚词指空白符、换行符、注释等无意义的字符。实词是区分大小写的。 
2、 Js只有三种数据类型：数值型（不区分浮点和整数，都是浮点型）、字符串型和数组型。null、undefined，number，string,Boolean是五种原始数据类型。 
object 
function是对象。是object的特殊情况。 
棧存储值类型，堆存储引用类型。 
3、 alert(Boolean(1));//返回的是true。书上返回的是13。有误 
alert((a = 1,2,3,4));//4 
alert(a=(1,2,3,4));//4 
alert(Boolean(1));//true 
a = 1,2,3,4; 
alert(a);//1 
   var a = 1,2,3,4; 
alert(a);//null 
4、 JS仅支持定义一维数组。不支持多维数组。但是可以模拟多维数组。但是性能不好。 
Var a = [[1,2,3],[4,5,6]];。数组可以放入不同的任意类型的数据，包括function和表达式。 
5、 函数在js中是第一种类型（基类，父类），其他类型继承于function。Object也是由Function来实现的。这点很NB啊。 
6、 函数如果没有返回值，责约定返回值是undefined。 
7、 函数是一个独立的作用域，只能通过函数返回值读取函数内部的数据。而构造函数是可以通过this.属性，获取函数内部的属性值。构造函数是定义对象的模板，就是类。 
8、 函数解析的机制：js解释器在预编译时就会把所有function语句声明的函数处理，如果存在同名函数，则后面的函数体会覆盖前面的函数体。而js解释器只是对var语句声明的变量名进行索引，变量的初始化值却被忽略，直到执行期才去为变量读取初始值。而对于function声明的函数体，js解释器不仅对函数盟按变量标识符进行索引，而且对于函数体也提前处理。 
第一：JavaScript时按<script></script>编译,并执行的。 
第二：JavaScript编译时完成对变量的声明，及函数处理。 
第三：JavaScript后声明的函数将会覆盖前声明的函数 
9、 处于同一个文档中的js教本，都属于同一个作用域：window。可以互相通信和调用。 
10、 Constructor属性。表示构造函数的属性值，用来检测数据类型。(10).constructor。返回number。 
Js习惯：先声明后读写，先赋值后运算。 
变量的作用域: 
1、 局部变量都比全局变量的优先权高 
2、 内部局部变量比外层局部变量优先权高 
3、 变量都是对象的属性。全局变量是window对象的属性。 
第五章 
Delete 
如果删除内部对象的预定义成员和客户端对象成员，使用var语句申明的变量也是不允许删除的。 
可以删除不存在的变量，返回true。 
Delete操作是彻底删除所占用的存储空间。

Void运算符的优先级、void的运算结果返回undefined。

第七章 
函数的作用域。 
function和Function构造函数的作用域是不同的。Funtion有顶级作用域。而function是局部的。

函数的解析机制 
Js解释器是一段段分析和执行程序的。在同一段代码中，function语句和函数直接量定义的函数结构总会被提取出来执行。只有当函数被解析和执行完毕之后，才会按顺序执行其它代码。但是Function构造函数定义的函数并非提前运行，而是在运行时动态地被执行。

函数的接收值个数没有限制。函数的返回值只能有一个。若要返回多个数据，则用数组存储。

函数的生命周期： 
使用function语句声明的函数被预先编译，此时如果存在相同的函数名，则会按顺序覆盖。而函数直接量和构造函数定义的函数都属于表达式函数，因此在代码按行执行时，才被激活生命周期。

函数的形参通过length属性来获取。

Arguments对象。参数管理器 
Arguments.length表示实参的个数。Arguments不是array对象，而是object对象，不能用for/in结构遍历。

可以通过arguments[i]下标动态改变实参的值。也可以通过修改length动态增大或减小实参的个数。

Arguments.Callee可以返回当前arugments对象所属的函数的引用，等价于函数名。Arguments.Callee.length表示函数形参的个数。

This关键字 
Undefined+undefined=NaN。多个undefined相加会返回NaN。 
函数作用域和实例化函数this的作用域是不同的。实例化只值向当前函数的作用域，而函数调用对象的作用域则是window。

函数属性的作用域： 
函数体外定于的属性可以任意的访问，可以在函数体内或外部访问，而函数内部定义的属性在初始化状态只能在函数体内部被调用。但若函数被调用后，则可以在外部访问函数内部定义的属性。若属性是函数，作用域也是一样的。

Call和apply。Apply传递的是数组。 
1、 Call和apply将函数转换成方法传递给某个对象，只是临时的，函数最终没有作为对象的方法存在，当函数被调用后，该对象方法会自动被注销。 
2、 Call和apply避免了资源浪费。

闭包:数据存储的一种方式。在动态环境中，数据实时变化，为了避免前面的数据丢失，js提供了闭包来寄存动态数据。 
特性： 
自闭特性。外界无法访问闭包结构内部的数据。 
包裹特性。

第八章 
定义抽象对象的方法是通过构造函数来实现的。 
Push()会添加新元素后返回数组长度。 
创建对象时，存储在变量中的只是引用指针，并不是对象本身。删除变量后，对象本身依然存在。 
Js的垃圾回收机制，自动收集无用存储单元，不需要专门销毁无用对象以释放内存。当对象没有被任何变量引用时，js会自动侦测并把所有废除的对象注销。 
当我们把对象的所有引用变量都设置为null时，可以强制对象处于废除状态。并被回收。

当删除对象属性后，不是将属性设为undefined，而是真正从内存清除掉。

对象的作用域： 
Js仅支持一种作用域，即公共作用域。对于js所有对象的所有属性和方法来说都是公开的。 
Js对象的结构封闭性不如函数结构。函数有自己的私有作用域。外界是无法访问的。

通过命名规则以区分私有作用域。O.x._a_=1;

静态对象：static 声明。Math和Global都是静态对象。 
Js不支持静态作用域。

构造对象：就是构造函数。如Object、Date、Function。构造对象的首字母要大写。 
构造对象不能直接被引用。必须使用new来实例化。 
alert(Point.name); //直接读取构造对象的属性 
alert(p1.name); //但是不能够通过实例对象来读取构造对象的属性 返回 undefined。这个name是构造对象在函数外定义的。如果是在函数内定义的则可以访问。 
对于构造对象的属性，实例对象是不能继承的，因此也不能够通过实例对象来读取构造对象的属性，反过来，构造对象也不能读取实例对象的属性。 
构造对象不能使用this关键字来读去实例对象的属性。 
function Point(x,y){ 
    this.x = x; 
    this.y = y; 
this.z = z; 
} 
Point.name = "类属性"; 
Point.money = "1203"; 
Point.saying = function(){ 
    alert(this.length); //返回值2 
} 
Point.saying(); 
var p = new Point(); 
alert(p.name);// 实例对象不能访问构造对象的属性。抛错。

function Point(x){ 
    this.x = x; 
} 
Point.saying = function(){ //构造对象的方法 
    alert("类方法"); 
} 
Point.saying(); //直接调用构造对象的方法

Point.saying = function(){ 
    alert(this.x);//不能通过this访问实例对象的属性 
} 
Point.saying(); //直接调用构造对象的方法 返回undefined

实例对象 
实例对象的属性有两种： 
     第一种：从构造对象中继承过来的，这种属性每一个实力属性都有，但是他们拥有不同的副本。 
第二种：自己创建的，这种属性只有这个实例对象所独有。

原型对象 
就是构造函数的实例对象。它所包含的所有属性和方法能够供构造函数的所有实例共享。（类继承的实现），js叫原型继承。 
原型对象时在使用构造函数创建对象是同时实例化的一个对象，所有的对象都共同拥有这个对象的引用。 
通常我们在原型对象里面定义实例对象公用的方法，这样的好处是： 
     第一：所有的对象都共有这样一个方法实例，大大的节省的内存。 
第二： 当我们想修改对象的方法是，只用修改原型对象的方法既可以了，不用再麻烦的修改每一个实例的方法。 
如果原型属性和实例对象自定义的属性发生了命名冲突，则自定义的属性会“覆盖”原型属性的内容。这时由他的工作机制所决定的，但并不是真正的覆盖。如果我们删除这个属性，也是删除的实例的属性。 
当js解释器在检索属性时，会先检查对象实例是否定义该属性，没有，则会检查构造函数的原型对象是否具有这个属性。属性的继承只发生在读属性值时，而在写属性时不会发生。

构造器 
构造器是在Object类中定义的属性，该属性始终指向对象的构造函数。

对象的构造器属性是通过原型对象继承的，如果我们删除掉对象的原型，就可以看到他会自动查找到上一层的构造器属性。最终是要指向Ojbect的。

对于js内置对象来说，由于它们的原型是只读的，用户无法修改，所以可以使用constructor属性来判断内置对象的数据类型。

ToString ()、valueOf()方法。 
hasOwnProperty 用来检测一个对象的属性是继承属性，还是私有属性。但是注意：如果是一个对象的继承属性则会返回false，但是对于这个对象的原型对象来说则会返回true 
isPrototypeOf：判断一个对象的原形对象。函数的原型对象可以是Object.prototype，或者Function.prototype。

Global对象。是抽象类。JavaScript规定所有的对象和函数都不能独立存在，换句话说，所有的函数都必须是某个对象的方法， 所有的对象都必须是某个类的子类。

这就是全局对象，虽然是全局对象，但是global却没有方法调用全局的变量和方法。 这些方法却可以自己直接执行。

所以global有点像名誉zhuxi。没有实际的操控权利。 
Date对象： 
//获取本地系统的当前时间。 
var now = new Date(); 
alert(now); //返回当前时间对象，如"Wed Apr 29 15 :37: 55 UTC +0800 2009 "

//通过多选参数来创建指定的时间对象。此时，构造函数Date()的参数格式如下： 
new Date(year, month, day, hours, minutes, seconds, ms)

//除了前两个参数外（年和月）外，其他所有参数都是可选的，其中月数参数从0开始，如0表示第1个月，11表示第12个月。 
var d1 = new Date(2009,4,1); 
alert(d1); //返回时间对象，如"Fri May 1 00: 00:00 UTC+ 0800 2009" 
var d2 = new Date(2009,4,1,5,30,30); 
alert(d2); //返回时间对象，如"Fri May 1 00: 00:00 UTC+ 0800 2009"

//通过一个时间格式的字符串来创建指定的时间对象。此时，月份是从1开始，而不是从0开始。 
var d1 = new Date("2009/4/1 5:30:30"); 
alert(d1); //返回时间对象，如"Wed Apr 1 05 :30: 30 UTC +0800 2009"

//通过传递一个毫秒数来创建指定的时间对象。这个毫秒数是距离1970年1月1日午夜(GMT时间)的毫秒数。 
var d1 = new Date(1000000000000); 
alert(d1); //返回时间对象，如"Sun Sep 9 09 :46 :40 UTC +0800 2001"

第九章 数组 
数组的定义有两种方法： 
1.使用new关键字，传入参数。 
2.使用数组直接量，在中括号中添加元素。 
建议使用第二种方法因为效率高一些。 
Js的数组的长度可以任意伸缩，可以存储任意类型的数据内容。数组的下标可以不连续。Js在初始化数组时，只有真正存储在数组中的元素才能够被分配到内存中。 
数组中的元素可以自由定义，例如如果只定义1和100则在内存中实际额只存在这两个元素。 
所以在JavaScript中数组是否按顺序并不是那么重要。 
Array.length返回的不是数组存储值的实际个数，而是当前数组的最大元素的个数。 
数组和对象的一个区别就是：数组使用的是下标和具体的值相关联，而对象中则使用的是特定的字符串。 
交换两个变量 
var a = 10, b = 20; //变量初始化 
//var temp = a; //定义临时变量存储a 
//a = b; //把b的值赋值给a 
//b = temp; //把临时变量的值赋值给b 
a = [b, b = a ][0]; //通过数组快速交换数据 
定义数组的基本方法： 
   第一步： 定义函数名，通过一个或表达式首先判断如果存在则直接使用如果不存在则定义。 
   第二步： 将第一的函数名付给Object， 
Array.prototype._sum = Array.prototype.sum || //检测是否存在同名方法 
( Array.prototype.sum = function(){ //定义该方法 
    var _n = 0; //临时汇总变量 
    for(var i in this){ //遍历当前数组对象 
        if( this[i] = parseFloat( this[i] ) ) _n +=  this[i]; //如果数组元素是数字，则进行累加 
    }; 
    return _n; //返回累加的和 
}); 
Object.prototype.sum = Array.prototype._sum //把数组临时原型方法赋值给对象的原型方法sum()

var a = [1, 2, 3, 4, 5, 6, 7, 8, "9"]; //定义数组直接量 
alert( a.sum() ); //返回45

第十章字符串 
Js解释器采用了引用的方法实现对字符串的操作。字符串数据被存储到堆，然后把字符串的引用地址存储在字符串变量中。同时为了避免错误操作，js解释器强制约定字符串在堆存储的数据是不可变的。相当于设置字符串在堆区存储的数据是只读的。 
js对字符串的复制，传递操作，仅是简单的采用引用的方法，操作对象为堆区字符串的地址，即复制和传递地址。但是一旦编辑字符串本身的值，则js就会把堆区的字符串读取到棧区进行独立操作。 
字符串的比较是逐字节比较的。先把两个变量的字符串读取到栈区，然后逐字节比较，最后返回比较结果。 
字符串的操作是结合了值操作和引用操作的。当申明一个字符串时会把它的真实值存放在堆区，并且设定了堆区的内容是不可改变的，而在栈去存放堆区的地址。所以当进行复制和传递操作时只是进行了地址的传递，但是一旦要对字符串进行修改时则会复制一份放到栈区。实际是对栈区的内容进行改变，所以操作之后我们需要将这个值再次赋给引用，否则它会只是存放在栈区里，等待垃圾回收。 
对于字符串类型的语句或表达式，可以使用静态方法eval()来执行。 
var s = "alert('love')"; 
eval(s); 
var s = new String(); //创建一个空字符串对象，并赋值给变量s.object类型。 
var s = String( 123456 ); //包装字符串。String类型。 
var s = String( 1, 2, 3, 4, 5, 6 ); //带有多个参数，只处理第一个参数并把它转换为字符串返回。 
fromCharCode可以包含n个参数，参数代表字符的unicode编码。返回对应编码的字符的新字符串。 
var a = [35835, 32773, 24744, 22909], b = [];//声明一个字符编码的数组 
for( var i in a ){ //遍历数组 
    b.push( String.fromCharCode( a[i] ) ); //把每个字符编码都转换为字符串 
} 
alert( b ); //返回字符串"读,者,您,好" 
alert( b.join( "" ) ); //返回字符串"读者您好"

第12章 BOM 
BOM：浏览器对象模型。Browser Object Model 
Bom对象包括：window,navigator,screen,history,location,document. 
Window代表根节点，其它对象是window的属性。它是全局作用域 
Window对象定义的3个人机交互方法：alert，confirm，prompt。

var url = "http://www.css8.cn/"; 
var features = "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no"; 
document.write('<a href="http://www.baidu.com/" target="newW" >切换到百度首页</a>'); 
var me = window.open (url, "newW", features); 
setTimeout(function(){ 
    me.close(); 
},30000);

使用write 方法时会覆盖掉前一个的内容。 
Location.search 捕获url查询字符串信息。 
第十三章 DOM 
window.onload = function(){ 
var tag = document.getElementsByTagName("ul")[0]; 
var a = tag.childNodes;//获取列表结果所包含的所有列表节点 
alert(a[0].nodeName);//显示第一个列表项的节点名称 
node.childNodes[0] = node.firstChild 
    node.childNodes[node.childNodes.length-1] = node.lastChild 
} 
</script> 
<ul> 
    <li>D表示文档，DOM的物质基础</li> 
    <li>O表示对象，DOM的思想基础</li> 
    <li>M表示模型，DOM的方法基础</li> 
</ul>

DOM把元素之间的空格也当成文本节点。这在XML中是一样的。XML解析也是如此。 
NodeType=1表示的是元素节点。 
innerHTML返回元素包含的html信息内容。

第十四章 事件驱动模型 
个人认为类似于as的事件机制。有父子元素冒泡和捕获的概念。 
document.write('<script type="text/javascript">'); 写的js命令，必须放在<script></script>中。 
4种事件处理模型： 
1、0级 基本事件模型 
2、标准事件模型 
3、IE事件模型 
4、Nerscape4事件模型

JS不支持多线程。支持异步回调。类似于as的回调函数。一旦异步执行完，根据执行返回条件执行对应的回调函数。

Js的事件流机制：捕获型和冒泡型。三个阶段：捕获阶段、目标阶段、冒泡阶段。 
从IE6开始，html元素可以接受事件流。而这之前的版本是不行的。MOZILLA支持window对象。 
<script language="javascript" type="text/javascript"> 
function f(a){ 
    alert(a);//p点击时，FIREFOX的顺序是P，HTML，BODY。IE的顺序是P，BODY，HTML。 
} 
</script> 
<html onclick="f('HTML')"> 
<body onclick="f('BODY')" bgcolor="#333333"> 
    <p onClick="f('P')">冒泡型事件</p> 
</body> 
</html>

DOM2.0支持冒泡型事件流和捕获型事件流。但是规定捕获型事件流先进行响应。默认情况下，事件采用冒泡事件流，不采用捕获事件流。在firefox可以显示设置是否使用捕获型事件流。

一般来说事件处理函数都会有返回值，如果我们设置返回值为false就可以禁止它的默认行为。例如阻止超链接，阻止表单提交数据。

Event.srcElement。表示当前事件的源。利用该属性可以捕获当前对象。但是DOM2不支持该属性。在firefox浏览器要使用event.target。

alert(event.srcElement);//firefox:undefined,IE: object.firefox和 DOM2不支持srcElement属性

<button id="btn">按    钮</button> 
<script language="javascript" type="text/javascript"> 
document.getElementById("btn").onclick = function(event){ 
    event = event || window.event; //兼容FF和IE浏览器的event参数模式 
    var src = event.srcElement || event.target; //捕获当前事件的对象句柄 
    alert(src.innerHTML); //显示当前对象所包含的HTML文本信息 
} 
</script>

This对象 
通常情况下this等于事件源对象。 
<!-- 
通常情况下this等于事件源对象。 
--> 
<button id="btn" onClick="this.style.background='red';">按    钮</button> 
<script language="javascript" type="text/javascript"> 
function btn1(){ 
    this.style.background = "red"; //并非指向当前事件的目标对象.this指向window对象. 
} 
function btn2(event){ 
    event = event || window.event; 
    var src = event.srcElement ? event.srcElement : event.target; 
    src.style.background = "red"; //指向当前事件的目标对象 
} 
</script> 
<button onClick="btn1();">按 钮 1</button> 
<button onClick="btn2(event);">按 钮 2</button>

再看个例子 
<button id="btn1">按 钮 1</button> 
<button id="btn2">按 钮 2</button> 
<script language="javascript" type="text/javascript"> 
var b1 = document.getElementsByTagName("button")[0]; 
var b2 = document.getElementsByTagName("button")[1]; 
b1.f = function(){ 
    this.style.background = "red"; //并非指向按钮1 按钮1 点击指向的是window,按钮2点击指向的是btn2. 
} 
b2.onclick = b1.f; 
</script>

b2.onclick = function(){ 
    b1.f(); //指向按钮1 
}

这是因为函数的作用域造成的。 
Js的函数总是运行在词法作用域中，即函数总是在定义它们的作用域中运行，而不在调用它们的作用域中运行。

元素的事件处理函数的作用域是独立的作用域，与局部作用域不同。 
Js在引用变量值时，会根据作用域从内到外，从下到上检索，作用域顶部是window对象。但是对于html元素的属性的事件处理函数，它的作用域顶部是元素目标调用对象。

addEventListener()和removeEventListener()。在事件处理函数内部，this总是指向当前元素。 
IE 7不支持DOM的addEventListener方法。

<p id="p">IE事件注册</p> 
<script language="javascript" type="text/javascript"> 
/* 
注销函数是不能够使用匿名函数，应为这样无法真正的删除这个绑定的函数。Firefox会把绑定和注销的两个结构相同的匿名函数视为不同函数。 
*/ 
var p = document.getElementById("p"); 
p.attachEvent("onclick", f); 
p.detachEvent("onclick", f); 
function f(){ 
    alert("p"); 
} 
</script> 
addEventListener()和removeEventListener()的第三个参数是否捕获，必须一致。

var event = event || window.event; //标准化事件对象 如果存在event则使用event，不存在则使用window.event

loading事件机制 
<body onLoad="f1()"> 
<script language="javascript" type="text/javascript"> 
window.onload = f2; 
function f1(){ 
    alert('<body onload="f1()">'); 
} 
function f2(){ 
    alert('window.onload = f2;'); 
} 
</script> 
如果同时使用两种方式定义load事件类型,会使用window对象注册的事件处理函数覆盖掉body元素定义的页面初始化事件属性。

window.onload = f1; 
window.onload = f2; 
以上写法f1会被f2覆盖掉。 
window.addEventListener("load",f1,false); //为load添加事件处理函数 
window.addEventListener("load",f2,false); //为load添加事件处理函数 
这些写法就不会覆盖。两个监听都会执行。

DOMContentLoaded事件类型。 
Load事件需要等到所有图像全部载入完成之后才会被触发。而DOMContentLoaded事件会在页面结构加载完毕后就能执行。先于load事件。IE7 不支持。

Onunload 和Beforeunload事件类型。关闭窗口之前的事件处理函数。

第十五章  样式 
IE不支持DOM定义的style方法。 
DOM的style定义方法 
var box = document.getElementById("box"); 
box.style.setProperty("width","400px","");//第三个参数 priority表示是否为属性设置！important优先级命令。 
IE的style定义方法 
Box.style.width = “400px”;

看下面的例子： 
<style type="text/css"> 
#box { 
    width:100px; 
    height:100px; 
     
    border:solid 50px blue; 
} 
</style> 
<div id="box"></div> 
<script language="javascript" type="text/javascript"> 
var box = document.getElementById("box"); 
alert(box.style.border);//返回空值。使用style样式无法访问样式表中的样式属性。css样式信息并非存储在 style属性中，而是存储在css 类中。 
</script> 
和 
<div id="box" style="width:100px; height:100px; border:solid 50px blue;"></div> 
<script language="javascript" type="text/javascript"> 
var box = document.getElementById("box"); 
alert(box.getAttribute("style")); 
</script>

要访问css类。可以使用document.styleSheet集合来实现。该集合包包含了文档中所有样式表的引用。如style 的link和import的外部样式表。和定义在本文档中的style样式。

DOM提供了cssRules集合，用来包含指定样式表中所有的样式。IE不支持。 
<script language="javascript" type="text/javascript"> 
var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;//判断浏览器的类型，是否支持cssRules。 
alert(cssRules[0].style.border); //调用cssRules集合中的border属性 
</script>

CssRules或rules集合的style对象在调用css属性时，使用的是js样式属性，不能够使用连字符，如cssRules[0].style.backgroundColor 不行，而必须使用cssRules[0].style.background-Color

如果同时存在css外部样式表，又存在定义在文档中的样式属性。按照它们的位置排列styleSheets数组的索引位置。 
<link href="out.css" rel="stylesheet" type="text/css" media="all" />//styleSheets[0] 
//styleSheets[1] 
<style type="text/css"> 
#box { color:green; } 
.red { color:red; } 
.blue { color:blue; } 
</style>

每个css规则都包含有selectorText属性，获取指定样式的选择符。在IE中大写显示，Firefox小写显示。 
alert(cssRules[2].selectorText); 
alert(cssRules[2].style.color);

动态添加样式insertRule和addRule 
IE中支持addRule。FireFox支持insertRule 
if(styleSheets.insertRule){ //判断浏览器是否支持insertRule()方法 
//使用insertRule()方法在文档内部样式表中增加一个p标签选择符的样式，设置段落背景色为红色，字体颜色为白色，补白为一个字体大小。插入位置在样式表的末尾， 
   styleSheets.insertRule("p{color:#fff;padding:1em;}", index); 
}else{ //如果哦浏览器不支持insertRule()方法 
   styleSheets.addRule("P", "color:#fff;padding:1em;", index); 
}

addRule的Index表示样式插入的位置。默认是-1，表示在样式表末尾。 
insertRule的Index表示样式插入的位置。默认是0，表示在样式表末尾。必须设置。

访问最终样式 
IE: currentStyle对象，包含了所有元素的style对象定义的属性和任何未被覆盖的css规则的style属性。只有IE 支持。 
alert("背 景 色："+p.currentStyle.backgroundColor+"\n字体颜色："+p.currentStyle.color);

DOM提供了getComputedStyle()方法。该方法需要在document.defaultView对象中访问。 
var p = document.getElementsByTagName("p")[0];

alert("背 景 色："+document.defaultView.getComputedStyle(p,null).backgroundColor+"\n字体颜色："+document.defaultView.getComputedStyle(p,null).color);

offsetWidth表示元素在页面中的总宽度。 
offsetHeight表示元素在页面中的总高度。 
但是当为元素或者它的父元素定义了display:none，则offsetWidth和 offsetHeight都为0。

不同浏览器下获取style 
function getStyle(e, n) 
{ 
    if(e.style[n]) 
    { 
        return e.style[n]; 
    } 
    else if(e.currentStyle) 
    { 
        return e.currentStyle[n]; 
    } 
    else if(document.defaultView && document.defaultView.getComputedStyle) 
    { 
        n = n.replace(/([A-Z])/g, "-$1"); 
        n = n.toLowerCase(); 
        var s = document.defaultView.getComputedStyle(e, null); 
        if(s) return s.getPropertyValue(n); 
    } 
    else 
    return null; 
}

显示和隐藏元素 
css支持两种:visibility和display。 
Visibility： 会保持元素在文档流中的影响力，隐藏后元素的位置保持不变。属性包括visible和hidden。 
Display： 为none时，文档的结构会发生变化。被隐藏的元素及其子元素就被删除了。该元素不再占据文档位置。后面的元素会上移占据被删除的元素的位置。

透明度 ：e.style.opacity = n / 100;

动画： 
var out = setInterval(f, 1000); //定义周期性执行的函数. 
clearTimeout(out); //则清除周期性调用函数 
setTimeout();//只能被执行一次。如果要循环执行，采用以下嵌套的方式。

var t = document.getElementsByTagName("input")[0]; 
var i = 1; 
function f(){ 
    var out = setTimeout( //定义延迟执行的方法 
    function(){ //延迟执行函数 
        t.value = i ++ ; //递加数字 
        f(); //调用包含setTimeout()方法的函数 
    }, 1000); //设置每秒执行一次调用 
    if(i > 10){ //如果超过10次，则清除执行，并弹出提示信息 
        clearTimeout(out); 
        alert("10秒钟已到"); 
    } 
} 
f(); //调用函数

第十六章 COOKIE 
 有效期 expires属性 
 可见性 path domain属性 
 安全性 secure属性 
以上都是cookie属性，而不是js属性。 
Name：唯一的。不区分大小写。 
Value:cookie信息。不超过4KB 
Domain: 
Path: 有效访问路径。Path=/。表示cookie信息将会与服务器根目录下所有网页相关联 
Expires:失效日期 
Secure：boolean。True表示安全方式传递。

Cookie字符串是一对名值对。

Cookie的封装：

function cookie(name, value, options) 
{ 
    if (typeof value != 'undefined') 
    { 
        options = options || 
        { 
        } 
        ; 
        if (value === null) 
        { 
            value = ''; 
            options.expires = - 1; 
        } 
        var expires = ''; 
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) 
        { 
            var date; 
            if (typeof options.expires == 'number') 
            { 
                date = new Date(); 
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); 
            } 
            else 
            { 
                date = options.expires; 
            } 
            expires = '; expires=' + date.toUTCString(); 
        } 
        var path = options.path ? '; path=' + options.path : ''; 
        var domain = options.domain ? '; domain=' + options.domain : ''; 
        var secure = options.secure ? '; secure' : ''; 
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); 
    } 
    else 
    { 
        var cookieValue = null; 
        if (document.cookie && document.cookie != '') 
        { 
            var cookies = document.cookie.split(';'); 
            for (var i = 0; i < cookies.length; i ++ ) 
            { 
                var cookie = (cookies[i] || "").replace( /^\s+|\s+$/g, "" ); 
                if (cookie.substring(0, name.length + 1) == (name + '=')) 
                { 
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
                    break; 
                } 
            } 
        } 
        return cookieValue; 
    } 
}

第十七章 xml和json 
XML ：区分元素节点和文本节点。属性节点。

推荐使用JSON。 
Json的数据结构基于对象和数组来构建。 
对象：名值对。{“string1”:”value1”, “string2”:”value2”} 
数组：

第十八章AJAX 
注意 ：客户端和服务器端的编码要一致。 
JSON 异步通信协议 XMLHttpRequest 是 ajax异步交互的核心插件。和frame只能在同域中通信。 
JSONP : JSON with Padding。能够通过在当前文档中生成脚本标记（script），来调用垮域脚本时使用的约定。 
JSONP格式的数据就是把JSON数据作为参数传递给callback并传回。

ActiveXObject 
XMLHRttpRequest。 
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

第十九章 OOP 
Object，Function，Array，是内置的类。但是并不应该称为构造函数。我们在实例化的时候，会实例类的构造函数，但是类并不等于构造函数。

构造函数没有返回值，但是在js中构造函书可以返回一个对象值。构造函书内部并没有创造对象，而是使用this代替。This是新创建对象的引用指针。

原型模式 
当在构造函书中定义prototype属性后，任何实例化的对象都拥有prototype属性所定义的属性。而实例化的对象不能通过prototype属性定义原型。 
Js的内置对象都是构造函数结构体，因此都拥有prototype属性。

Prototype属性也是一个引用对象的指针，它值向一个隐形的对象，该对象存储着构造函书所有的原型属性。相当于基因库。一旦某个对象的属性被改动，则所有其他实例对象的属性也会变化。

构造函数属性和原型属性混合模式是ECMAScript的推荐标准。 
function Book(title,pages){ 
    this.title = title; 
    this.pages = pages; 
    Book.prototype.what = function(){ 
        alert(this.title +this.pages); 
    }; 
}

动态原型模式 
function Book(title,pages){ 
    this.title = title; 
    this.pages = pages; 
    if(typeof Book.isLock == "undefined"){ 
        Book.prototype.what = function(){ 
            alert(this.title +this.pages); 
        }; 
        Book.isLock = true; 
    } 
}

修改原型属性，所有实例的原型值都会发生改变。 
这章太复杂拉。可以单独写一本书出来了。

第20章 
函数是第一型。表示。