JavaScript学习笔记+常用js用法、范例（一）

Java Script 基础

一、 JS的简介

JavaScript是一种网页编程技术，经常用于创建动态交互网页 JavaScript是一种基于对象和事件驱动的解释性脚本语言，类似C语言和Java的语法 事先不编译；逐行执行；无需进行严格的变量声明；内置大量现成对象，编写少量程序可以完成目标 不同的浏览器甚至同一浏览器的不同版本对JavaScript的支持程度都不一样

二、 JS的基本语法

0. 有两种JavaScript写法：

a. 直接在 html 中嵌入，程序写法:

<script type="text/javascript" language="JavaScript" charset="UTF-8">
<!--
...javaScript程序...
// -->
</script>

b. 调用独立JavaScript文件：在html中写 <script type="text/javascript" src="test1.js"> </script>

<script> 不能用空标志。 JS脚本文件中不需要脚本开始和结束声明，直接写 function

1. 在HTML中大小写是不敏感的，但标准的JavaScript是区分大小写的

2. 分号表示语句结束。有换行，分号允许不加(建议加上，以免错误和歧义)

程序忽略缩进：提倡加上空格或TAB增强程序可读性

3. 标识符：成份是 不以数字开头的字母、数字 和下划线(_)、美元符($)

ECMA v3标准保留的JavaScript的关键字：

break case catch continue default delete do else false finally
for function if in instanceof new null return switch this
throw true try typeof var void while with

4. 变量的声明： var x,y; (变量没类型；未声明的变量也可以用，且是全局的；函数体内声明的变量则是局部的)

x=1; y="hello world!"; (变量的类型由所赋的值决定)

5. 函数： function 函数名 (参数){ 函数体; return 返回值;}

参数没类型或顺序，且可变长；可以使用变量、常量或表达式作为函数调用的参数 声明函数时，参数可不明写，调用时用 arguments[number] 接收。参数是值传递的。 函数由关键字 function 定义； 函数名的定义规则与标识符一致，大小写是敏感的 返回任意类型(不需写返回类型)； 返回值必须使用return //参数数量是可变的,若要限定参数数量,如下做法: (指定参数数量为0)

```python
if ( arguments.length !== 0 ) throw Error.parameterCount();
caller: 调用此函数的函数。没有被调用则此变量为 null
arguments: 此函数的参数列表。
arguments.caller: 调用此函数的参数列表,没有被调用则为 undefined
arguments.callee: 此函数本身的一个引用。在匿名函数里会需要用到。
```

6. 数据类型：

基本类型: Number：数字、 String：字符串、 Boolean：布尔 特殊类型: Null：空、 Undefined：未定义 组合类型: Array：数组、 Object：对象

7. Number 数值类型：所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式

能表示的最大值是 ±1.7976931348623157 x 10^308；能表示的最小值是 ±5 x 10^ -324 10进制的整数的精确表达的范围是 -9007199254740992 (-2^53) 到 9007199254740992 (2^53) 16进制数据前面加上0x，八进制前面加0 保留多少位小数： var a = 111.115555; var b = a.toFixed(2); alert(b + ‘ : ‘ + typeof b); // 111.12 : string

8. String 类型：字符串常量首尾由单引号或双引号括起

没有字符，只有字符串(所有字符都按字符串处理) 常用转义符： \n换行 '单引号 "双引号 \右斜杆 (字符串中部分特殊字符必须加上右划线) 汉字常使用特殊字符写，如： \u4f60 –>”你” \u597d –>”好” (可避免乱码)

9. Boolean 类型：仅有两个值：true和false，实际运算中true=1,false=0

也可以看作on/off、yes/no、1/0对应true/false；主要用于JavaScript的控制语句

10.null, undefine 类型：

null 在程序中代表变量没有值；或者不是一个对象 undefined 代表变量的值尚未指定；或者对象属性根本不存在 有趣的比较： null 与空字符串: 不相等, null 代表什么也没有，空字符串则代表一个为空的字符串 null 与 false : 不相等, 但是 !null 等于 true null 与 0 : 不相等，(但是在C++等其它语言中是相等的) null 与 undefined : 相等，但是 null 与 undefined 并不相同

11.数据类型转换：JavaScript属于松散类型的程序语言

变量在声明的时候并不需要指定数据类型；变量只有在赋值的时候才会确定数据类型 表达式中包含不同类型数据则在计算过程中会强制进行类别转换(优先级：布尔–>数字–>字符) 数字 + 字符串：数字转换为字符串 数字 + 布尔值：true转换为1，false转换为0 字符串 + 布尔值：布尔值转换为字符串true或false 函数 parseInt: 强制转换成整数(如果包含字符串，则转换到字符串为止，后面不再理) //如 parseInt(“13a2”)=13 函数 parseFloat: 强制转换成浮点数 函数 eval: 将字符串强制转换为表达式并返回结果，亦可将字节或变量转成数值。 函数 typeof: 查询数据当前类型(string / number / boolean / object ) ，未定义则返回“undefined”

12.运算符：(同java)

算术运算符: 加/字符连接(+)、 减/负号(-)、 乘(*) 、除(/)、 余数(% )； 递增(++)、 递减(–) 逻辑运算符: 等于( == )、 不等于( != ) 、 大于( > ) 、 小于( < ) ； 大于等于(>=) 、小于等于(<=) 与(&&) 、或(||) 、非(!) ； 恒等(===)、不恒等(!==) 位运算符: 左移(<<) 、有符号右移(>>)；无符号右移(>>>) 位与(&) 、位或(|)、异或(^) 、NOT (~) 赋值运算符: 赋值(=) 、复合赋值(+= -= *= /= %= &= ) (先运行完右边的，再跟左边的进行赋值运算；如 var i=10;i-=5-3;结果8)

