首页 > 代码库 > JS总览

JS总览

2024-08-06 22:56:38   220人阅读

实际上，一个完整的JavaScript实现是由以下3个不同部分组成的：核心ECMAScript、浏览器对象模型BOM、文档对象模型DOM。

一、核心的ECMAScript

ECMAScript可以为不同各类的宿主环境提供核心的脚本编程能力，因此核心的脚本语言是与任何特定的宿主环境分开进行规定的。Web浏览器对于ECMAScript来说就是一个宿主环境，但它并不是唯一的宿主环境。在ECMAScript描述了以下的内容：语法、变量、关键字、保留字、原始值和引用值、原始类型和引用类型、类型转换、运算符、语句、函数、对象、作用域、定义类或对象、继承。

1. 语法

 

[java] 
 
  1. 区分大小写。与Java一样，变量名、函数名、运算符以及其他一切东西都是区分大小写的。  
  2. 变量是弱类型的。ECMAScript中变量无特定的类型，只用var运算符，可以将它初始化为任意的值，可以随时改变变量所存数据的类型。  
  3. 每行结尾的分号可有可无。习惯问题加上分号，因为没有分号，有些浏览器就不有正常运行。  
  4. 注释与Java、C和PHP语言的注释相同。单选注释以双斜线(//)开头；多选注释以单斜线和星号(/*)开头，以星号加单斜线结尾(*/)。  
  5. 括号表明代码块。这些语句被封装在左括号({)和右括号(})之间。  

 

2. 变量

[java] 
 
  1. ECMAScript中的变量是用var运算符(variable的缩写)加变量名定义的。例如：var test = "hi", age = 25;  
  2. 与Java不同，ECMAScript中的变量并不一定要初始化(它们是在幕后初始化的)。例如：var test;  
  3. 与Java不同的还有，变量可以存放不同类型的值，这也是弱类型的优势。例如：var test = "hi"; test = 25;  
  4. ECMAScript中的变量允许使用之前不必声明，解释程序遇到未声明过的标识符时，用该变量名创建一个全局变量并初始化为指定的值。  
  5. 变量名规则：第一个必须是字母、下划线(_)或美元符号($)，余下字符可以是下划线、美元符号或任何字母或数字字符。  
  6. 通常在变量名前加上一个前缀，如数组(a)、布尔开型(b)、浮点型(f)、函数(fn)、整型(i)、对象(o)、正则表达式(re)、字符串(s)、变型(v)。  

3. 关键字

[java] 
 
  1. 根据规定，关键字是保留的，不能用作变量名或函数名。如果把关键字用作变量名或函数名，可以得到诸如"Identifier excepted"这样的错误消息。ECMAScript关键字的完整列表如下：  
  2. try、catch、finally、break、continue、default、throw、return、for、in、if、else、do、while、switch、case、new、var、delete、void、function、this、with、instanceof、typeof  

4. 保留字

[java] 
 
  1. 保留字在某种意义上是为将来的关键字而保留的单词，因此，保留字也不能用作变量名或函数名。ECMAScript保留字的完整列表如下：  
  2. boolean、char、byte、short、int、long、float、double、extends、abstract、implements、interface、import、package、class、public、protected、private、transient、static、final、native、volatile、synchronized、enum、export、super、throws、const、goto、debugger  

5. 原始值和引用值

[java] 
 
  1. 在ECMAScript中，变量可以存放两种类型的值，即原始值和引用值。  
  2. 原始值是存储在栈(Stack)中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。原始类型占据的空间是固定的，这样存储便于迅速查寻变量的值。  
  3. 引用值是存储在堆(Heap)中的对象，也就是说，存储在变量处的值是一个指针，指向存储对象的内存处。引用值的大小会改变，不能把它放在栈中，否则会降低变量查寻的速度。  

6.  原始类型

[java] 
 
  1. ECMAScript有5种原始类型，即Undefined、Null、Boolean、Number和String。每种类型定义了它包含的值的范围及其字面量表示形式。  
  2. typeof运算符可以用来判断一个值是否在某种类型的范围内。  
  3. typeof运算符将返回下列值之一："undefined(Undefined类型)"、"boolean(Boolean类型)"、"number(Number类型)"、"string(String类型)"、"object(引用类型或Null类型)"  
  4.   
  5. 当声明的变量未初始化时，该变量的默认值是undefined；如：var tmp; alert(typeof tmp); //undefined  
  6. 当typeof作用于未声明的变量上时，返回的也是undefined；如：alert(typeof tmp); //undefined  
  7. 当函数无明确返回值时，返回的也是undefined；如：function testFn(){...}  alert(testFn() == undefined); //true  
  8. alert(null == undefined); //true，尽管这两个值相等，但是含义不同，一个是声明了变量但未对其初始化时赋予该变量的值，一个表示尚未存在的对象，如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是null。  
  9.   
  10. Boolean只有两个字面量：true和false。  
  11.   
  12. Number即可表示32位的整数，也可表示64位的浮点数，也可表示8进制、16进制和科学计数法。如：var iN=55, fN=1.0, iN1=070; iN3=0XAB, fN2=3.12e7。  
  13. 尽管所有整数都可表示为八进制或十六进制的字面量，但所有数学运算返回的都是十进制结果。  
  14. 浮点数在用它进行计算之前，真正存储的是字符串。IEEE 754规定64位的浮点数最多可以有17个十进制位。  
  15. Number.MAX_VALUE和Number.MIN_VALUE定义了Number值集合的外边界。Number.POSITIVE_INFINITY和Number.NEGATIVE_INFINITY表示超出外边界的无穷大和无穷小，也可用Infinity和-Infinity表示。  
  16. 对于任何数调用isFinite()方法，以确保该数不是无穷大；调用isNaN()方法来判断该数是否是数值。alert(NaN == NaN); //false，NaN自身不相等  
  17.   
  18. 字符串字面量是由双引号或单引号声明的，首字符从0开始，换行\n、制表符\t、空格\b、回车\r、换页符\f、反斜杠\\、单引号\‘、双引号\"、八进制代码\0nnn、十六进制代码\Xnnn、十六进制代码\Unnnn(Unicode字符)。  

7. 引用类型

[java] 
 
  1. Object类：与Java中的java.lang.Object类似，ECMAScript中的所有类都由这个类继承而来，Object类中的所有属性和方法都会出现在其他类中。  
  2. 属性：  
  3. Constructor 对创建对象的函数的引用，对于Object类，该指针指向原始的object()函数。  
  4. Prototype 对该对象的对象原型的引用，对于所有的类，它默认返回Object对象的一个实例，允许您向对象添加属性和方法。  
  5. 方法：  
  6. HasOwnProperty(property) 判断对象是否有某个特定的属性，必须用字符串指定该属性  
  7. IsPrototypeOf(object) 判断该对象是否为另一个对象的原型  
  8. PropertyIsEnumerable(property) 判断给定的属性是否可以用for...in语句进行枚举  
  9. ToString() 返回对象的原始字符串表示  
  10. ValueOf() 返回最适合该对象的原始值  
  11.   
  12. Boolean类：将覆盖object类的valueOf()方法，返回原始值，即true或false；toString()方法也会被覆盖，返回字符串"true"或"false"。很少使用Boolean对象，不易理解。  
  13. var oFalseObject = new Boolean(false);  
  14. var bResult = oFalseObject && true;  //true  
  15. var cResult = oFalseObject.valueOf() && true;  //false  
  16.   
  17. Number类：除了覆盖valueOf()和toString()方法，还有几个处理数值的专用方法。应该少使用这种对象，以避免发生潜在的问题。  
  18. var oNumberObject = new Number(99);  
  19. alert(oNumberObject.valueOf()); //99  
  20. alert(oNumberObject.toFixed(2)); //99.00，返回具有指定位数小数的数字的字符串表示  
  21. alert(oNumberObject.toExponential(1)); //9.9e+1，返回用科学计数法表示的字符串形式  
  22. alert(oNumberObject.recision(1)); //1e+2，根据最有意义的形式来返回数字的预定形式或指数形式  
  23. alert(oNumberObject.recision(2)); //99  
  24. alert(oNumberObject.recision(3)); //99.0，相当于toFixed(1)  
  25.   
  26. String类：valueOf()和toString()方法都会返回String型的原始值，String类的所有属性和方法都可应用于String原始值上，因为它们都是伪对象。  
  27. var oStringObject = new String("hello world");  
  28. alert(oStringObject.valueOf() == oStringObject.toString()); //true  
  29. alert(oStringObject.length); //11，求字符串中字符的个数  
  30. alert(oStringObject.charAt(1)); //"e"，访问字符串中的单个字符  
  31. alert(oStringObject.charCodeAt(1)); //101，访问字符串中的单个字符的字符代码  
  32. alert(oStringObject.fromCharCode(1)); //  
  33. var sResult = oStringObject.concat(" again");  
  34. alert(sResult); //"hello world again"，把一个或多个字符串连接到String对象的原始值上，返回的是String的原始值，也可用"+"号连接  
  35. alert(oStringObject.indexOf("o")); //4，从字符串的开头开始检索子串的位置  
  36. alert(oStringObject.lastIndexOf("o")); //7，从字符串的结尾开始检索子串的位置  
  37. alert(oStringObject.localeCompare("zoo")); //-1，对字符串值进行排序，返回-1、0或1  
  38. alert(oStringObject.slice(3)); //"lo world"，返回字符串的子串，同substring()，只有在参数为负数时，它们的处理方式稍有不同  
  39. alert(oStringObject.substring(3)); //"lo world"  
  40. alert(oStringObject.slice(3, 7)); //"lo w"  
  41. alert(oStringObject.substring(3, 7)); //"lo w"  
  42. alert(oStringObject.slice(-3)); //"rld"，对于负数，slice()会用字符串的长度加上参数，相当于slice(8)  
  43. alert(oStringObject.substring(-3)); //"hello world"，substring()将其作为0处理，也就是忽略它  
  44. alert(oStringObject.slice(3, -4)); //"lo w"，相当于slice(3, 7)  
  45. alert(oStringObject.substring(3, -4)); //"hel"，相当于substring(3, 0)，也就是substring(0, 3)  
  46. alert(oStringObject.match("world"));  //"world"，用于检索一个字符串  
  47. alert(oStringObject.match(/\w+/g));  //"hello world"，用来检索一个正则表达式的匹配  
  48. alert(oStringObject.search(/World/));  //"-1"，因为search对大小写敏感，检索不到World  
  49. alert(oStringObject.search(/World/i));  //"6"，忽略大小写的检索  
  50. alert(oStringObject.replace(/Hello/i, "hi"));  //"hi world"，用来替换字符串中的字符  
  51. alert(oStringObject.split(" "));  //["hello","world"]，用来分割字符串  
  52. alert(oStringObject.toLowerCase()); //"hello world"，把字符串转成小写  
  53. alert(oStringObject.toLocaleLowerCase()); //"hello world"，基于特定区域实现的，同localeCompare()  
  54. alert(oStringObject.toUpperCase()); //"HELLO WORLD"，把字符串转成大写  
  55. alert(oStringObject.toLocaleUpperCase()); //"HELLO WORLD"，基于特定区域实现的，同localeCompare()  

8. 类型转换

[java] 
 
  1. 转换成字符串：3种主要的原始值Boolean值、数字和字符串都有toString()方法，可以把它们的值转换成字符串。  
  2. var bFound = false;  
  3. alert(bFound.toString());  //"false"  
  4. var iNum1 = 10;  
  5. var fNum2 = 10.0;  
  6. alert(iNum1.toString());  //"10"  
  7. alert(fNum2.toString());  //"10"  
  8. alert(iNum1.toString(2));  //"1010"  
  9. alert(iNum1.toString(8));  //"12"  
  10. alert(iNum1.toString(16));  //"A"  
  11. 转换成数字：ECMAScript提供了两种把非数字的原始值转换成数字的方法，即parseInt()和parseFloat()，从位置0开始查看每个字符，直到找到第一个非有效的字符为止，然后将该字符转换为数字。只有对String类型调用这些方法，才能正确运行，对其他类型返回的都是NaN。  
  12. var iNum1 = parseInt("1234blue");  //1234  
  13. var iNum2 = parseInt("0XA");  //10  
  14. var iNum3 = parseInt("22.5");  //22  
  15. var iNum4 = parseInt("blue");  //NaN  
  16. var iNum5 = parseInt("10", 2);  //2  
  17. var iNum6 = parseInt("10", 8);  //8  
  18. var iNum7 = parseInt("AF", 16);  //175  
  19. var fNum1 = parseFloat("1234blue");  //1234.0  
  20. var iNum2 = parseFloat("0XA");  //0  
  21. var fNum3 = parseFloat("22.5");  //22.5  
  22. var fNum4 = parseFloat("22.34.5");  //22.34  
  23. var fNum5 = parseFloat("0908");  //908  
  24. var fNum6 = parseFloat("blue");  //NaN  
  25. 强制类型转换：Boolean(value)、Number(value)、String(value)分别用于强制转换成Boolean型、数字和字符串。当要转换的值是至少有一个字符的字符串、非0数字或对象时，Boolean()函数将返回true；如果该值是空字符串、数字0、undefined或null，将返回false。Number()的强制转换转换的是整个值，而不是部分值。String()可把任何值转换成字符串，与toString()的区别在于对null或undefined值强制类型转换可以生成字符串而不引发错误。  
  26. var b1 = Boolean("");  //false  
  27. var b2 = Boolean("hi");  //true  
  28. var b3 = Boolean(100);  //true  
  29. var b4 = Boolean(0);  //false  
  30. var b5 = Boolean(null);  //false  
  31. var b6 = Boolean(new Object());  //true  
  32. var n1 = Number(false);  //0  
  33. var n2 = Number(true);  //1  
  34. var n3 = Number(undefined);  //NaN  
  35. var n4 = Number(null);  //0  
  36. var n5 = Number("5.5");  //5.5  
  37. var n6 = Number("56");  //56  
  38. var n7 = Number("5.6.7");  //NaN  
  39. var n8 = Number(new Object());  //NaN  
  40. var n9 = Number(100);  //100  
  41. var s1 = String(null);  //"null"  
  42. var s2 = String(undefined);  //"undefined"  

9. 运算符

[java] 
 
  1. instanceof：在使用typeof运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回"Object"、instanceof用于识别正在处理的对象的类型，要求开发者明确地确认对象为某特定类型。  
  2. var oStringObject = new String("hello world");  
  3. alert(oStringObject instanceof String);  //true  
  4. 一元运算符delete：删除对以前定义的对象属性或方法的引用，但不能删除开发者未定义的属性和方法。delete o.toString()将引发错误  
  5.     var o = new Object;   
  6.     o.name = "Channing";  
  7.     alert(o.name);  //"Channing"  
  8.     delete o.name;  
  9.     alert(o.name);  //"undefined"  
  10. 一元运算符void：对任何值都返回undefined，通常用于避免输出不应该输出的值，如：<a href=http://www.mamicode.com/"javascript:void(window.open(‘about:blank‘));">Click Me</a>，否则浏览器将清空页面，只显示函数结果。  
  11. 前增量/前减量运算符 ++i/--i  
  12. 后增量/后减量运算符 i++/i--  
  13. 一元加法和一元减法   
  14.     var sNum = "25";  
  15.     var iNum1 = +sNum; //25 数值型  
  16.     var iNum2 = -sNum;  //-25 数值型  
  17. 加法运算符：+  
  18.     如果某个运算数是NaN，结果为NaN  
  19.     Infinity + Infinity = Infinity  
  20.     -Infinity + (-Infinity) = -Infinity  
  21.     Infinity + (-Infinity) = NaN  
  22.     0 + 0 = 0  
  23.     -0 + 0 = 0  
  24.     -0 + (-0) = -0  
  25.     如果两个运算数都是字符串，把第二个字符串连接到第一个字符串上。  
  26.     如果只有一个运算数是字符串，把另一个运算数转换成字符串，结果是两个字符串连接成的字符串。  
  27. 减法运算符：-  
  28.     如果某个运算数是NaN，结果为NaN  
  29.     Infinity - Infinity = NaN  
  30.     -Infinity - (-Infinity) = NaN  
  31.     Infinity - (-Infinity) = Infinity   
  32.     -Infinity - Infinity = -Infinity  
  33.     0 - 0 = 0  
  34.     -0 - 0 = -0  
  35.     -0 - (-0) = 0  
  36.     如果某个运算数不是数字，结果为NaN。  
  37. 乘法运算符：*  
  38.     如果某个运算数是NaN，结果为NaN。  
  39.     Infinity乘以0，结果为NaN。  
  40.     Infinity乘以0以外的任何数字，结果为Infinity或-Infinity，由第二运算数的符号决定。  
  41.     Infinity乘以Infinity，结果为Infinity。  
  42. 除法运算符：/  
  43.     如果某个运算数是NaN，结果为NaN。  
  44.     Infinity被Infinity除，结果为NaN。  
  45.     Infinity被任何数字除，结果为Infinity。  
  46.     一个非无穷大的数字除0，结果为Infinity。  
  47.     Infinity被0以外的任何数字除，结果为Infinity或-Infinity，由第二运算数的符号决定。  
  48. 取模运算符：%  
  49.     如果被除数是Infinity，或者除数是0，结果为NaN。  
  50.     Infinity被Infinity除，结果为NaN。  
  51.     如果除数是无穷大的数，结果为被除数。  
  52.     如果被除数为0，结果为0。  
  53. 位运算符：与(&)、或(|)、非(~)、异或(^)、左移(<<)、有符号右移(>>)、无符号右移(>>>)  
  54. 逻辑运算符：与(&&)、或(||)、非(!)  
  55.     如果一个运算数是对象，另一个是Boolean值，返回该对象。  
  56.     如果两个运算数都是对象，||返回第一个对象，&&返回第二个对象。  
  57.     如果某个运算数是null，返回null。  
  58.     如果某个运算数是NaN，返回NaN。  
  59.     如果某个运算数是undefined，发生错误。  
  60. 关系运算符：<、>、<=、>=，(只要有一方为NaN就返回false)  
  61. 等性运算符：==、!=、===(同类型比较)、!==，注意null == undefined、NaN  != NaN  
  62. 条件运算符：variable = boolean_expression ? true_value : false_value;  
  63. 赋值运算符：=、+=、-=、*=、/=、%=、<<=、>>=、>>>=  
  64. 逗号运算符：可以在一条语句中执行多个运算，如var iNum1 = 1, iNum2 = 2, iNum3 = 3;  
10. 语句
[java] 
 
  1. If语句：  
  2. if( condition1 )   
  3.     statement1   
  4. else if ( condition2 )   
  5.     statement2   
  6. else  
  7.     statement3  
  8.   
  9. 迭代语句/循环语句：  
  10. do {  
  11.     statement  
  12. } while ( expression );  
  13.   
  14. while ( expression )  
  15.     statement;  
  16.   
  17. for ( initialization; expression; post-loop-expression )  
  18.     statement;  
  19.   
  20. for ( property in expression )  
  21.     statement;  
  22.   
  23. 有标签的语句：  
  24. label: statement  
  25.   
  26. break语句和continue语句：break立即退出循环，阻止再次反复执行任何代码；continue只是退出当前循环，允许进入下一次循环。可以结合标签语句使用。  
  27.   
  28. with语句：用于设置代码在特定对象中的作用域。  
  29. with ( expression ) statement;  
  30. var sMessage = "hello world";  
  31. with(sMessage){  
  32.     alert(toUpperCase());  //"HELLO WORLD"  
  33. }  
  34.   
  35. switch语句：  
  36. switch ( expression ) {  
  37.     case value :   
  38.         statement;  
  39.         berak;  
  40.     ......  
  41.     default:  
  42.         statement;  
  43. }  

11. 函数

[java] 
 
  1. function functionName(arg0, arg1, ... , argN) {  
  2.     statements;  
  3.     return statement;  
  4. }  
  5. 如果函数无明确的返回值，或调用了没有对象的return语句；那么它真正返回的值是undefined。  
  6. 函数不能重载，当相同的名字在同一个作用域中定义两个函数时，并不会引发错误，但真正使用的是后一个函数，第二个函数覆盖了第一个函数的定义，但可以使用argumnets对象避开这种限制。  
  7. 使用arguments对象时，开发者无需明确指出参数名，就能访问它们。arguments[0]、arguments[1]、arguments.length  
  8. function doAdd(){  
  9.     if(arguments.length == 1)  
  10.         alert(arguments[0] + 10);  
  11.     else if (arguments.length == 2)  
  12.         alert(arguments[0] + arguments[1]);  
  13. }  
  14.   
  15. Function类：var function_name = new Function(arg1, arg2, ... ,argN, function_body);  
  16. 尽管可用Function构造函数创建函数，但最好不要使用它，因为用它定义函数比用传统方式要慢的多。不过，所有函数都应看作是Function类的实例。  
  17.   
  18. 函数的属性和方法：  
  19.     length属性，返回的是函数的参数个数，最多有25个。  
  20.     valueOf()和toString()方法，返回的都是函数的源代码。  
  21.   
  22. 函数的难点：闭包  
  23. "所谓闭包，是指词法表示包括不必计算的变量的函数，也就是说，该函数能使用函数外定义的变量。"  
  24. "也有说，闭包就是能够读取其他函数内部变量的函数，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁"  
  25. "又有说，当一个函数被嵌套在另一个函数中，并且在外层函数执行结束之后，内层函数可以继续访问外层函数中的变量。使用闭包可以实现类似私有变量的功能，并且能够阻止外层函数被GC回收。"  
  26. 它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。  
  27. 使用全局变量是一个简单的闭包实例  
  28. var sMessage = "Hello World";  
  29. function sayHelloWorld(){  
  30.     alert(sMessage); //脚本被载入内存后并未为函数计算变量的值，sMessage而是在函数调用时被赋值  
  31. }  
  32. sayHelloWorld();  
  33.   
  34. 在一个函数中定义另一个函数会使闭包变得更复杂  
  35. var iBaseNum  = 10;  
  36. function addNumbers(iNum1, iNum2){  
  37.     function doAddition(){  
  38.         return iNum1 + iNum2 + iBaseNum; //内部函数是个闭包，获取外部函数的参数iNum1和iNum2以及全局变量iBaseNum的值  
  39.     }  
  40. return doAddition();  
  41. }  
  42.   
  43. function f1(){  
  44.     var n=999;  
  45.     nAdd=function(){n+=1}  
  46.     function f2(){  
  47.         alert(n);  
  48.     }  
  49.     return f2;  
  50. }  
  51. var result=f1();  
  52. result(); // 999  
  53. nAdd();  
  54. result(); // 1000  
  55. 在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。   
  56. 为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。   
  57. 这段代码中另一个值得注意的地方，就是“nAdd=function(){n+=1}”这一行，首先在nAdd前面没有使用var关键字，因此 nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。  
  58.   
  59. 使用闭包的注意点   
  60. 1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。   
  61. 2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。   

12. 对象

[java] 
 
  1. 对象声明和实例化：   
  2.     var oObject = new Object(); //如果构造函数无参数，则括号不是必需的  
  3.     var oStringObject = new String();  
  4. 对象的引用：每次创建对象，存储在变量中的都是该对象的引用，而不是对象本身。  
  5. 对象废除：每当函数执行完它的代码，无用存储单元收集程序(垃圾回收器)都会执行，释放所有的局部变量。把对象的所有引用都设置为null，可以强制性的废除对象。  
[java] 
 
  1. 本地对象：  
  2. Object、Boolean、Number、String、Function、Array、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError  
[java] 
 
  1. 创建Array对象：  
  2. var aValues = new Array(); 或 var aValues = new Array(20); 或 var aValues = new Array("red","green");  
  3. aValues[0] = "red";  
  4. aValues[2] = "green";  
  5.   
  6. Array对象的属性和方法：  
  7.     alert(aValues.length);  //3，返回数组元素的个数  
  8.     alert(aValues.valueOf());  //"red,,green"，返回数组元素的字符串表示，以逗号分隔  
  9.     alert(aValues.toString());  //"red,,green"，返回数组元素的字符串表示，以逗号分隔  
  10.     alert(aValues.toLocaleString());  //"red,,green"，与toString()方法相同，但同区域关联  
  11.     alert(array.join("]["));  //"red][][green"，连接数组中的值组成字符串，与String的split()方法正好相反  
  12.     var aValue2 = array.concat("blue", "yellow");  
  13.     alert(aValue2.toString());  //"red,,green,blue,yellow"，将新元素添加在数组末尾，并返回一个新的对象，不影响原来的Array，同String的concat()  
  14.     alert(aValue2.slice(1, 4));  //",green,blue"，返回具有特定项的新数组，不影响原来的Array，同String的slice()方法  
  15.     alert(array.push("blue"));  //"red,,green,blue"，用于在Array结尾添加一个新项，并返回Array的个数4  
  16.     alert(array.pop());  //"red,,green"，删除最后一个数组项，length减1，并返回它作为函数值"blue"  
  17.     alert(array.shift());  //",green"，删除数组中的第一个项，并将其作为函数值返回"red"  
  18.     array.unshift("black");  //"black,,green"，无返回值，把一个项放在数组中第一个位置，然后把余下的项下移一个位置  
  19.     alert(array.reverse());  //"green,,red"，颠倒数组项的顺序并返回  
  20.     alert(array.sort());  //"green,red,"，根据数组项的值按升序为它们排序并返回  
  21.     alert(array.splice(0, 2));  //删除数组中的前两项并返回被删除的数组项"red,"，第一个参数为起始位置(删除)  
  22.     alert(array.splice(2, 0, "blue", "yellow"));  //"red,,blue,yellow,green"，在第2个位置上插入后面的数组项并返回被删除的数组项""，第二个参数为要删除的数组项个数(替换而不删除)  
  23.     alert(array.splice(2, 1, "blue", "yellow"));  //"red,,blue,yellow"，在第2个位置上插入后面的数组项并返回被删除的数组项"green"，第二个参数为要删除的数组项个数(替换并删除)  
[java] 
 
  1. 创建Date对象：  
  2. var date = new Date();  //"Wed Mar 20 15:52:28 UTC+0800 2013"，用当前的日期和时间创建新的Date对象  
  3. var date = new Date(0); //"Thu Jan 1 08:00:00 UTC+0800 1970"，声明距离1970年1月1日凌晨12点的毫秒数  
  4. var date = new Date(Date.parse("May 25 2004"));  //"Tue May 25 00:00:00 UTC+0800 2004"，parse可以获得毫秒表示，如果字符串不能转换成日期，返回NaN  
  5. var date = new Date(Date.UTC(2004, 1, 5, 21, 5));  //"Thu Feb 5 21:05:00 UTC+0800 2004"，参数为年月日时分秒毫秒，年月为必需的,0为一月  
  6. var date = new Date(2004, 1, 5, 21, 5);  //直接声明UTC()方法接受的参数  
  7.   
  8. Date对象的属性和方法：  
  9.     valueOf()，返回日期的毫秒表示，如1075962840000  
  10.     toString()，返回由实现的特定的字符串，如Thu Feb 5 14:34:00 UTC+0800 2004  
  11.     toDateString()，以实现的特定的格式显示Date的日期部分，年月日，如Thu Feb 5 2004  
  12.     toTimeString()，以实现的特定的格式显示Date的时间部分，时分秒和时区，如14:34:00 UTC+0800  
  13.     toLocaleString()，以地点的特定的格式显示Date的日期和日间，如2004年2月5日 14:34:00  
  14.     toLocaleDateString()，以地点的特定的格式显示Date的日期部分，如2004年2月5日  
  15.     toLocaleTimeString()，以地点的特定的格式显示Date的时间部分，如14:34:00  
  16.     toUTCString()，以实现的特定的格式显示Date的UTC时间，如Thu, 5 Feb 2004 06:34:00 UTC  
  17.     getTimezoneOffset()，返回某个时区与UTC时间的关系，如-480表示比UTC时间提前8个小时，还可用来判断是否是夏令时  
  18.     getTime()/setTime(milliseconds)，设置/返回日期的毫秒表示  
  19.     getFullYear()/setFullYear(year))，设置/返回日期的四位数字的年份值  
  20.     getUTCFullYear()/setUTCFullYear(year)，设置/返回UTC日期的四位数字的年份值  
  21.     getMonth()/setMonth(month)，设置/返回日期的月份值，由数字0到11表示，set时对大于11的数开始累计年数  
  22.     getUTCMonth()/setUTCMonth(month)，设置/返回UTC日期的月份值，由数字0到11表示，set时对大于11的数开始累计年数  
  23.     getDate()/setDate(date)，设置/返回日期中该月中的某天  
  24.     getUTCDate()/setUTCDate(date)，设置/返回UTC日期中该月中的某天  
  25.     getDay()/setDay(day)，设置/返回日期为星期几  
  26.     getUTCDay()/setUTCDay(day)，设置/返回UTC日期为星期几  
  27.     getHours()/setHours(hours)，设置/返回日期中的小时值  
  28.     getUTCHours()/setUTCHours(hours)，设置/返回UTC日期中的小时值  
  29.     getMinutes()/setMinutes(minutes)，设置/返回日期中的分钟值  
  30.     getUTCMinutes()/setUTCMinutes(minutes)，设置/返回UTC日期中的分钟值  
  31.     getSeconds()/setSeconds(seconds)，设置/返回日期中的秒值  
  32.     getUTCSeconds()/setUTCSeconds(seconds)，设置/返回UTC日期中的秒值  
  33.     getMilliseconds()/setMilliseconds(seconds)，设置/返回日期中的毫秒值  
  34.     getUTCMilliseconds()/setUTCMilliseconds(seconds)，设置/返回UTC日期中的毫秒值  