13.选择控制语句(同java)

if(…){…} else{…} if 语句允许不使用else子句；允许进行嵌套 switch(表达式){case 值1:语句1;break; case 值2:语句2;break; default:语句3;}

14.循环控制语句(类似java)

for (初始化;条件;增量){ 语句1; … } for-each遍历: for(var key in objs){var element=objs[key];…} // 注意: in 前面的是 key,而不是下标或者集合里面的元素,获取集合里的元素要使用 集合[key] while (条件){ 语句1; … } do{语句1; …}while(条件); break, continue 跳出循环；还可配合标签使用

15.对象：JavaScript是一种基于对象语言，对象是JavaScript中最重要的元素

对象由属性和方法封装而成 javaScript包含四种对象: 内置对象 Date 自定义对象 Cart 浏览器对象 window ActiveX对象 ActionXObject

16. 异常处理：

try{ ... } catch( e ) { ... } finally { ... }
try{ throw new Error("Err0"); } catch( e ) { alert(e.description); } finally { ... }
try{ throw "Err1"; } catch( e ) { if(e == "Err1") alert("错误！"); }
try{ ... } catch( e ) { alert(e.message || e.description); } // 查看出错提示

17.选取页面的对象:

var obj = document.forms["FormName"].elements["elementName"];
var obj = document.forms[x].elements[y]; //x和y 是int类型，表示第几个表单，第几个元素
var obj = document.FormName.elementName;
var obj = document.all["elementName"];
var obj = document.all["elementID"];
var obj = document.getElementById("elementID");
var obj = document.getElementsByName("elementName"); //返回数组
var obj = document.getElementsByTagName("TagName"); //返回数组

18. typeof 查看类型:

undefined, null, boolean, number, string, object, function 也就是 typeof 返回的值只能是上面的其中一个(字符串类型)。 注意:以上单词都是小写，不要与内置对象 Number, String, Object, Function 等混淆。 null: typeof(null) 返回 “object”, 但null并非object, 具有 null 值的变量也并非object。未定义的返回”undefined” number: typeof(NaN) 和 typeof(Infinity) 都返回 number; NaN参与任何数值的计算结果都是NaN,且 NaN != NaN, Infinity / Infinity = NaN

19.instanceof 判断类型:

instanceof 返回一个 boolean 值, 指出对象是否是特定类的一个实例, 实际上就是检测实例是否有继承某类的原型链。 对于 Array, null 等特殊对象 typeof 一律返回 object，这正是 typeof 的局限性。 instanceof 用于判断一个变量是否某个对象的实例,或者子类,如: var a=new Array();alert(a instanceof Array);会返回 true, 而 alert(a instanceof Object)也会返回 true 再如: function test(){};var a=new test();alert(a instanceof test)返回 true, alert(test instanceof Function)返回 true, 但 alert(a instanceof Function)返回 false(不明白什么原因) 注意: function 的 arguments, 使用(arguments instanceof Array)返回 false,尽管看起来很像。 另外: (window instanceof Object)返回 false, 这里的 instanceof 测试的 Object 是指js中的对象,不是dom模型对象。而 typeof(window) 会得 “object”

20.in 用法:

通常使用在 for 循环中,作 foreach 用,像 for(var i in obj)… 也可以用在类中,判断类里面是否有此 key。但注意不能有效用在数组中。 如: var ar = {a:false, b:2}; alert(‘a’ in ar)返回 true;因为 ar[‘a’] 存在。 在数组中使用时,如: var arr=[4,5,6]; alert(2 in arr)会返回 true,因为 arr[2] 存在。而 alert(5 in arr)会返回 false,arr[5] 不存在。 if (key in obj) 相当于 if(!!obj[key])。 数组中也可以使用 for, in,如: var array = ['a', 'b', 'c', 'd'];for(var item in array){alert(array[item]);} 值得注意的是,如果对类进行 .prototype.函数 来扩展, for in 时会受到影响,把扩展的内容也循环出来。 所以不赞成对 Object 类进行扩展,也不赞成数组使用 for in(因为数组有可能被扩展了)

21.闭包(closure)

是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数)，因而这些变量也是该表达式的一部分。

1) 变量的作用域

函数内部可以直接读取全局变量。(函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！) 在函数外部无法读取函数内的局部变量。 链式作用域(chain scope):子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

2) 闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成”定义在一个函数内部的函数”。 所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

3) 闭包的最大用处有两个:

一个是可以读取函数内部的变量，另一个就是避免外部修改这些变量的值。

4) 注意:

闭包使得函数中的变量都被保存在内存中，内存消耗很大，不能滥用，否则影响性能，可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象(object)使用，把闭包当作它的公用方法(Public Method)，把内部变量当作它的私有属性(private value)，这时一定要小心，不要随便改变父函数内部变量的值。

22.比较运算

1)“==” 与 “===” 的区别
“==” 双等号, 用于比较时会忽略类型, 字符串可以与数字相等, null 与 undefined 相等
“===” 三等号, 用于比较时严格区分类型,类型不相同的不会认为相等
同理还有不等于( “!=” 与 “!==” ),比较规则与上面的一样

示例:
alert( '22' == 22 ); // true
alert( '22' === 22 ); // false
alert( null == undefined ); // true
alert( null === undefined ); // false
alert( 0 == null ); // false, 注: null, undefined 这两者与其它的比较都为false
alert( 1 == true ); // true
alert( 1 === true ); // false
alert( 0 == '' ); // true
alert( 0 === '' ); // false
alert( ' \t\r\n ' == 0 ); // true, 注: 空格、跳格、换行, 都会转成 0 来处理
alert( [10] == 10 ); // true,注: 对象与基本类型比较时，会先把对象转成基本类型。
alert( [10] == '10' ); // true
alert( /\d/ > 0 || /\d/ <= 0 ); // false, 无法转换正则为数字
alert( {} > 0 || {} <= 0 ); // false, 无法转换Object为数字
alert( NaN == NaN ); // false, NaN 与所有值都不相等，包括它自己。
alert( NaN > 0 || NaN <= 0 ); // false, NaN的比较都为false
alert( NaN > NaN || NaN <= NaN ); // false

2) 比较法则(仅忽略类型的比较,不是严格比较,比较运算符有: >, >=, <, <=, ==, !=): 对于基本类型 Boolean, Number, String 三者之间做比较时，总是向 Number进行类型转换，然后再比较(String 类型的如果没法转成数字,则转成 NaN)； 如果有Object，那么将Object转化成这三者，再进行比较(可以转成数字的，优先转成数字,像Date就转成数字)； 对于 null 和 undefined, 只有两个都是它们时才相同，其他都为false。 比较对象、数组和函数时，进行引用比较，只有引用的是相同地址才认为相同，否则即使拥有相同的属性和函数都认为不相同。 如果不能转成数值，或者是NaN，则比较结果为false

三、 JS的内置对象

11种内置对象：Array, Boolean, Date, Math, Number , String Error, Function, Global , Object, RegExp 在JavaScript中除了null和undefined以外其它的数据类型都被定义成了对象 可以用创建对象的方法定义变量； String、Math、Array、Date、RegExp是JavaScript中常用的对象 内置对象的分类： 数据对象: Number数据对象； String字符串对象； Boolean布尔值对象 组合对象: Array数组对象； Math数学对象； Date日期对象 高级对象: Object自定义对象；Error错误对象；Function函数对象； RegExp正则表达式对象；Global全局对象 自动创建对象:调用字符串的对象属性或方法时自动创建对象，用完就丢弃。 如： var str1=”hello world”; 手工创建对象:采用new创建字符串对象str1，全局有效。 如：var str1= new String(“hello word”);

1. String 字符串对象：

格式编排:anchor()锚、blink()闪烁、fixed()固定、bold()粗体、italics()斜体、strike()删除线 big()字变大、small()字变小、sub()下标、sup()上标； fontcolor(color)字体颜色、fontsize(size)字体大小、link(url)超链接 大小写转换: toLowerCase()返回小写字符串、toUpperCase()返回大写字符串 获取指定字符:charAt(index)返回指定位置字符、charCodeAt(index)返回指定位置字符Unicode编码 用法：str1.bold();//字体变粗；相当于“<b>str1</b>“ str1.anchor(); //把str1标识为锚 子字符串处理: 截取:str1.substr(start,length); //返回从索引位置start开始长为length的子字符串 str1.substring(start,end); //返回start开始end结束的子字符串,不包括最后的一个 str1.slice(start,end); //同substring，但允许使用负数表示从后计算位置,不包括最后的一个 替换:str1.replace(findstr,tostr); //返回替换finstr为tostr之后的字符串 分割:str1.split(bystr); //返回由bystr分割成的字符串数组(通常bystr是连接符号，如逗号或横杆) 连接:str1.concat(string2); //返回 str1 与 string2 连接后的字符串 查询字符串: indexOf(findstr,index)返回正向的索引位置、lastIndexOf(findstr)返回反向的索引位置 match(regexp)返回匹配的字符串、search(regexp)返回找到字符串的首字符索引 用法： str1.indexOf(findstr,index);//查找字符串findstr;从index位置开始的索引，省略index则从0开始找;类似下一句 str1.lastIndexOf(findstr); //从后面找起;返回findstr在str1中出现的首字符位置下标，没有找到返回-1 str1.match(regexp); //regexp代表正则表达式或字符串;返回匹配字符串的数组，如果没有匹配则返回null str1.search(regexp); //返回匹配字符串的首字符位置下标;作用同indexOf方法,但可写正则表达式 str1.length; //获取字符串长度；汉字、字母长度均为1；返回大于或等于0的整数

2. Array 数组对象：

1) 创建数组： var a = new Array(); a[0] = “元素1”; a[1] = “元素2”; var a = new Array(){“元素1”, “元素2”}; var a = new Array(“元素1”,”元素2”); //一维数组，效果同上 var a = new Array(); a[0] = new Array(); //二维数组 简略的数组创建方法： var a = [‘元素1’, ‘元素2’]; // 效果等同于: var a = new Array(“元素1”,”元素2”); 2) 删除数组： delete 数组名; 3) 数组操作： arr.length; //获取数组元素的个数；返回大于或等于0的整数 连接数组： (原数组不变) arr.join(bystr); //把数组的各元素由bystr连接起来作为字符串；与字符串的split功能刚好相反 arr.toString(); //返回由逗号(,)连接数组元素组成的字符串 document.write(v.toString());document.write(v); //这两句效果一样 arr2 = arr.concat(元素, …); //把元素添加到数组尾端后，返回另一数组；在参数里填入另一数组，返回合并数组 数组排序： (返回排序后的数组；改变原数组) arr.reverse(); //按原顺序倒着排序 arr.sort(); //按字典顺序排序 获取子数组： (返回被删/被截取的元素数组) arr.slice(start,end); //从start下标开始，截取到end；返回被截取的元素数组；不改变原数组 //start和end可用负数表倒数(-1代表最后一个元素)；end<start时不截取；忽略end，截取start后的所有元素 arr.splice(start,n,value, …); //从start下标开始删除n个，再插入value(可理解为替换)；改变原数组 //start为负数时表倒数；n<1表不删除；可忽略value(不插入)；可忽略n，表删除后面所有；返回被删元素数组 4) 栈：(数组的基础； 改变原数组) arr.pop(); //删最后的一个元素；返回删除的元素 arr.push(元素, …); //添加元素到最后位置；返回数组长度; 等价于: arr[length] = newValue; arr.unshift(元素, …); //添加元素到最前位置(多个参数，则按参数顺序同时插入)；返回数组长度 arr.shift(); //删最前的一个元素；返回被删除的元素 5) toString 和 valueOf 把每一项都调用 toString 方法，然后用半角逗号(,)连接每一项。 如: var arr = [1,2,3,4,5]; alert(arr); //output:1,2,3,4,5 toLocaleString 方法在这里不做详细说明了，他的效果与 toString 方法类似，只是每项调用 toLocateString 方法。