RegExp对象

参考JavaScript正则表达式一篇 

[java] 
 
  1. 内置对象Global  
  2. Global对象实际上并不存在，var pointer = Global; 将显示错误消息。Global对象的属性和方法主要有：  
  3.     undefined、NaN、Infinity、Object、Boolean、Number、String、Function、Array、Date、RegExp、  
  4.     Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError  
  5.     isNaN()、isFinite()、parseInt()、parseFloat()  
  6.     eval()，解释程序发现eval()调用时，它将把参数解释为真正的语句，然后把它插入到该函数所在的位置，很强大也可进行代码注入  
  7.     encodeURI()，用于处理完整的URI，不对URI中特殊字符进行编码，如冒号、前斜杠、问号和英镑符号  
  8.     encodeURIComponent()，用于处理URI的一个片断，对它发现的所有非标准字符进行编码  
  9.     decodeURI()/decodeURIComponent()，针对上面两个方法的解码，BOM的escape()和unescape()方法只能对ASCII符号进行编码解码，应避免使用  
[java] 
 
  1. 内置对象Math  
  2. Math对象的属性和方法主要有：  
  3.     E，返回算术常量e，即自然对数的底数(约等于2.718)  
  4.     LN10，返回 2 的自然对数(约等于0.693)  
  5.     LN2，返回 10 的自然对数(约等于2.302)  
  6.     LOG2E，返回以 2 为底的 e 的对数(约等于1.414)  
  7.     LOG10E，返回以 10 为底的 e 的对数(约等于0.434)  
  8.     PI，返回圆周率(约等于3.14159)  
  9.     SQRT1_2，返回 2 的平方根的倒数(约等于0.707)  
  10.     SQRT2，返回 2 的平方根(约等于1.414)  
  11.     max()、min()、abs()、ceil()向上舍入、floor()向下舍入、round()标准舍入、exp()、log()、  
  12.     pow()、sqrt()、sin()、asin()、cos()、acos()、tan()、atan()、atan2()、random()  