4. Math 数学对象：

都是数学常数：(可直接用) Math.E (自然数) Math.LN2 (ln2) Math.LN10 (ln10) Math.LOG2E (log 2e) Math.LOG10E (log e) Math.PI (圆周率) Math.SQRT1_2 (根号1/2) Math.SQRT2 (根号2) 三角函数： Math.sin(x) 计算正弦值； (x在02π之间，返回值-11) Math.cos(x) 计算余弦值； (x在02π之间，返回值-11) Math.tan(x) 计算正切值； (x在02π之间，返回正切值) 反三角函数： Math.asin(x) 计算反正弦值；(x在 -1与1之间，返回02π) Math.acos(x) 计算反余弦值；(x在 -1与1之间，返回02π) Math.atan(x) 计算反正切值；(x可以为任意值，返回 -π/2 ~π/2) Math.atan2(y,x) 计算从X轴到一个点的角度；(y,x分别为点的纵坐标和横坐标，返回-π ~π) 计算函数： Math.sqrt(x) 计算平方根 Math.pow(x,y) 计算x^y Math.exp(x) 计算e的指数 e^x Math.log(x) 计算自然对数 (x为大于0的整数) 数值比较函数： Math.abs(x) 计算绝对值 Math.max(x,y,…) 返回参数中最大的一个 Math.min(x,y,…) 返回参数中最小的一个 * Math.random() 返回01之间的一个随机数 //若要整数时，如0~99的随机数： n=parseInt(Math.random()100); Math.round(x) 返回舍入为最接近的整数(四舍五入，负数时五舍六入) ` Math.floor(x)` 返回下舍入整数 (结果不大于x；正数时直接舍去小数，负数时 -1.1==-2 ) Math.ceil(x) 返回上舍入整数 (结果大于等于x)

5. Date 时间对象：

创建日期对象： a.不指定参数时： var nowd1=new Date();document.write(nowd1.toLocaleString( )); //显示当前时间，如：2008年11月24日 星期一 19时23分21秒 //不用”toLocaleString()”则显示： Mon Nov 24 2008 19:23:21 GMT+0800 (CST) b.参数为日期字符串： var nowd2=new Date(“2008/3/20 11:12”);alert(nowd2.toLocaleString()); //显示： 2008年03月20日 星期六 11时12分00秒 var nowd3=new Date(“08/03/20 11:12”);alert(nowd3.toLocaleString( )); //显示： 1920年08月03日 星期六 11时12分00秒 //按 月、日、年 的顺序 c.参数为毫秒数： var nowd3=new Date(5000); alert(nowd3.toLocaleString( )); //显示： 1970年01月01日 星期四 08时00分05秒 //显示本国的时间 alert(nowd3.toUTCString()); //显示西方的时间： Thu, 01 Jan 1970 00:00:05 GMT d.参数为年月日小时分钟秒毫秒： var nowd4=new Date(2008,10,24,11,12,0,300); alert(nowd4.toLocaleString( )); //毫秒并不直接显示；月份参数从011，所以这里10对应11月份 //显示： 2008年11月24日 星期一 11时12分00秒 获取和设置日期、时间的方法： getDate() setDate(day_of_month) 日期 (131) getDay() 星期 (17; 没set方法) getMonth() setMonth (month) 月份 (011; 别忘加1) getFullYear() setFullYear (year) 完整年份(-271820275760) getYear() setYear(year) 年 (范围同上； 1900年计算为0) getHours() setHours (hour) 小时 (023) getMinutes() setMinutes (minute) 分钟 (059) getSeconds() setSeconds (second) 秒 (059) getMilliseconds() setMillliseconds (ms) 毫秒(0-999) getTime() setTime (allms) 累计毫秒数(从1970/1/1 00:00:00开始) 注意：set方法对任意整数有效，影响上一级的数；如setDate(-1)设为上个月30号。 但对小数没效。 日期和时间的转换： getTimezoneOffset() 返回本地时间与GMT的时间差，以分钟为单位(中国为-480；差8小时) toUTCString() 返回国际标准时间字符串(默认) toLocalString() 返回本地格式时间字符串 Date.parse(x) 返回累计毫秒数(从1970/1/1 00:00:00到x的本地时间，忽略秒以下的数字) Date.UTC(x) 返回累计毫秒数(从1970/1/1 00:00:00到x的UTC时间) 不明UTC是什么

四、 自定义对象

1. 基本语法：

使用 function 指令定义。其属性用“this.属性名”定义。

如： function ObjectName(yName,yAge) {
this.name = yName;
this.age = yAge;
}
调用时：
var myObject = new ObjectName("kk",80); // ObjectName 里面的函数会被执行
document.write("name = " + myObject.name + "<br> age = " + myObject.age);

2. 使用简略语句快速创建对象

1) 类