[java] 
 
  1. 宿主对象  
  2. 所有非本地对象都是宿主对象，由ECMAScript实现的宿主环境提供的对象，所有BOM和DOM对象都是宿主对象。将在BOM和DOM中详细说明。  

作用域

[java] 
 
  1. ECMAScript中没有公用、受保护和私有作用域。  
  2. 由于缺少私有作用域，开发者们制定了一个规约，规定在属性名前后加下划线，obj._color_ = "red";，但这并不改变这些属性是公用属性的事实。只是告诉其他开发者，应该把该属性看作私有的。  
[java] 
 
  1. ECMAScript中也没有静态作用域。 但可以给构造函数提供属性和方法，因为构造函数只是函数，函数是对象，对象就可以有属性和方法。如：  
  2. function sayHi(){ alert("hi"); }  
  3. sayHi.alternate = function(){ alert("hola"); }  
  4. sayHi();  //"hi"  
  5. sayHi.alternate();  //"hola"  
  6.   
  7. 关键字this总是指向调用该方法的对象，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用该函数的那个对象。  
  8. var oCar = new Object;  
  9. oCar.color = "red";  
  10. oCar.showColor = function(){   
  11.     alert(this.color);  //"red"，this指向oCar，也可以用alert(oCar.color);  
  12. }  
  13.   
  14. 那为什么要用this呢？因为在实例化对象时，总是不能确定开发者会使用什么样的变量名，使用this，即可在任意多个地方重用同一个函数。如：  
  15. function showColor(){   
  16.     alert(this.color);  //如果不用this关键字引用变量，ECMAScript就会把它看作局部变量或全局变量，找不到就会显示null  
  17. }  
  18.   
  19. var oCar1 = new Object;  
  20. oCar1.color = "red";  
  21. oCar1.showColor = showColor;  
  22.   
  23. var oCar2 = new Object;  
  24. oCar2.color = "blue";  
  25. oCar2.showColor = showColor;  
  26.   
  27. oCar1.showColor();  //"red"  
  28. oCar2.showColor();  //"blue"  

定义类或对象

[java] 
 
  1. 1. 工厂方式：创建一个返回特定类型的对象的工厂函数  
  2. function createCar(sColor, iDoors, iMpg){  
  3.     var oTempCar = new Object;  
  4.     oTempCar.color = sColor;  
  5.     oTempCar.doors = iDoors;  
  6.     oTempCar.mpg = iMpg;  
  7.     oTempCar.showColor = showColor;  
  8.     return oTempCar;  
  9. }  
  10. function showColor(){   
  11.     alert(this.color);   
  12. };  
  13. var oCar1 = createCar("red", 4, 23);  
  14. var oCar2 = createCar("blue", 3, 25);  
  15.   
  16. 2. 构造函数方式：在构造函数内部无创建对象，而是使用this关键字，在执行第一行代码前先创建一个对象，只有用this才能访问该对象。  
  17. function Car(sColor, iDoors, iMpg){  
  18.     this.color = sColor;  
  19.     this.doors = iDoors;  
  20.     this.mpg = iMpg;  
  21.     this.showColor = showColor;  
  22. }  
  23. var oCar1 = new Car("red", 4, 23);  
  24. var oCar2 = new Car("blue", 3, 25);  
  25.   
  26. 3. 原型方式：利用了对象的prototype属性，使用此方法，还能用instanceof运算符检查给定变量指向的对象的类型  
  27. function Car(){  }  
  28. Car.prototype.color = "red";  
  29. Car.prototype.doors = 4;  
  30. Car.prototype.mpg = 23;  
  31. Car.prototype.drivers = new Array("Mike", "Sue");  
  32. Car.prototype.showColor = showColor;  
  33. var oCar1 = new Car();  
  34. var oCar2 = new Car();  
  35. oCar1.drivers.push("Matt");  //对象会被多个实例共享  
  36. alert(oCar1.drivers);  //"Mike,Sue,Matt"  
  37. alert(oCar2.drivers);  //"Mike,Sue,Matt"   
  38.   
  39. 4. 混合的构造函数/原型方式：用构造函数定义对象的所有非函数属性，用原型方式定义对象的函数属性(方法)，结果是所有的函数都只创建一次，而每个对象都具有自己的对象属性实例。  
  40. function Car(sColor, iDoors, iMpg){  
  41.     this.color = sColor;  
  42.     this.doors = iDoors;  
  43.     this.mpg = iMpg;  
  44.     this.drivers = new array("Mike", "Sue");  
  45. }  
  46. Car.prototype.showColor = function(){  
  47.     alert(this.color);  
  48. }  
  49. var oCar1 = new Car("red", 4, 23);  
  50. var oCar2 = new Car("blue", 3, 25);  
  51. oCar1.drivers.push("Matt");   
  52. alert(oCar1.drivers);  //"Mike,Sue,Matt"  
  53. alert(oCar2.drivers);  //"Mike,Sue"   
  54.   
  55. 5. 动态原型方法：基本想法与混合的构造函数/原型方式相同，在构造函数内定义非函数属性，而函数属性则利用原型方式定义。唯一的区别是赋予对象方法的位置。  
  56. function Car(sColor, iDoors, iMpg){  
  57.     this.color = sColor;  
  58.     this.doors = iDoors;  
  59.     this.mpg = iMpg;  
  60.     this.drivers = new array("Mike", "Sue");  
  61.     if(typeof Car._initialized == "undefined"){  
  62.         Car.prototype.showColor = function(){  //该方法只被创建一次  
  63.             alert(this.color);  
  64.         }  
  65.         Car._initialized = true;  
  66.     }  
  67. }  
  68.   
  69. 6.混合工厂方式：这种方式通常是在不能应用前一种方式时的变通方法，它的目的是创建假构造函数，只返回另一种对象的新实例。代码与工厂函数相似，不同的是使用new运算符，使它看起来像真正的构造函数。  
  70. function Car(sColor, iDoors, iMpg){  
  71.     var oTempCar = new Object;  
  72.     oTempCar.color = sColor;  
  73.     oTempCar.doors = iDoors;  
  74.     oTempCar.mpg = iMpg;  
  75.     oTempCar.showColor = showColor;  
  76.     return oTempCar;  
  77. }  
  78. var car = new Car("red", 4, 23);  
  79.   
  80. 工厂函数方式和构造函数方式以及混合工厂方式都存在函数管理方面的问题，会重复生成函数属性，为每个对象都创建独立的函数版本。  
  81. 目前使用最广泛的是混合的构造函数/原型方式和动态原型方法，不过不要单独使用经典构造函数或原型方式，因为这样会给代码引入问题。  
  82.   
  83. 类实例--StringBuffer类(String的+=效率很低，次数多时会造成性能问题)  
  84. function StringBuffer(){  
  85.     this._strings = new Array;  
  86. }  
  87. StringBuffer.prototype.append = function(str){  
  88.     this._strings.push(str)  
  89. }  
  90. StringBuffer.prototype.toString = function(){  
  91.     return this._strings.join("");  
  92. }  
  93. var buffer = new StringBuffer();  
  94. buffer.append("hello");  
  95. buffer.append("world");  
  96. var result =  buffer.toString();  
  97.   
  98. 创建新方法  
  99. Number.prototype.toHexString = function(){  
  100.     return this.toString(16);  
  101. }  
  102.   
  103. Array.prototype.indexof = function(item){  
  104.     for(var i=0; i<this.length; i++)  
  105.         if(item == this[i])  
  106.             return i;  
  107.     return -1;  
  108. }  
  109.   
  110. Object.prototype.showValue = function(){  //String和Number对象继承自Object，所以也有showValue()方法  
  111.     alert(this.valueOf());  
  112. }  
  113.   
  114. String.prototype.trim = function(){  
  115.     var reExtraSpace = /^\s+(.*?)\s+$/;  
  116.     return this.replace(reExtraSpace, "$1");  
  117. }  
  118.   
  119. 重写义已有方法  
  120. Function.prototype.originalToString = Function.prototype.toString;  
  121. Function.prototype.toString = function(){  
  122.     if(this.originalToString().length > 100)  
  123.         return "Function too long to display.";  
  124.     else  
  125.         return this.originalToString();  
  126. }  

继承

[java] 
 
  1. 本地类和宿主类不能作为基类，这样可以防止公用访问编译过的浏览器级的代码，因为这些代码可以被用于恶意攻击。  
  2. 创建的子类将继承超类的所有属性和方法，包括构造函数及方法的实现，记住所有属性和方法都是公用的，因此子类可直接访问这些方法，子类还可添加超类中没有的新属性和方法，也可以覆盖超类中的属性和方法。  
  3.   
  4. 1. 对象冒充：构造函数使用this关键字给所有属性和方法赋值，因为构造函数只是一个函数，所以可使ClassA的构造函数成为ClassB的方法，然后调用它，ClassB就会收到ClassA的构造函数中定义的属性和方法。支持多重继承。  
  5. function ClassA(acolor){  
  6.     this.color = sColor;  
  7.     this.sayColor = function(){ alert(this.color); }  
  8. }  
  9.   
  10. function ClassB(sColor, sName){  
  11.     this.newMethod = ClassA;  
  12.     this.newMethod(sColor);  //调用ClassA来达到继承的目的  
  13.     delete this.newMethod;  
  14.   
  15.     this.name = sName;  //所有的新属性和新方法都必须在代码行后定义，否则可能会覆盖超类的相关属性和方法  
  16.     this.sayName = function(){ alert(this.name); }  
  17. }  
  18. var objA = new ClassA("red");  
  19. var objB = new ClassB("blue", "Nicholas");  
  20. objA.sayColor();  //"red"  
  21. objB.sayColor();  //"blue"  
  22. objB.sayName();  //"Nicholas"  
  23.   
  24. 2. Function的call()方法：与经典的对象冒充方法最相似的方法，它的第一个对数用作this的对象，其他对象都直接传递给函数自身。如：  
  25. function sayColor(sPrefix, sSuffix){  
  26.     alert(sPrefix + this.color + sSuffix);  
  27. }  
  28. var obj = new Object();  
  29. obj.color = "red";  
  30. sayColor.call(obj, "The Color is ", ", a very nice color indeed.");  
  31. 下面方法实现继承  
  32. function ClassB(sColor, sName){  
  33.     ClassA.call(this, sColor);  //使用Function的call()方法来达到继承的目的  
  34.     this.name = sName;  //所有的新属性和新方法都必须在代码行后定义，否则可能会覆盖超类的相关属性和方法  
  35.     this.sayName = function(){ alert(this.name); }  
  36. }  
  37.   
  38. 3. Function的apply()方法：与经典的对象冒充方法最相似的方法，有两个对数，用作this的对象和要传递给函数的参数的数组，与call()的唯一区别就是参数传递的形式不同。如：  
  39. function sayColor(sPrefix, sSuffix){  
  40.     alert(sPrefix + this.color + sSuffix);  
  41. }  
  42. var obj = new Object();  
  43. obj.color = "red";  
  44. sayColor.apply(obj, new Array("The Color is ", ", a very nice color indeed."));  
  45. 下面方法实现继承  
  46. function ClassB(sColor, sName){  
  47.     ClassA.apply(this, new Array(sColor));  //使用Function的apply()方法来达到继承的目的  
  48.     this.name = sName;  //所有的新属性和新方法都必须在代码行后定义，否则可能会覆盖超类的相关属性和方法  
  49.     this.sayName = function(){ alert(this.name); }  
  50. }  
  51.   
  52. 4. 原型链：prototype对象的任何属性和方法都被传递给那个类的所有实例，不支持多重继承，对ClassB的所有实例，instanceof为ClassA和ClassB都返回true。  
  53. function ClassA(){ }  
  54. ClassA.prototype.color = "red";  
  55. ClassA.prototype.sayColor = function(){  
  56.     alert(this.color);  
  57. }  
  58.   
  59. function ClassB(){ }  
  60. ClassB.prototype = new ClassA();  //必须是无参的构造函数  
  61. ClassB.prototype.name = "Sue";  //子类的所有属性和方法都必须在prototype属性被赋值之后  
  62.   
  63. 5. 混合方式：结合前两者的做优点，用对象冒充继承构造函数的属性，用原型链继承prototype对象的方法。如：  
  64. function ClassA(scolor){  
  65.     this.color = sColor;  
  66. }  
  67. ClassA.prototype.sayColor = function(){ alert(this.color); }  
  68.   
  69. function ClassB(sColor, sName){  
  70.     ClassA.apply(this, new Array(sColor));  
  71.     this.name = sName;    
  72. }  
  73. ClassB.prototype = new ClassA();  
  74. ClassB.prototype.sayName = function(){ alert(this.name); }  
  75.   
  76. 其他继承方式如：zInherit和xbObjects  