正常写法：
var car = new Object();
car.color = "red";
car.wheels = 4;
car.hubcaps = "spinning";
简略写法：
var car = {
color: "red",
wheels:4,
hubcaps:"spinning"
}

对象 car 就此创建，不过需要特别注意，结束花括号前一定不要加 “;” 否则在 IE 会遇到很大麻烦。

2) 数组 正常数组是这样写的： var movies = new Array('Transformers','Transformers2','Avatar','Indiana Jones 4'); 更简洁的写法是： var movies = ['Transformers', 'Transformers2', 'Avatar', 'Indiana Jones 4'];

3)关联数组 这样一个特别的东西。 你会发现很多代码是这样定义对象的：

var car = new Array();
car['colour'] = 'red';
car['wheels'] = 4;
car['hubcaps'] = 'spinning';
//遍历的时候
for ( var key in car ) { alert(key + " : " + car[key]); }

3.匿名函数

var myFun = function(args1, args2){ alert('haha'); }

变量 myFun 指向一个匿名函数,这相当于创建函数 function myFun(args1, args2){ alert(‘haha’); } 由于 javascript 没有类型,所以变量可以指向任意类型,也可以指向一个函数,对它来说都只是一片内存空间而已 匿名函数一般用在只有一次使用的情况下,也是可以传递参数的 如: element.onclick = function(){ alert(0); }

4.JavaScript原生函数

//要找一组数字中的最大数,如下，可以用一个循环
var numbers = [3,342,23,22,124];
var max = 0;
for(var i=0;i<numbers.length;i++){ if(numbers[i] > max){max = numbers[i];} }
alert(max);
//也可以用排序实现同样的功能：
var numbers = [3,342,23,22,124];
numbers.sort(function(a,b){return b - a});
alert(numbers[0]);
//而最简洁的写法是：
Math.max(12,123,3,2,433,4); // returns 433
//你甚至可以使用Math.max来检测浏览器支持哪个属性：
var scrollTop = Math.max( document.documentElement.scrollTop, document.body.scrollTop );

5.如果你想给一个元素增加class样式，可能原始的写法是这样的：

function addclass(elm,newclass) {
var c = elm.className;
elm.className = (c === '') ? newclass : c+' '+newclass;
}
//而更优雅的写法是：
function addclass(elm,newclass){
var classes = elm.className.split(' ');
classes.push(newclass);
elm.className = classes.join(' ');
}

6.对象的继承，一般的做法是复制所有属性，但还有种方法，就是: Function.apply 函数的 apply 方法能劫持另外一个对象的方法，继承另外一个对象的属性 Function.apply(obj,args) 方法接收两个参数 obj：这个对象将代替Function类里this对象 args：这个是数组，它将作为参数传给Function（args–>arguments）

示范如：

function Person(name,age){ // 定义一个类，人类
this.name=name; //名字
this.age=age; //年龄
this.sayhello=function(){alert("hello " + this.name);};
}
function Print(){ // 显示类的属性
this.show=function(){
var msg=[];
for(var key in this){
if(typeof(this[key])!="function"){
msg.push([key,":",this[key]].join(""));
}
}
alert(msg.join(" "));
};
}
function Student(name,age,grade,school){ //学生类
Person.apply(this,arguments); // this 继承 Person,具备了它的所有方法和属性
Print.apply(this,arguments); // this 继承 Print,具备了它的所有方法和属性
this.grade=grade; //年级
this.school=school; //学校
}
var p1=new Person("jake",10);
p1.sayhello();
var s1=new Student("tom",13,6,"清华小学");
s1.show();
s1.sayhello();

JavaScript技术

一、 使用DHtml

DHTML 定义：使用JavaScript和CSS级联样式表操作HTML创造出各种动态视觉效果统称为DHTML DHTML = CSS + Html + JS 是一种浏览器端的动态网页技术 DHTML对象模型(DOM) 将HTML标记、属性和CSS样式都对象化 可以动态存取HTML文档中的所有元素 可以使用属性name或id来存取或标记对象 改变元素内容或样式后浏览器中显示效果即时更新 DHTML对象模型包括浏览器对象模型和Document对象模型

Window对象的常用属性：

* document 对象，代表窗口中显示的HTML文档
frames 窗口中框架对象的数组
* history 对象，代表浏览过窗口的历史记录
* location 对象，代表窗口文件地址，修改属性可以调入新的网页
* status (defaultStatus)窗口的状态栏信息
closed 窗口是否关闭，关闭时该值为true
* name 窗口名称，用于标识该窗口对象
opener 对象，是指打开当前窗口的window对象，如果当前窗口被用户打开，则它的值为null
parent 对象，当前窗口是框架页时指的是包含该框架页的上一级框架窗口
top 对象，当前窗口是框架页时指的是包含该框架页的最外部的框架窗口
self 对象，指当前Window对象
window 对象，指当前Window对象，同self

Window对象的常用方法：

(使用这些方法时，通常不加window也没区别；但在特定情况下必须加，如在内嵌页面用open();)

* alert(sMsg); 弹出简单对话框
confirm(sMsg); 选择对话框
prompt(sMsg, sInit); 弹出输入对话框
* close(); 关闭窗口
open(sURL, sName, sFeatures, bReplace); 打开窗口
print(); 打印窗口中网页的内容
focus(); 设置焦点并执行 onfocus 事件的代码。
blur(); 失去焦点并触发 onblur 事件。
moveBy(iX, iY); 将窗口的位置移动指定 x 和 y 偏移值。
moveTo(iX, iY); 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
resizeBy(iX, iY); 更改窗口的当前位置缩放指定的 x 和 y 偏移量。
resizeTo(iWidth, iHeight); 将窗口的大小更改为指定的宽度和高度值。
scrollBy(iX, iY); 将窗口滚动 x 和 y 偏移量。
scrollTo(iX, iY); 将窗口滚动到指定的 x 和 y 偏移量。
* setInterval(vCode,iMilliSeconds,sLanguage); 每经过指定毫秒值后执行一段代码。
clearInterval(iIntervalID); 取消 setInterval 方法的事件。
* setTimeout(vCode,iMilliSeconds,sLanguage); 经过指定毫秒值后执行一段代码。(一次性)
clearTimeout(iTimeoutID); 取消 setTimeout 方法设置的超时事件。