二、浏览器对象模型BOM

 BOM主要处理浏览器窗口和框架，描述了与浏览器进行交互的方法和接口，不过通常浏览器特定的JavaScript扩展都被看作BOM的一部分，这些扩展包括：弹出新的浏览器窗口、移动和关闭浏览器窗口以及调整窗口大小、提供Web浏览器详细信息的导航对象、提供装载到浏览器中页面的详细信息的定位对象、提供用户屏幕分辨率详细信息的屏幕对象、对Cookie的支持、IE扩展了BOM，加入了ActiveXObject类，可以通过JavaScript实例化ActiveX对象。由于没有相关的BOM标准，每种浏览器都有自己的BOM实现。

1. 浏览器中的JavaScript

[java] 
 
  1. 首先在在HTML中引入JavaScript标签(可以放在任何位置，通常放在head标签中)  
  2. <script language="JavaScript" type="text/javascript">  //language特性声明要使用的脚本语言，一般默认为JavaScript  
  3.     ...... //type特性声明内嵌代码或要加入的外部文件的mime类型，用type而不用language，以提供更好的XHTML支持  
  4. </script>  
  5. <script language="JavaScript" src=http://www.mamicode.com/"../scripts/external.js"></script>  //src是可选的，声明要加入页面的外部JavaScript文件  
  6.   
  7. 大量的JavaScript代码不应内嵌在HTML文件中，因为只要查看源代码，就可能发现安全漏洞，安全性不高；代码散布于多个页面，代码维护性差；如果多个页面使用同一个文件，使用缓存只需要下载一次，内嵌增加了页面大小，从而增加下载时间。  
  8.   
  9. <script/>标签放在<body/>标签内时，只要脚本所属的那部分页面被载入浏览器，脚本就会被执行。这样在载入整个页面之前也可执行JavaScript代码。  
  10.   
  11. 对旧的浏览器隐藏JavaScript代码的格式，在内嵌代码周围加入HTML注释，这样其他浏览器就不会在屏幕上显示这段代码。如今却不再是必须的，目前大多数Web浏览器都支持JavaScript，而不支持JavaScript的浏览器通常足够聪明，自己就能够忽略它。  
  12. <script type="text/javascript"> <!--    
  13.     ......  
  14. //-->  
  15. </script>  
  16.   
  17. 对于不支持或者禁用JavaScript的浏览器，用<noscript />提供替代的内容，<noscript />可包含任何HTML代码。  
  18. CDATA段用于声明不应被解析为标签的文本，这样就可以使用特殊字符，如<、>、&、"等，而不必使用它们的字符实体<、>，使用CDATA段可以以常规形式编写JavaScript代码。  
  19. <script type="text/javascript">   
  20. //<![CDATA[  
  21.     ......  
  22. //]]>  
  23. </script>  

2. BOM体系结构

[java] 
 
  1. window对象：表示整个浏览器窗口，但不必表示其中包含的内容，此外，还可用于移动或调整它表示的浏览器的大小，或者对它产生其他影响。  
  2. 如果页面使用框架集合，每个框架都由它自己的window对象表示，存放在frames集合中，可用数字或名字对框架进行索引。如：window.frames[0]或window.frames["Frame"]，也可用.frames[0]代替window  
  3. 如果页面上没有框架，window和self就等于，frames集合的长度就为0。  
  4.   
  5. window.moveBy(dx, dy);  //把浏览器窗口相对当前位置水平移动dx个像素，垂直移动dy个像素  
  6. window.moveTo(x, y);  //移动浏览器窗口使它的左上角位于用户屏幕的x、y处  
  7. window.resizeBy(dw, dh);  // 相对于浏览器窗口的当前大小，把它的宽度调整dw个像素，高度调整dh个像素  
  8. window.resizeTo(w, h);  //把窗口的宽度调整为w，高度调整为h，不能使用负数  
  9. IE提供了window.screenLeft 和window.screen对象来判断窗口的位置，但未提供任何判断窗口大小的方法，用document.body.offsetWidth和document.body.offsetHeight属性可以获取视口的大小，但它们不是标准属性。  
  10. Mozilla/Opera/Safari提供window.screenX和window.screenY属性判断窗口的位置，window.innerWidth和window.innerHeight属性来判断视口的大小，window.outerWidth和window.outerHeight属性判断浏览器窗口自身的大小。  
  11.   
  12. window.open();  //打开新窗口，返回window对象。接受4个参数，即要载入新窗口的页面URL、新窗口的名字、特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值。一般只用前三个参数，最后一个参数只有在调用open()方法却不打开新窗口时才有效。  
  13. 如果用已有框架的名字作为open()方法的第二个参数，那么URL所指的页面就会载入该框架，如：window.open("baidu.com", "Frame")，专用的框架名有：_self、_parent、_、_blank。  
  14. 如果框架名无效，将打开新窗口，新窗口的特性由第三个参数决定。可设置的属性有：left、、width、height、resizable、scrollable、toolbar、status、location，以逗号分隔，值为yew或no。忽略将采取默认浏览器的设置。  
  15. 新窗口还有对打开它的窗口的引用，存放在opener属性中，只有新窗口的最高层window对象都有opener属性。  
  16. 如：var newWin = window.open("http://www.baidu.com","_blank","left=50,=50,width=300,height=300,resizable=no,scrollable=no,toolbar=no,status=no,location=no");  
  17. alert(newWin.opener == window);  //"true"  
  18.   
  19. window.close();  //关闭窗口  
  20. window.alert("message");  //弹出一个具有OK按钮的系统消息框，显示指定的文本  
  21. window.confirm("Are you sure?");  //弹出一个具有OK和Cancel按钮的询问对话框，返回一个布尔值  
  22. window.prompt("What‘s your name?", "Default");  //提示用户输入信息，接受两个参数，即要显示给用户的文本和文本框中的默认值，将文本框中的值作为函数值返回  
  23. window.status  //可以使状态栏的文本暂时改变  
  24. window.defaultStatus  //默认的状态栏信息，可在用户离开当前页面前一直改变文本  
  25. window.setTimeout("alert(‘xxx‘)", 1000);  //设置在指定的毫秒数后执行指定的代码，接受2个参数，要执行的代码和等待的毫秒数  
  26. window.clearTimeout("ID");  //取消还未执行的暂停，将暂停ID传递给它  
  27. window.setInterval(function, 1000);  //无限次地每隔指定的时间段重复一次指定的代码，参数同setTimeout()一样  
  28. window.clearInterval("ID");  //取消时间间隔，将间隔ID传递给它  
  29. window.history.go(-1);  //访问浏览器窗口的历史，负数为后退，正数为前进  
  30. window.history.back();  //同上  
  31. window.history.forward();  //同上  
  32. window.history.length  //可以查看历史中的页面数  
[java] 
 
  1. document对象：实际上是window对象的属性，document == window.document为true，是唯一一个既属于BOM又属于DOM的对象  
  2. document.lastModified  //获取最后一次修改页面的日期的字符串表示  
  3. document.referrer  //用于跟踪用户从哪里链接过来的  
  4. document.title  //获取当前页面的标题，可读写  
  5. document.URL  //获取当前页面的URL，可读写  
  6. document.anchors[0]或document.anchors["anchName"] //访问页面中所有的锚  
  7. document.forms[0]或document.forms["formName"]  //访问页面中所有的表单  
  8. document.images[0]或document.images["imgName"]  // 访问页面中所有的图像  
  9. document.links [0]或document.links["linkName"]  //访问页面中所有的链接  
  10. document.applets [0]或document.applets["appletName"]  //访问页面中所有的Applet  
  11. document.embeds [0]或document.embeds["embedName"]  //访问页面中所有的嵌入式对象  
  12. document.write(); 或document.writeln();  //将字符串插入到调用它们的位置  
[java] 
 
  1. location对象：表示载入窗口的URL，也可用window.location引用它  
  2. location.href  //当前载入页面的完整URL，如http://www.somewhere.com/pictures/index.htm  
  3. location.portocol  //URL中使用的协议，即双斜杠之前的部分，如http  
  4. location.host  //服务器的名字，如www.wrox.com  
  5. location.hostname  //通常等于host，有时会省略前面的www  
  6. location.port  //URL声明的请求的端口，默认情况下，大多数URL没有端口信息，如8080  
  7. location.pathname  //URL中主机名后的部分，如/pictures/index.htm  
  8. location.search  //执行GET请求的URL中的问号后的部分，又称查询字符串，如?param=xxxx  
  9. location.hash  //如果URL包含#，返回该符号之后的内容，如#anchor1  
  10. location.assign("http:www.baidu.com");  //同location.href，新地址都会被加到浏览器的历史栈中  
  11. location.replace("http:www.baidu.com");  //同assign()，但新地址不会被加到浏览器的历史栈中，不能通过back和forward访问  
  12. location.reload(true | false);  //重新载入当前页面，为false时从浏览器缓存中重载，为true时从服务器端重载，默认为false  