window主要功能：

1.窗口的打开和关闭 window.open(url,name,config) 打开新窗口；url:打开的超链接，name:窗口的名称，返回新窗口对象 config为窗口的配置参数：menubar 菜单条、toolbar 工具条、location 地址栏、directories 链接、 status 状态栏、scrollbars 滚动条、resizeable 可调整大小(以上参数值为yes或no，默认yes)； width 窗口宽，以像素为单位；height 窗口高，以像素为单位(参数值为数值) * window.close() 关闭窗口 2.对话框 简单对话框： alert(str) 提示框，显示str字符串的内容；按[确定]关闭对话框 confirm(str) 确认对话框，显示str字符串的内容；按[确定]按钮返回true，[取消]返回false prompt(str,value) 输入对话框，显示str的内容；按[确定]按钮返回输入值，[取消]关闭，返回null 窗口对话框： showModalDialog(url,arguments,config) IE4或更高版本支持该方法 showModelessDialog(url,arguments,config) IE5或更高版本支持该方法 参数:url 打开链接，arguments 传入参数名，config 窗口配置参数 config 外观配置参数：status、resizable、help 是否显示标题栏中的问号按钮、center 是否在桌面中间 dialogWidth 对话框宽、dialogHeight 对话框高、(上一行参数值为yes或no，这两行参数为多少像素) dialogTop 对话框左上角的y坐标、dialogLeft 对话框左上角的x坐标 3.状态栏 window.status 状态栏中的字符串信息允许进行设置或读取 4.定时器 tID1=setInterval(exp,time) 周期性执行exp代码；exp 代码块名，time 周期(毫秒)，返回启动的定时器 clearInterval(tID1) 停止周期性的定时器 tID2=setTimeout(exp,time) 一次性触发执行代码exp；返回已经启动的定时器 clearTimeout(tID2) 停止一次性触发的定时器 5.内容滚动 window.scroll(x,y) 滚动窗口到指定位置；单位为像素 window.scrollTo(x,y) 同scroll方法 window.scrollBy(ax,ay) 从当前位置开始，向右滚动ax像素，向下滚动ay像素 6.调整窗口大小和位置 window.moveTo(x,y) 移动窗口到指定位置；单位为像素 window.moveBy(ax,ay) 向右移动ax像素，向下移动ay像素，参数为负数表示反方向移动 window.resizeTo(width,height) 调整窗口大小为指定大小 window.resizeBy(ax,ay) 放大或缩小窗口；参数为负数表示缩小 7.Screen对象 // 屏幕信息(属于window的子对象；常用于获取屏幕的分辨率和色彩) screen.width 屏幕分辨率的宽度，例如1024*768分辨率下宽度为1024 screen.height 类似上面，屏幕分辨率的高度 screen.availWidth 屏幕中可用的宽 //排除 Windows 任务栏 screen.availHeight 屏幕中可用的高 //排除 Windows 任务栏 screen.colorDepth 屏幕的色彩数 8.History对象 // 窗口的访问历史信息(属于window的子对象,常用于返回到已经访问过的页面) history.length 历史记录数 history.foward() 向下一页 history.back() 返回上一页 history.go(0) 刷新。括号里填”-1”就是返回上一页，填”1”就是下一页；其它数字类推

9.Navigator对象 浏览器和OS(系统)的信息 数组 10.Location对象 浏览器地址栏的信息 如： location.href=”http://www.google.com/"; location.assign(href); 前往新地址，在历史记录中，用 Back 和 Forward 按钮可回到之前的地址 location.replace(href); 替代当前文文件，在历史记录中也回不到之前的地址 location.reload(true); 类似刷新，默认 false // location 各属性的用途 location.href 整个URl字符串(在浏览器中就是完整的地址栏),如: “http://www.test.com:8080/test/view.htm?id=209&dd=5#cmt1323" location.protocol 返回scheme(通信协议)，如: “http:”, “https:”, “ftp:”, “maito:” 等等(后面带有冒号的) location.host 主机部分(域名+端口号)，端口号是80时不显示，返回值如：”www.test.com:8080", “www.test.com" location.port 端口部分(字符串类型)。如果采用默认的80端口(即使添加了:80)，那么返回值并不是默认的80而是空字符。 location.pathname 路径部分(就是文件地址)，如:"/test/view.htm"location.search 查询(参数)部分。如: "?id=209&dd=5"location.hash 锚点，如:

"#cmt1323"
不包含参数的地址： location.protocol + '//' + location.host + location.pathname;

应用例子：窗口最大化

window.moveTo(0,0); window.resizeTo(screen.availWidth,screen.availHeight);
或者： moveTo(0,0); resizeTo(screen.width, screen.height);
//采用screen对象的分辨率属性和resizeTo方法来动态确定窗口最大长度和宽度

二、 Dom 元素

处理 XML 文件的 DOM 元素属性：