[java] 
 
  1. navigator对象：包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用，也可用window.navigator引用它  
  2. navigator.appCodeName  //浏览器代码名的字符串表示  
  3. navigator.appName  //官方浏览器名的字符串表示  
  4. navigator.appVersion  //浏览器版本信息的字符串表示  
  5. navigator.cookieEnabled  //如果启用cookie返回true，否则返回false  
  6. navigator.javaEnabled  //如果启用java返回true，否则返回false  
  7. navigator.platform  //浏览器所在计算机平台的字符串表示  
  8. navigator.plugins  //安装在浏览器中的插件数组  
  9. navigator.taintEnabled  //如果启用了数据污点返回true，否则返回false  
  10. navigator.userAgent  //用户代理头的字符串表示  
[java] 
 
  1. 浏览器检测方式：对象/特征检测和user-agent字符串检测  
  2. 对象/特征检测：是一种判断浏览器能力的通用方法，而非目标浏览器的确切型号  
  3. if(document.getElementById){  
  4.     /the method exists, so use it here  
  5. } else {  
  6.     /do something else  
  7. }  
  8.   
  9. user-agent字符串检测：  
  10. IE各个版本典型的userAgent如下(其中，版本号是MSIE之后的数字)：   
  11.   Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)   
  12.   Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)   
  13.   Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)   
  14.   Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)   
  15. Firefox几个版本的userAgent大致如下(其中，版本号是Firefox之后的数字)：   
  16.   Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1   
  17.   Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3   
  18.   Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12    
  19. Opera典型的userAgent如下(其中，版本号是靠近Opera的数字)  
  20.   Opera/9.27 (Windows NT 5.2; U; zh-cn)   
  21.   Opera/8.0 (Macintosh; PPC Mac OS X; U; en)   
  22.   Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0    
  23. Safari典型的userAgent如下(其版本号是Version之后的数字)：  
  24.   Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13   
  25.   Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3   
  26. Chrome的userAgent是(其中，版本号在Chrome之后的数字)  
  27.   Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13    
  28.   Navigator的userAgent是(其中，版本号在Navigator之后的数字)：  
  29.   Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.12) Gecko/20080219 Firefox/2.0.0.12 Navigator/9.0.0.6   