<element>.childNodes 返回目前元素所有子元素的数组
<element>.children 返回目前元素所有子元素的数组(这个在IE、火狐上也可以用)
<element>.firstChild 返回目前元素的第一个子元素
<element>.lastChild 返回目前元素的最后一个子元素
<element>.nodeValue 指定表示元素值的读/写属性
<element>.parentNode 返回元素的父节点
<element>.previousSibling 返回紧邻目前元素之前的元素
<element>.nextSibling 返回目前元素的后面的元素
<element>.tagName 返回目前元素的标签名(大写)

沿 XML 文件来回移动的 DOM 元素方法： document.getElementById(id) 取得有指定唯一ID属性值文件中的元素 document.getElementsByTagName(name) 返回目前元素中有指定标签名的子元素的数组

<element>.hasChildNodes() 返回布尔值，表示元素是否有子元素
<element>.getAttribute(name) 返回元素的属性值，属性由name指定

动态建立内容时所用的 W3C DOM 属性和方法： document.createElement(tagName) 建立由tagName指定的元素。比如以”div”作为参数，则生成一个div元素。 document.createTextNode(text) 建立一个包含静态文字的节点。

<element>.appendChild(childNode) 将指定节点增加到目前元素的子节点中。例如：select中增加option子节点
<element>.getAttribute(name) 取得元素中的name属性的值
<element>.setAttribute(name,value) 设定元素中的name属性的值
<element>.insertBefore(Node1,Node2) 将节点Node1作为目前元素的子节点插到Node2元素前面。
<element>.removeAttribute(name) 从元素中删除属性name
<element>.removeChild(childNode) 从元素中删除子元素childNode
<element>.replaceChild(newN,oldN) 将节点oldN替换为节点newN
<element>.hasChildnodes() 返回布尔值，表示元素是否有子元素

注意：文字实际上是父元素的一个子节点，所以可以使用firstChild属性来存取元素的文字节点。 有了文字节点后，可以参考文字节点的nodeValue属性来得到文字。 读取XML时，须考虑它的空格和换行符也作为子节点。

处理 HTML DOM 元素中3个常用的属性: nodeName、 nodeValue 以及 nodeType nodeName 属性(只读)含有某个节点的名称: 元素节点的 nodeName 是标签名称(永远是大写的) 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document

nodeValue / data 对于文本节点，nodeValue 属性包含文本。可增删改 对于属性节点，nodeValue 属性包含属性值。 nodeValue 属性对于文档节点和元素节点是不可用的。会返回 null data同样是文本的内容,这个属性下同样可以增删改。对于文档节点和元素节点不可用,返回 undefine

nodeType 属性返回节点的类型。节点类型是： 元素类型 节点类型

ELEMENT_NODE : 1 // 元素
ATTRIBUTE_NODE : 2 // 属性
TEXT_NODE : 3 // 文本
CDATA_SECTION_NODE : 4
ENTITY_REFERENCE_NODE : 5
ENTITY_NODE : 6
PROCESSING_INSTRUCTION_NODE : 7
COMMENT_NODE : 8 // 注释
DOCUMENT_NODE : 9 // 文档,即 document
DOCUMENT_TYPE_NODE : 10
DOCUMENT_FRAGMENT_NODE : 11
NOTATION_NODE : 12

注： 对于属性节点，可使用 “attr.nodeName”和“attr.nodeValue”来查看或者赋值, 也可以使用“attr.name”和“attr.value”。 只是, attr.nodeValue 会返回真实类型,如 bool,number,string,object 等； 而 attr.value 全是 string 类型(null 则返回”null”)

判断是否 dom 元素，一些特殊节点只有nodeName，没有tagName，比如document的nodeName为“#document”，tagName为空值。

三、跨浏览器

1.浏览器判断：

//如果是火狐等浏览器则为“true”
var isNav = (navigator.appName.indexOf("Netscape") != -1);
//如果是IE浏览器则为“true”
var isIE = (navigator.appName.indexOf("Microsoft") != -1); // navigator.appName == "Microsoft Internet Explorer"
var isIE = (navigator.appVersion.indexOf("MSIE") != -1);
//判断IE6
var isIE6 = (navigator.userAgent && navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 6.0")!="-1");
//如果是Opera浏览器则为“true”
var isOpera = (navigator.userAgent.indexOf("Opera") != -1);
//浏览器运行的平台，是 windows 则返回 true
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1);

2.event 事件
在 IE4+ 和 Firefox下的 event
function doEventThing(event)
{
//获取不同浏览器的 event
event = event || window.event; // window.event for IE; 参数event for firefox
//获取不同浏览器的键盘输入记录
var currentKey = event.keyCode || event.charCode; // keyCode 目前兼容了
//获取不同浏览器的事件源
var eventSource = event.target || event.srcElement; // srcElement for IE; target for firefox
var target = event.relatedTarget || event.toElement; // 将会去到的元素,像 onmouseout 会触发
//屏蔽Form提交事件
//if ( event.returnValue ) event.returnValue = false; // for IE
//if ( event.preventDefault ) event.preventDefault(); // for firefox
( e.preventDefault ) ? (e.preventDefault()) : (e.returnValue = false);
//添加事件
if ( event.attachEvent ) {
event.attachEvent('onclick', func ); // for IE; 需要加上“on”,如 onmouseover
} else if ( event.addEventListener ) {
event.addEventListener('clcik', func, false); // for firefox; 不需要加上“on”,直接写“click”
}
//改变事件; 但上面的绑定事件方法并不改变原有的onclick事件，而是添加事件
event.onclick = func;
}
//Firefox 下必须手动输入参数,调用时如: <input type="button" onclick="doEventThing(event);"/>

1. firefox 的 click() 事件,由于 firefox 不支持 click() 事件,代替方式：