[java] 
 
  1. 以下出自高级JavaScript程序设计detect.js  
  2. var sUserAgent = navigator.userAgent;   
  3. var fAppVersion = parseFloat(navigator.appVersion);   
  4.   
  5. function compareVersions(sVersion1, sVersion2) {   
  6.     var aVersion1 = sVersion1.split(".");   
  7.     var aVersion2 = sVersion2.split(".");   
  8.     if (aVersion1.length > aVersion2.length) {   
  9.         for (var i=0; i < aVersion1.length - aVersion2.length; i++) {   
  10.             aVersion2.push("0");   
  11.         }   
  12.     } else if (aVersion1.length < aVersion2.length) {   
  13.         for (var i=0; i < aVersion2.length - aVersion1.length; i++) {   
  14.         aVersion1.push("0");   
  15.         }   
  16.     }   
  17.     for (var i=0; i < aVersion1.length; i++) {   
  18.         if (aVersion1[i] < aVersion2[i]) {   
  19.             return -1;   
  20.         } else if (aVersion1[i] > aVersion2[i]) {   
  21.             return 1;   
  22.         }   
  23.     }   
  24.     return 0;   
  25. }   
  26. var isOpera = sUserAgent.indexOf("Opera") > -1;   
  27. var isMinOpera4 = isMinOpera5 = isMinOpera6 = isMinOpera7 = isMinOpera7_5 = false;   
  28. if (isOpera) {   
  29.     var fOperaVersion;   
  30.     if(navigator.appName == "Opera") {   
  31.         fOperaVersion = fAppVersion;   
  32.     } else {   
  33.         var reOperaVersion = new RegExp("Opera (//d+//.//d+)");   
  34.         reOperaVersion.test(sUserAgent);   
  35.         fOperaVersion = parseFloat(RegExp["$1"]);   
  36.     }   
  37.     isMinOpera4 = fOperaVersion >= 4;   
  38.     isMinOpera5 = fOperaVersion >= 5;   
  39.     isMinOpera6 = fOperaVersion >= 6;   
  40.     isMinOpera7 = fOperaVersion >= 7;   
  41.     isMinOpera7_5 = fOperaVersion >= 7.5;   
  42. }   
  43. var isKHTML = sUserAgent.indexOf("KHTML") > -1 || sUserAgent.indexOf("Konqueror") > -1 || sUserAgent.indexOf("AppleWebKit") > -1;   
  44. var isMinSafari1 = isMinSafari1_2 = false;   
  45. var isMinKonq2_2 = isMinKonq3 = isMinKonq3_1 = isMinKonq3_2 = false;   
  46. if (isKHTML) {   
  47.     isSafari = sUserAgent.indexOf("AppleWebKit") > -1;   
  48.     isKonq = sUserAgent.indexOf("Konqueror") > -1;   
  49.     if (isSafari) {   
  50.         var reAppleWebKit = new RegExp("AppleWebKit///(//d+(?://.//d*)?)");   
  51.         reAppleWebKit.test(sUserAgent);   
  52.         var fAppleWebKitVersion = parseFloat(RegExp["$1"]);   
  53.         isMinSafari1 = fAppleWebKitVersion >= 85;   
  54.         isMinSafari1_2 = fAppleWebKitVersion >= 124;   
  55.     } else if (isKonq) {   
  56.         var reKonq = new RegExp("Konqueror///(//d+(?://.//d+(?://.//d)?)?)");   
  57.         reKonq.test(sUserAgent);   
  58.         isMinKonq2_2 = compareVersions(RegExp["$1"], "2.2") >= 0;   
  59.         isMinKonq3 = compareVersions(RegExp["$1"], "3.0") >= 0;   
  60.         isMinKonq3_1 = compareVersions(RegExp["$1"], "3.1") >= 0;   
  61.         isMinKonq3_2 = compareVersions(RegExp["$1"], "3.2") >= 0;   
  62.     }   
  63. }   
  64. var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1 && !isOpera;   
  65. var isMinIE4 = isMinIE5 = isMinIE5_5 = isMinIE6 = false;   
  66. if (isIE) {   
  67.     var reIE = new RegExp("MSIE (//d+//.//d+);");   
  68.     reIE.test(sUserAgent);   
  69.     var fIEVersion = parseFloat(RegExp["$1"]);   
  70.     isMinIE4 = fIEVersion >= 4;   
  71.     isMinIE5 = fIEVersion >= 5;   
  72.     isMinIE5_5 = fIEVersion >= 5.5;   
  73.     isMinIE6 = fIEVersion >= 6.0;   
  74. }   
  75. var isMoz = sUserAgent.indexOf("Gecko") > -1   
  76. && !isKHTML;   
  77. var isMinMoz1 = sMinMoz1_4 = isMinMoz1_5 = false;   
  78. if (isMoz) {   
  79.     var reMoz = new RegExp("rv:(//d+//.//d+(?://.//d+)?)");   
  80.     reMoz.test(sUserAgent);   
  81.     isMinMoz1 = compareVersions(RegExp["$1"], "1.0") >= 0;   
  82.     isMinMoz1_4 = compareVersions(RegExp["$1"], "1.4") >= 0;   
  83.     isMinMoz1_5 = compareVersions(RegExp["$1"], "1.5") >= 0;   
  84. }   
  85. var isNS4 = !isIE && !isOpera && !isMoz && !isKHTML && (sUserAgent.indexOf("Mozilla") == 0) && (navigator.appName == "Netscape") && (fAppVersion >= 4.0 && fAppVersion < 5.0);   
  86. var isMinNS4 = isMinNS4_5 = isMinNS4_7 = isMinNS4_8 = false;   
  87. if (isNS4) {   
  88.     isMinNS4 = true;   
  89.     isMinNS4_5 = fAppVersion >= 4.5;   
  90.     isMinNS4_7 = fAppVersion >= 4.7;   
  91.     isMinNS4_8 = fAppVersion >= 4.8;   
  92. }   
  93. var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");   
  94. var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh");   
  95. var isUnix = (navigator.platform == "X11") && !isWin && !isMac;   
  96. var isWin95 = isWin98 = isWinNT4 = isWin2K = isWinME = isWinXP = false;   
  97. var isMac68K = isMacPPC = false;   
  98. var isSunOS = isMinSunOS4 = isMinSunOS5 = isMinSunOS5_5 = false;   
  99. if (isWin) {   
  100.     isWin95 = sUserAgent.indexOf("Win95") > -1 || sUserAgent.indexOf("Windows 95") > -1;   
  101.     isWin98 = sUserAgent.indexOf("Win98") > -1 || sUserAgent.indexOf("Windows 98") > -1;   
  102.     isWinME = sUserAgent.indexOf("Win 9x 4.90") > -1 || sUserAgent.indexOf("Windows ME") > -1;   
  103.     isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1;   
  104.     isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;   
  105.     isWinNT4 = sUserAgent.indexOf("WinNT") > -1 || sUserAgent.indexOf("Windows NT") > -1 || sUserAgent.indexOf("WinNT4.0") > -1   
  106.     || sUserAgent.indexOf("Windows NT 4.0") > -1 && (!isWinME && !isWin2K && !isWinXP);   
  107. }   
  108. if (isMac) {   
  109.     isMac68K = sUserAgent.indexOf("Mac_68000") > -1 || sUserAgent.indexOf("68K") > -1;   
  110.     isMacPPC = sUserAgent.indexOf("Mac_PowerPC") > -1 || sUserAgent.indexOf("PPC") > -1;   
  111. }   
  112. if (isUnix) {   
  113.     isSunOS = sUserAgent.indexOf("SunOS") > -1;   
  114.     if (isSunOS) {   
  115.     var reSunOS = new RegExp("SunOS (//d+//.//d+(?://.//d+)?)");   
  116.     reSunOS.test(sUserAgent);   
  117.     isMinSunOS4 = compareVersions(RegExp["$1"], "4.0") >= 0;   
  118.     isMinSunOS5 = compareVersions(RegExp["$1"], "5.0") >= 0;   
  119.     isMinSunOS5_5 = compareVersions(RegExp["$1"], "5.5") >= 0;   
  120. }   
[java] 
 
  1. screen对象：用于获取某些关于用户屏幕的信息，也可用window.screen引用它  
  2. screen.width/height  //屏幕的宽度与高度，以像素计  
  3. screen.availWidth/availHeight  //窗口可以使用的屏幕的宽度和高度，以像素计  
  4. screen.colorDepth  //用户表示颜色的位数，大多数系统采用32位  
  5.     window.moveTo(0, 0);  
  6.     window.resizeTo(screen.availWidth, screen.availHeight);  //填充用户的屏幕  

三、文档对象模型DOM

文档对象模型DOM是HTML和XML的应用程序接口（API），DOM把整个页面规划面由节点层级构成的文档，HTML或XML页面的每个部分都是一个节点的衍生物。DOM通过创建树来表示文档，描述了处理网页内容的方法和接口，从而使开发者对文档的内容和结构具有空前的控制力，用DOM API可以轻松地删除、添加和替换节点。

1. 访问节点

[java] 
 
  1. var oHtml = document.documentElement;  //返回存在于 XML 以及 HTML 文档中的文档根节点，oHtml包含了一个表示<html />的HTMLElement对象  
  2. var oHead = oHtml.firstChild | oHtml.childNodes[0] | oHtml.childNodes.item(0);  
  3. var oBody = oHtml.lastChild | oHtml.childNodes[1] | oHtml.childNodes.item(1);  
  4. document.body  //是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问  
  5. document.getElementById("ID");  //通过指定的 ID 来返回元素，getElementById() 无法工作在 XML 中，IE6还会返回name为指定ID的元素  
  6. document.getElementByName("name");  //获取所有name特性等于指定值的元素，不过在IE6和Opera7.5上还会返回id为给定名称的元素且仅检查<input/>和<img/>元素  
  7. var x=document.getElementsByTagName("p");  //使用指定的标签名返回所有的元素列表NodeList，索引号从0开始。当参数是一个星号的时候，IE6并不返回所有的元素，必须用document.all来替代它  
  8. for (var i=0;i<x.length;i++) {   
  9.     // do something with each paragraph  
  10. }  

2. Node节点的特性和方法

[java] 
 
  1. nodeName  //String，节点的名字，根据节点的类型而定义  
  2. nodeValue  //String，节点的值，根据节点的类型而定义  
  3. nodeType  //Number，节点的类型常量值之一  
  4.     在IE中，不支持noteType常量，但可以通过定义匹配节点类型的常量来纠正这种情况。如：  
  5.     if(typeof Node == "undefined"){  
  6.         var Node = {  
  7.             ELEMENT_NODE: 1,  //元素  
  8.             ATTRIBUTE_NODE: 2,  //属性  
  9.             TEXT_NODE: 3,  //文本  
  10.             CDATA_SECTION_NODE: 4,  //CDATA段  
  11.             ENTITY_REFERENCE_NODE: 5,  //DTD中实体的引用  
  12.             ENTITY_NODE: 6,  //DTD中的一个实体  
  13.             PROCESSING_INSTRUCTION_NODE: 7,  
  14.             COMMENT_NODE: 8,  //注释  
  15.             DOCUMENT_NODE: 9,  //文档  
  16.             DOCUMENT_TYPE_NODE: 10,  //DTD引用，如<! DOCTYPE..>  
  17.             DOCUMENT_FRAGMENT_NODE: 11,  //文档碎片  
  18.             NOTATION_NODE: 12  //DTD中定义的记号  
  19.         }  
  20.     }  
  21. ownerDocument  //Document，指向这个节点所属的文档  
  22. firstChild  //Node，指向在childNodes列表中的第一个节点  
  23. lastChild  //Node，指向在childNodes列表中的最后一个节点  
  24. parentNode  //Node，指向父节点  
  25. childNodes  //NodeList，所有子节点的列表  
  26. previousSibling  /Node，/指向前一个兄弟节点：如果这个节点就是第一个节点，那么该值为null  
  27. nextSibling  //Node，指向后一个兄弟节点：如果这个节点就是最后一个节点，那么该值为null  
  28. hasChildNodes()  //Boolean，当childNodes包含一个或多个节点时，返回真  
  29. attributes  //NamedNodeMap，包含了代表一个元素的特性的Attr对象；仅用于Element节点  
  30.     length  //指示它所包含的节点的数量  
  31.     getNamedItem(name)  //返回nodeName属性值等于name的节点  
  32.     removeNamedItem(name)  //删除nodeName属性值等于name的节点  
  33.     setNamedItem(node)  //将node添加到列表中，按其nodeName属性进行索引  
  34.     item(pos)  //像NodeList一样，返回在位置pos的节点  
  35.     getAttribute(name) == attributes.getNamedItem(name).value == attributes.item[0].nodeValue  
  36.     setAttribute(name, newValue) == attributes.getNamedItem(name).value = newValue  
  37.     removeAttribute(name) == attributes.removeNamedItem(name)  
  38.     核心DOM的oImg.getAttribute("src")等价于HTML DOM的oImg.src(在IE在最好使用这种方式)，class属性会有点不同，分别对应class和className  
  39. appendChild(node)  //Node，将node添加到childNodes的末尾  
  40. removeChild(node)  //Node，从childNodes中删除node  
  41. replaceChild(newNode, oldNode)  //Node，将childNodes中的oldNode替换成newNode  
  42. insertBefore(newNode, refNode)  //Node，在childNodes中的refNode之前插入newNode  

3. 创建和操作节点

[java] 
 
  1. document.createAttribute(name)  //用指定名称name创建特性节点  
  2. document.createCDATASection(text)  //用包含文本text的文本子节点创建一个CDATA Section  
  3. document.createComment(text)  //创建包含文本text的注释节点  
  4. document.createEntityReference(name)  //创建给定名称的实体引用节点  
  5. document.createProcessingInstruction(target, data)  //创建包含给定target和data的PI节点  
  6. document.createDocuemntFragment()  //创建文档碎片节点，常用且所有浏览器支持。  
  7. document.createElement(tagName)  //创建标签名为tagName的元素，常用且所有浏览器支持。  
  8. document.createTextNode(text)  //创建包含文本text的文本节点，常用且所有浏览器支持。  
  9. 举例：  
  10. var arrText = ["first","second","third","fourth","fifth","sixth","seventh"];  
  11. var oFragment = document.createDocumentFragment();  
  12. for(var i=0; i<arrText.length; i++){  
  13.     var oP = document.createElement("p");  
  14.     var oText = document.createTextNode("Hello World");  
  15.     oP.appendChild(oText);  
  16.     oFragment.appendChild(oP);  //使用碎片将减少屏幕刷新，不然将调用n次document.body.appendChild，页面刷新n次  
  17. }  
  18. document.body.appendChild(oFragment);  
  19. document.body.removeChild(oP);   

4. HTML DOM的table特性和方法

[java] 
 
  1. 给<table />元素添加了以下内容：  
  2. caption  //指向<caption />元素(如果存在)  
  3. tBodies  //<tdody/>元素的集合  
  4. tFoot  //指向<tfoot/>元素(如果存在)  
  5. tHead  //指向<thead/>元素(如果存在)  
  6. rows  //表格中所有行的集合  
  7. createTHead()/deleteTHead()  //创建和删除<thead />元素并将其放入表格  
  8. createTFoot()/deleteTFoot()  //创建和删除<tfoot />元素并将其放入表格  
  9. createCaption()/deleteCaption()  //创建和删除<caption />元素并将其放入表格  
  10. insertRow(pos)/deleteRow(pos)  //在rows集合中的指定位置上插入一个新行和删除指定位置上的行  
  11.   
  12. 给<body />元素添加了以下内容：  
  13. rows  //<tbody />中所有行的集合  
  14. insertRow(pos)/deleteRow(pos)  //在rows集合中的指定位置上插入一个新行和删除指定位置上的行  
  15.   
  16. 给<tr />元素添加了以下内容：  
  17. cells  //<tr />元素中所有单元格的集合  
  18. insertCell(pos)/deleteCell(pos)  //在cells集合中的指定位置上插入一个新单元格和删除指定位置上的单元格  
  19.   
  20. 举例：  
  21. var oTable = document.createElement("table");  
  22. oTable.setAttribute("border","1");  
  23. oTable.setAttribute("width","100%");  
  24. var oTBody = document.createElement("tbody");  
  25. oTable.appendChild(oTBody);  
  26. oTBody.insertRow(0);  
  27. oTBody.rows[0].insertCell(0);  
  28. oTBody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1"));  
  29. oTBody.rows[0].insertCell(1);  
  30. oTBody.rows[0].cells[1].appendChild(document.createTextNode("cell 2,1"));  
  31. oTBody.insertRow(1);  
  32. oTBody.rows[1].insertCell(0);  
  33. oTBody.rows[1].cells[0].appendChild(document.createTextNode("cell 1,2"));  
  34. oTBody.rows[1].insertCell(1);  
  35. oTBody.rows[1].cells[1].appendChild(document.createTextNode("cell 2,2"));  
  36. document.body.appendChild(oTable);  

5. DOM事件

[java] 
 
  1. DOM同时两种事件模型：冒泡型事件和捕获型事件  
  2. 冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标的顺序触发  
  3. <body onclick="handleClick()">  
  4.     <div onclick="handleClick()">Click Me</div>  
  5. </body>  
  6. 触发的顺序是：div、body、html(IE 6.0和Mozilla 1.0)、document、window(Mozilla 1.0)  
  7.   
  8. 捕获型事件：与冒泡事件相反的过程，事件从最不精确的对象开始触发，然后到最精确  
  9. 上面例子触发的顺序是：document、div  
  10. DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。   
[java] 
 
  1. 事件处理函数/监听函数  
  2. 在JavaScript中：  
  3. var oDiv = document.getElementById("div1");  
  4. oDiv.onclick = function(){  //onclick只能用小写，默认为冒泡型事件  
  5.     alert("Clicked!");  
  6. }  
  7. 在HTML中：  
  8. <div onclick="javascript: alert("Clicked!")"></div>  //onclick大小写任意  
[java] 
 
  1. 在IE中，每个元素和window对象都有两个方法：attachEvent()和detachEvent()，如：  
  2. [object].attachEvent("name_of_event_handler","function_to_attach")  
  3. [object].detachEvent("name_of_event_handler","function_to_remove")  
  4. var fnClick = function(){  
  5.     alert("Clicked!");  
  6. }  
  7. oDiv.attachEvent("onclick", fnClick);  //添加事件处理函数  
  8. oDiv.attachEvent("onclick", fnClickAnother);  // 可以添加多个事件处理函数  
  9. oDiv.detachEvent("onclick", fnClick);  //移除事件处理函数  
[java] 
 
  1. 在DOM中，addEventListener()和removeEventListener()用来分配和移除事件处理函数，与IE不同的是，这些方法需要三个参数：事件名称，要分配的函数和处理函数是用于冒泡阶段(false)还是捕获阶段(true)，默认为冒泡阶段false  
  2. [object].addEventListener("name_of_event",fnhander,bcapture)  
  3. [object].removeEventListener("name_of_event",fnhander,bcapture)  
  4. var fnClick = function(){  
  5.     alert("Clicked!");  
  6. }  
  7. oDiv.addEventListener("onclick", fnClick, false);  //添加事件处理函数  
  8. oDiv.addEventListener("onclick", fnClickAnother, false);  // 与IE一样，可以添加多个事件处理函数  
  9. oDiv.removeEventListener("onclick", fnClick, false);  //移除事件处理函数  
  10. 如果使用addEventListener()将事件处理函数加入到捕获阶段，则必须在removeEventListener()中指明是捕获阶段，才能正确地将这个事件处理函数删除  
  11. oDiv.onclick = fnClick;  
  12. oDiv.onclick = fnClickAnother;  //使用直接赋值，后续的事件处理函数会覆盖前面的处理函数  
  13. oDiv.onclick = fnClick;    
  14. oDiv.addEventListener("onclick", fnClickAnother, false);  //会按顺序进行调用，不会覆盖  
[java] 
 
  1. 事件类型  
  2. 鼠标事件：click、dbclick、mousedown、mouseup、mouseover、mouseout、mousemove  
  3. 键盘事件：keydown、keypress、keyup  
  4. HTML事件：load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur  
[java] 
 
  1. 事件对象，包括引起事件的对象、事件发生时鼠标的信息、事件发生时键盘的信息  
  2. 相似性  
  3. oEvent.type  //可以在任何一种浏览器中获取事件的类型，如：click、mouseover  
  4. oEvent.keyCode  //在keydown和keyup事件中获取按下的按键的数值代码，如：回车为13，空格为32，回退为8  
  5. oEvent.button  //0为未按下按钮，1为左键，2为右键，3为左右键，4为中键，5为左中键，6为右中键，7为左中右键  
  6. oEvent.shiftKey  //Shift键  
  7. oEvent.altKey  //Alt键  
  8. oEvent.ctrlKey  //Ctrl键  
  9. oEvent.X/oEvent.Y  //在鼠标事件中，获取鼠标指针在客户端的区域的位置，不含工具栏和滚动条等  
  10. oEvent.screenX/oEvent.screenY  //在鼠标事件中，获取鼠标指针在计算机屏幕的位置  
  11. DOM中还有charCode、bubbles(事件是否正在冒泡阶段中)、currentTarget、relatedTarget、detail(鼠标点击次数)、eventPhase(0捕获1在目标上2冒泡)、calcelable(事件能否取消)、isChar、meatKey(META键)、pageX(鼠标相对于页面的xy坐标)、pageY、timeStamp(事件发生时间)、preventDefault()、sPropagation()、target等IE中没有的属性和方法。  
  12. IE中还有returnValue、fromElement、toElement、calcelBubble、srcElement、offsetX(鼠标相对于引起事件对象的xy坐标)、offsetY、repeat(不触发keydown事件时为true)等DOM中没有的属性和方法。  
[java] 
 
  1. 区别  
  2. a. 事件对象的定位  
  3. 在IE中，事件对象是windows对象的一个属性event，事件处理函数必须这样访问事件对象：  
  4. oDiv.onclick = function(){  
  5.     var oEvent = window.event;  
  6. }  
  7. 在DOM中，event对象必须作为唯一的参数传递给事件处理函数,所以要这么做：  
  8. oDiv.onclick = function(){  
  9.     var oEvent = argunments[0];  //在arguments属性，在event对象中总是事件处理函数的第一个参数  
  10. }  
  11. 或者 oDiv.onclick = function(oEvent){ ... }  
  12. 所以要用不同的方法来获取event对象,所以我们经常见到这种写法：var e =  event || window.event  
  13. b. 获取事件源  
  14. 在IE中，目标包含在event对象的srcElement属性中：  
  15.     var oTarget = oEvent.srcElement;  
  16. 在DOM中，目标包含在target属性中：  
  17.     var oTarget = oEvent.target;  
  18. IE目标只能是元素、文档或者窗口；DOM兼容的浏览器也允许把文本节点作为目标  
  19. c. 获取字符代码  
  20. IE和DOM都支持event对象的keyCode属性，它会返回按下按键的数值代码  
  21. 在IE中：var oCharCode = oEvent.keyCode;  
  22. 在DOM中：var oCharCode = oEvent.charCode;  
  23. d. 阻止默认行为  
  24. function someHandle(event) {   
  25.     var event = event || window.event;   
  26.     if(event.preventDefault)  
  27.         event.preventDefault();  //DOM  
  28.     else   
  29.         event.returnValue = false;  //IE  
  30. }  
  31. e. 停止事件冒泡  
  32. function someHandle(event){   
  33. var event = event || window.event;   
  34.     if(event.sPropagation)  
  35.         event.sPropagation();  //DOM  
  36.     else   
  37.         event.cancelBubble = true; //IE  
  38. }  
[java] 
 
  1. 跨平台的事件对象  
  2. var EventUtil = new Object;  
  3. EventUtil.addEventHandler = function(element, evtName, callback, useCapture) {   
  4.     if (element.addEventListener)  
  5.         element.addEventListener(evtName, callback, useCapture); //DOM  
  6.     else if(element.attachEvent)  
  7.         element.attachEvent("on" + evtName, callback); //IE  
  8.     else  
  9.         element["on" + evtName] = callback;  
  10. }  
  11. EventUtil.removeEventHandler = function(element, evtName, callback, useCapture) {   
  12.     if (element.removeEventListener)  
  13.         element.removeEventListener(evtName, callback, useCapture); //DOM  
  14.     else if(element.attachEvent)  
  15.         element.dettachEvent(‘on‘ + evtName, callback); //IE  
  16.     else  
  17.         element["on" + evtName] = null;  
  18. }  
  19. EventUtil.formatEvent = function(oEvent){  
  20.     if(isIE && isWin){  
  21.         oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;  
  22.         oEvent.eventPhase = 2; //IE仅支持2冒泡事件  
  23.         oEvent.isChar = (oEvent.charCode > 0);  
  24.         oEvent.pageX = oEvent.clientX + document.body.scrollLeft;  
  25.         oEvent.pageY = oEvent.clientY + document.body.scroll;  
  26.         oEvent.preventDefault = function(){ this.returnValue = false; }  
  27.         if(oEvent.type == "mouseout")  
  28.             oEvent.relatedTarget = oEvent.toElement;  
  29.         else if(oEvent.type == "mouseover")  
  30.             oEvent.relatedTarget = oEvent.fromElement;  
  31.         oEvent.sPropagation = function(){ this.cancelBubble = true; }  
  32.         oEvent.target = oEvent.srcElement;  
  33.         oEvent.timestamp = (new Date()).getTime();  
  34.     }  
  35.     retrun oEvent;  
  36. }  
  37. EventUtil.getEvent = function(){  
  38.     if(window.event)  
  39.         return this.formatEvent(window.event);  
  40.     else  
  41.         return EventUtil.getEvent.caller.arguments[0]; //指向DOM中调用getEvent的函数中的event对象  
  42. }  
  43. oDiv.onclick = function(){  
  44.     var oEvent = EventUtil.getEvent;  
  45.     ...  
  46. }  
6. 样式编程 - style对象
[java] 
 
  1. var oDiv = document.getElementById("div1");  
  2. oDiv.style.border = "1px solid black";  
  3. 在style对象中，两个单词的样式的表示方式是通过将第一个单词加上首字母大写的第二单词，且单词间没有横线一表示的，如：background-color就写作style.backgroundColor  
  4. style对象还包含cssText特性，包含了所有描述样式的CSS字符串，如：  
  5.     oDiv.style.cssText = "width:400px; height:300px;";  
  6. 在DOM中，还描述了一些样式对象的方法，以达到与单独的CSS样式的定义部分进行交互的目的，这些属性在IE中不支持  
  7.     getPropertyValue(propertyName)  //返回CSS特性propertyName的字符串值，如：background-color  
  8.     getPropertyPriority()  //如果在规则中指定CSS特性"important"，则返回"important"，否则返回空字符串  
  9.     item(index)  //返回指定索引index处的CSS特性名称，如：background-color  
  10.     removeProperty(propertyName)  //从CSS定义中删除propertyName  
  11.     setProperty(propertyName, value, priority)  //按照指定的优先级来设置CSS特性propertyName的value值  
[java] 
 
  1. style对象可以方便地获取某个有style特性的元素的CSS样式，但是无法表示由CSS规则或者在style特性外部定义的类定义的元素的CSS样式，这时可以通过document.styleSheets来实现，这个集合包含了HTML页面中所有样式表的引用和所有的<style />元素，有以下特性：  
  2.     disabled  //表示样式表是否被禁用  
  3.     href  //用于外部引用文件样式表的URL，对于<style />元素返回null，不过Mozilla返回当前页面的URL  
  4.     media  //可以使用该样式表的媒体类型，由HTML的media特性指定  
  5.     ownerNode  //指定样式表的DOM节点(<link />或者<style />元素)，IE不运行这个特性  
  6.     parentStyleSheet  //如果样式表是通过CSS的@import语句来加载的，将指出出现@import语句的样式表  
  7.     title  //通过HTML title特性分配给样式表的标题，可用在(<link />或者<style />上  
  8.     type  //样式表的mime类型，对于CSS通常是text/css  
  9. 在IE中有一个currentStyle对象，包含了所有元素的style对象的特性和任何未被覆盖的CSS规则的style特性，与style对象的使用方式、特性和方法都完全一样。如：  
  10.     alert(oDiv.currentStyle.backgroundColor);  
  11. DOM提供一个getComputedStyle()方法，根据给定的元素创建类似style对象。如：  
  12.     alert(document.defaultView.getComputedStyle(oDiv, null).backgroundColor);  
[java] 
 
  1. innerText: 表示起始标签和结束标签之间的文本  
  2. innerHTML: 表示元素的所有元素和文本的HTML代码  
  3. 如：<div><b>Hello</b> world</div>的innerText为Hello world，innerHTML为<b>Hello</b> world  
  4. outerText: 与前者的区别是替换的是整个目标节点，问题返回和innerText一样的内容  
  5. outerHTML: 与前者的区别是替换的是整个目标节点，返回元素完整的HTML代码，包括元素本身  
  6. 如：<div><b>Hello</b> world</div>的outerText为Hello world，outerHTML为<div><b>Hello</b> world</div>

转至：http://blog.csdn.net/zzq58157383/article/details/8687326

JS总览


联系
我们