// 获取需要触发 onclick() 的元素
var element = document.getElementsByTagName('a')[0];
// For IE
if ( document.all ) {
element.click();
// FOR DOM2
} else if ( document.createEvent ) {
var ev = document.createEvent('MouseEvents'); //'MouseEvents' 改成 'HTMLEvents' 的话,firfox2不通过
ev.initEvent('click', false, true);
element.dispatchEvent(ev);
}

4. 跨浏览器技巧：

1) IE不能用setAttribute设定class属性。

解决方法1: 同时使用 setAttribute("class","newClassName") 和 setAttribute("className","newClassName")
解决方法2: <element>.className = "newClassName"
2) IE中不能使用setAttribute设定style属性。即 <element>.setAttribute("style","fontweight:bold;") 不相容。
解决方法：使用 <element>.style.cssText = "fontweight:bold;"
3) 使用appendChild将<tr>元素直接增加到<table>中，则在IE中这一行并不出现，但其它浏览器却会出现。
解决方法：在<table>下增加<tbody>元素，再添加<tr>
4) IE不能直接添加按钮处理事件。如：addButton.setAttribute("onclick","addEmployee('unid');");不适用。
解决方法：addButton.onclick = function() { addEmployee('unid'); };//用匿名函数调用addEmployee()函数。
此外,onmouseover,onmouseout 等事件也要使用此方法。
5) firefox 不支持 document.all
解决方法: 用 document.getElementsByTagName("*") 替代,可以得到得到所有元素的集合
6) 设置元素的id
同时使用 .id 和 setAttribute 来设置
var div = document.createElement('div');
div.id="btc";
div.setAttribute("id","btc");

5.Firefox注册innerText写法

if ( (navigator.appName.indexOf("Netscape") != -1) )
{
//注册 Getter
HTMLElement.prototype.__defineGetter__("innerText", function(){
var anyString = "";
var childS = this.childNodes;
for ( var i=0; i < childS.length; i++ ) {
if ( childS[i].nodeType == 1 )
anyString += childS[i].tagName == "BR" ? '\n' : childS[i].innerText;
else if(childS[i].nodeType == 3 ) {
anyString += childS[i].nodeValue;
}
}
return anyString;
});

//注册 Setter
HTMLElement.prototype.__defineSetter__("innerText",
function ( sText ) { this.textContent = sText; }
);
}
//在非IE浏览器中使用 textContent 代替 innerText

6.长度：FireFox长度必须加“px”，IE无所谓

解决方法：统一使用 obj.style.height = imgObj.height + “px”;

7.父控件下的子控件：IE是“children”，FireFox是“childNodes”

8.XmlHttp

在IE中，XmlHttp.send(content)方法的content可以为空，而firefox则不能为空，应该用send(“ “)，否则会出现411错误

9.event.x 与 event.y 问题

问题： 在IE中，event 对象有x,y属性，FF中没有 解决方法： 在FF中，与 event.x 等效的是 event.pageX ，但event.pageX IE中没有 故采用 event.clientX 代替 event.x ，在IE中也有这个变量 event.clientX 与 event.pageX 有微妙的差别，就是滚动条 要完全一样，可以这样： mX = event.x ? event.x : event.pageX;

10.禁止选取网页内容

问题：FF需要用CSS禁止，IE用JS禁止 解决方法： IE: obj.onselectstart = function() {return false;} FF: -moz-user-select:none;

11.各种浏览器的特征及其userAgent。

IE

只有IE支持创建ActiveX控件，因此她有一个其他浏览器没有的东西，就是 window.ActiveXObject 函数。 IE各个版本典型的userAgent如下(其中，版本号是MSIE之后的数字)：

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)

Firefox

Firefox中的DOM元素都有一个getBoxObjectFor函数，用来获取该DOM元素的位置和大小(IE对应的中是getBoundingClientRect函数)。这是Firefox独有的，判断它即可知道是当前浏览器是Firefox。 Firefox几个版本的userAgent大致如下(其中，版本号是Firefox之后的数字)：

Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12

Opera

Opera提供了专门的浏览器标志，就是 window.opera 属性。 Opera典型的userAgent如下(其中，版本号是Opera之后的数字)：

Opera/9.27 (Windows NT 5.2; U; zh-cn)
Opera/8.0 (Macintosh; PPC Mac OS X; U; en)
Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0

Safari

Safari浏览器中有一个其他浏览器没有的openDatabase函数，可做为判断Safari的标志。 Safari典型的userAgent如下(其版本号是Version之后的数字)：

Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13
Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

Chrome

Chrome有一个 window.MessageEvent 函数，但Firefox也有。不过，好在Chrome并没有Firefox的getBoxObjectFor函数，根据这个条件还是可以准确判断出Chrome浏览器的。 目前，Chrome的userAgent是(其中，版本号在Chrome之后的数字)：

Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

下面是判断浏览器的代码：

var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
Sys.ie = ua.match(/msie ([\d.]+)/i)[1];
else if (document.getBoxObjectFor) // 火狐判断出错
Sys.firefox = ua.match(/firefox\/([\d.]+)/i)[1];
else if (window.opera)
Sys.opera = ua.match(/opera.([\d.]+)/i)[1];
else if (window.MessageEvent)
Sys.chrome = ua.match(/chrome\/([\d.]+)/i)[1];
else if (window.openDatabase)
Sys.safari = ua.match(/version\/([\d.]+)/i)[1];

//以下进行测试
if(Sys.ie) alert('IE: '+Sys.ie);
if(Sys.firefox) alert('Firefox: '+Sys.firefox);
if(Sys.chrome) alert('Chrome: '+Sys.chrome);
if(Sys.opera) alert('Opera: '+Sys.opera);
if(Sys.safari) alert('Safari: '+Sys.safari);