Javascript基础

作者导言: 引用偶像刘德华的一句话 “学到的就要教人，赚到的就要给人”！

　　以下是关联的web前端基础知识文章，通过这些文章，您既可以系统地学习和了解这些知识，而且可以把它当作手册来在实际开发中进行查询。这些文章来源于本人的一本完整学习笔记，如有需要请留言联系本人免费获取！

HTML5基础知识

Javascript基础

jQuery基础

jQueryEsayUI基础

第一章、javascript概述

1、什么是javascript？

答：是一种面向对象的解释型程序设计语言，它是基于对象和事件驱动运行于浏览器端的脚本语言，它的主要用途是用于验证发往服务器的数据、增加web互动、加强用户体验等。

2、javascript特点？

答：A.松散--javascript语言核心和C\C++\JAVA语言相似，比如条件判断、循环、运算符等。但它对变量的数据类型不必明确。B.对象属性--javascript中把对象的属性名映射为任意的属性值。C.继承机制—javascript的面向对象继承机制是基于原型的。

3.有些浏览器可能不支持某些js脚本，存在兼容性问题，因此设计一个网页常常需要进行兼容测试。

第二章、使用javascript语言

1.在网页中嵌入javascript代码的方式：A.直接使用代码。B.使用<script>标签包含代码。C.使用外部js代码文件。

2.<script>标签的使用：

A.charset属性—表示通过src指定的字符集，可选。

B.defer属性—表示js代码可以延迟到所有文档被解析之后执行，大多数浏览器不支持，所以很少用。

C.language属性—原来用于指示代码使用的脚本语言，现已废弃不用。

D.src属性—用于指定要执行的外部js代码文件，可选。

E.type属性—必须属性，用于指示代码使用的脚本语言类型，可看作language的替代品。

3.使用<script>标签注意事项：

A.该标签必须成对出现

B.使用src指定外部代码后就不要再内部添加代码

C.以前为了让不支持js脚本的浏览器能够屏蔽js代码而在js中使用注释<- - ,但现在不需要了。

第三章、语法关键字保留字及变量

1.语法构成：

A.变量、函数、操作符等都区分大小。

B.标识符是指变量、函数、属性的名字，且必须以字母、_或$开头。

C.不能把关键字、保留字、true、false、null等作为标识符。

D.注释使用//或/*表示。

E.变量统一使用var关键字声明，有时也可以省略var，作为局部变量使用，可以同时声明多个变量，中间用逗号隔开。

第四章、数据类型

1.JS中不支持创建任何自定义类型的机制，只有以下6种数据类型：Undefined、Null、Boolean、Number、String和Object。

2.type操作符：用于检测变量、字面量的数据类型并返回字符串（未定义返回undefined、布尔值返回boolean、字符串返回string、数值返回number、对象和null返回object 以及函数返回function）。

3.Undefined类型：该类型只有一个值undefined，在使用var声明变量但没有对其初始化时，该变量的值就是undefined。

4.Null类型：该类型只有一个值null，它表示一个空对象引用（指针）。

5.Boolean类型：该类型有两个值true和false，由于区分大小写，所以True和False不是该类型。

6.Number类型：该类型包含整型和浮点型，而数值的表示分16进制、10进制、8进制和2进制等格式。

7.String类型：用于表示由0个或多个16位Unicode字符组成的字符序列，即字符串。可以用双引号或单引号括起来表示。String类型包含的一些特殊的字符字面量，叫转移序列： \n \t \b \r \’ \” \unnn \xnn \\等。

8.Object类型：该类型是对象类型，对象其实就是一组数据和功能的集合，可以通过new操作符后跟要创建的对象类型的名称来创建。Object()是对象构造，可以给他任意传参数，可以传数值、字符串、布尔值等，且还可以进行相应的计算。

9.数据类型转换: javascript是弱类型的语言，不同的数据类型之间能进行隐式转换,还可以用类型转换函数进行显示转换：

A. Boolean（待转换成Boolean类型的值）

任何数据类型的值都有与true、false等价的值，转换规则：String类型转Boolean类型（非空字符串转换为true、空字符串转换为false），Number类型转Boolean类型（任何非0数值及infinity转换为true，0和NaN转换为false），Object类型转Boolean类型（任何对象转换为true，null转换为false），Undefined类型转Boolean类型（undefined转换为false）。

B. Number（待转换成Numbe类型的值）

任何数据类型都可以用Number（）函数转换，转换规则：Boolean类型转Number类（true转换为1，False转换为0），String类型转Number类型（1.只包含数值的字符串，会直接转换为十进制数值，如前导为0,则自动去掉。2.只包含浮点数值的字符串，会直接转换为浮点数，如前导和后导为0则自动去掉。3.空字符串转换为0。4.如果不是以上三种情况，则转换为NaN。），如果是对象，则首先调用ValueOf()方法确定返回值是否能转换位数值，若转换结果是NaN,则基于这个返回值再调用toString（）方法，再测试返回值。

C. parseInt（待转换成int类型的值）、parseFloat（待转换成Float类型的值）

这两个方法专用于转换字符串，例如：

ParseInt（‘456Lee’）将转换为456

Parseint（‘Lee456Lee’）将转换为NaN，如第一个不是数值就返回NaN

Parseint（‘12Lee456Lee’）将转换为12，从第一个数值开始到最后一个连续数值结束

Parseint（‘56.12’）将转换为56，小数点不是数值会被去掉

Parseint（‘’）空字符串转换为NaN

Parseint（‘070’）转换为56，可以识别八进制

Parseint（‘0xALee’）转换为100，可以识别十六进制，L不属于十六进制字符所以被过滤

Parseint（‘AF’，‘16’）转换为175，设置第二个参数用于指定第一个的进制，可以去掉0x前导

Parsefloat（）与parseint（）一样，从第一位解析到非浮点数位置。

D.toString（）

该方法一般不需要传参数，但是在把数值转换成字符串的时候可以传递进制参数，例如 Var P=10；

P.toString() 转换成‘10’,默认输出

P.toString(2) 转换成‘1010’,二进制输出

P.toString(16) 转换成‘a’,十六进制输出

E.String（）方法能够将任何数值类型的值强制转换为字符串。若在转型之前不知道变量是否是null或undefined的情况下，可以使用该函数

第五章、运算符

1.表达式：表达式是一个“短语”，解释器会通过计算把它转换成一个值，字面量或变量名就是一个最简单的表达式。

2.加号运算符，该运算符若操作符中有一个是字符串，则它用于连接运算，不做算数运算。

3.位运算符： NOT \ AND \ OR \ XOR \ << \ >> \ >>> 。

4.注意“=”是赋值运算符，“==”才是等号运算符。

5.特殊运算符：+= 、*= 、 /= 、-= 。

6.点号运算符“.”调用对象属性或方法。

第六章、流程控制语句

1.语句：语句表明执行过程中的流程、限定与约定，所有的代码都是由语句构成的，形式上可以是单条语句或由{}括起来的复合语句，复合语句整体作为单条语句执行。

2.语句的分类：声明语句、表达式语句、分支语句、循环语句、控制结构语句等等。

3.if语句：

A. If（条件表达式）语句;

B. If（条件表达式）语句1;

else 语句2;

C. if（条件表达式）语句1;

else if （条件表达式）语句2;

else if （条件表达式）语句3;

.................

else if （条件表达式）语句n-1;

else 语句n;

注意：条件表达式后面的语句是指单条语句或{}括起来的复合语句块。

4.switch语句：

Switch （表达式）

{ case 情况1 ：语句1;break;

case 情况2 ：语句2;break;

.....

case 情况n-1 ：语句n-1;break;

default 语句n;

}

注意：当表达式的值=列出的某种情况时，执行该情况后面的语句，break语句用于退出当前结构，跳到 } 后面继续执行其他语句。否则会从该情况后面一直执行到语句n。

5.do while语句：

do { 语句; }

while (循环条件表达式);

6.while语句：

while（循环条件表达式）{ 语句; }

7.for语句：

for （语句1，语句2，语句3）{ 循环体语句；}

注意：该语句具有初始化变量和定义循环后要执行的代码的能力，语句1一般用于初始化变量，语句2是循环条件，语句3是执行循环体语句后再执行的语句。相当于以下while语句：

语句1; While(语句2){ 循环体语句；语句3；}

8.for in 语句：

For（变量P in 数组或对象）{ 语句；}

注意：该语句是一种精准的迭代语句，可以用来枚举对象的属性，即对对象中每一种属性或数组中每一个元素都执行一次 {语句；} 语句。变量P 用于表示对象或数组中每个值。

9. break语句和continue语句：用于在循环中控制代码的执行，break语句会立即结束循环，强制跳转到循环体后面的语句，而continue则用于退出当前循环，继续下一次循环。

10.with语句：用于将代码的作用域设置到一个特定的对象中。

Var box = { ‘name’ : ’ 张三’ , ‘age’ : 28 } //创建一个对象，有两个属性name和age

Var n=box.name; a=box.age; // 从对象里取值赋给变量，但可以使用with关键字省略对象名，如下： with（box）{ var n=name; a= age }

第七章、函数

1.函数及参数：我们把经常使用的代码段定义为一个函数，就可以通过函数名来调用它执行相关功能，有时候我们需要为代码提供相关参数变量才能完成代码执行，因此我们定义一个函数时可根据需要定义相关参数变量，有时也需要该代码执行后返回一个结果给我们，这个结果我们叫函数的返回值，在代码段中通过return语句返回到函数这个对象中，我们可以使用变量来接收它的值。

2. 函数定义： function 函数名（参数列表）{ 功能代码 }

3.函数调用：函数名（实际传参）;

4.arguments对象：js定义的函数对参数个数没有要求，也不会因为参数不统一而发生错误，实际上函数体内可以通过arguments对象（以数组形式接收参数）来接收传递进来的参数，访问具体的参数可以通过“arguments[下标]”形式访问，该对象的length属性可以得到传入的参数个数。

第八章、数组和对象

1.对象：对象是一种引用类型，而对象的值就是引用类型的实例。在js中引用类型是一种数据结构，用于将数据和功能组织在一起。

2.Object类型：该类型也是一种引用类型，创建该类型对象有两种方式，一种是使用new关键字（可省略），另一种是字面量表示。例如： var box=new Object（）; 或 var box={ }

3.对象的属性和方法：在创建的对象中可以给他创建属性和方法，例如:

Var box=new Object();//创建对象

box.name=”张三”; //创建对象属性

box.age=28; //创建对象属性

box.func= function () {代码} //创建对象方法

或者通过字面量方式创建：

Var box={

name ：”张三”; //创建对象属性

age ：28; //创建对象属性

func ： function () {代码} //创建对象方法,其中func为方法名

}

4.对象属性和方法的调用格式：

对象.属性名；对象名.方法名（）

或者

对象名[ “属性名” ]；对象名[ 方法名() ]

5.使用delete删除属性和方法：

delete 对象名.属性名； delete 对象名.方法名（）；

6.Array类型：即数组类型，它也是Object类型，创建数组对象有两种方式，一种是使用new关键字（可省略）创建，另一种是使用字面量，例如：

var box =new Array（）；//创建空数组

var box =new Array（10）；//创建长度为10的数组

var box =new Array（’张三’，’25’，’教师’）；//创建包含了元素的数组

或

var box= [ ]；//创建空数组

var box =[ ’张三’，’25’，’教师’ ] //创建包含了元素的数组

7.数组元素的访问：使用“数组名[下标]”来获取或设置对应的元素，使用length属性来获取数组长度。

8.js是弱类型的语言，因此创建数组不需指定元素数据类型，它可以存储任何类型的数据。

9.对象中的内置方法：对象或者数组都内置有toLocaleString（）、toString（）和valueOf（）方法，js还为数组提供了push（）、pop（）、shift（）、unshift（）、reverse（）、sort（）、concat（）和slice（）方法，push（）方法可以接收任意数量的参数并把它们添加到数组的尾部且返回修改后的数组长度。pop（）方法则用于移除最后一个元素，减少数值的length值并返回移除的元素。shift（）方法用于移除数组开头元素并返回被移出的元素。unshift（）方法用于在数组开头添加元素，添加元素用逗号隔开。reverse（）方法用于逆向排序并返回排序后的数组，sort（）方法用于从小到大排序并返回排序后的数组。concat（）方法用于基于当前数组创建一个新数组，slice（）方法用于基于当前数组获取指定区域元素并创建一个新数组。

第九章、时间与日期

1.Date类型：该类型使用UTC Time格式来保存日期，通过创建该类型的对象来获取或设置时间和日期。

2.创建date对象的方式：使用new运算符和Date（）构造方法创建。例如： var box=new Date（）；如果没有指定时间参数，则默认返回当前时间。

3.js提供了两个静态方法：Date.parse（）和Date.UTC（），date.parse（）方法用于接收一个表示日期的字符串参数，然后尝试返回相应的表示日期的毫秒数，如果没有传入字符串或非标准的日期格式，就会返回NaN。Date.UTC（）方法同样返回表示日期的毫秒数，但它与Date.parse在构建值时使用不同的信息。

4.Date.parse()常用的日期格式：“月/日/年”、“英文月名日，年”

5.通用方法：Date类型也重写了toLocaleString（）、toString（）和valueOf（）方法，但这些方法返回值与其他类型的方法不同。

6.日期格式化方法：Date类型还有一些专门用于将日期以指定格式显示的方法。

toDateString(); //以特定的格式显示星期、月、日、年

toTimeString(); //以特定的格式显示时、分、秒、时区

toUTCString(); //以特定的格式显示完整的UTC时间

toLocaleDateString(); //以本地时间格式显示星期、月、日、年

toLocaleTimeString(); //以本地时间格式显示时、分、秒、时区

7.组件方法：为单独获取想要的时间和日期而提供的方法。

getTime(); //获取日期的毫秒数

setTime(); //以毫秒数设置时间

getFullYear(); //获取4位年份

setFullYear(2008); //设置四位年份2008，返回的是毫秒数

getMonth(); //获取月份，没指定月份则从0开始算起

setMonth(11); //设置月份11

getDate(); //获取日期

setDate(8); //设置日期为8，返回毫秒数

getDay(); //获取星期，0表示星期日，6表示星期六

setDay(2); //设置星期为星期2

getHours(); //获取时

setHours(08); //设置时为08

getMinutes(); //获取分钟

setMinutes(23); //设置分钟为23

getSeconds(); //获取秒数

setSconds(38); //设置秒数为38

getMilliseconds(); //获取毫秒数

setMilliseconds(); //设置毫秒数

getTimezoneOffset(); //返回本地时间和UTC时间相差的分钟数

注意：以上方法除了getTimezoneOffset();，其他的都有对应的UTC方法,表示协调世界时间，例如setDate()就有setUTCDate(); ，getHourse();就有getUTCHourse();

第十章、正则表达式

1.正则表达式：是一个描述字符模式的对象。正则表达式主要用于验证客服端的输入数据是否符合正则表达式要求，Js中的RegExp类表示正则表达式，而string类和regexp类都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的方法。

2.创建正则表达式：使用new运算符或使用字面量方式创建。

例如：var box=new RegExp（’模式字符串’）； //必须传入模式字符串

var box=new RegExp（’box’，’ ig’）；//第二个参数是可选模式修饰符

var box= /模式字符串/； //直接使用两个/，表示正则对象

var box= /模式字符串/ig； //在第二个/后面加模式修饰符

3.模式修饰符的可选参数： i 表示忽略大小写， g 表示全局匹配，m表示多行匹配。

4.测试匹配方法：test（）和exec（）方法，test（）方法用于在字符串中测试匹配模式，返回true或false。exec（）用于在字符串中执行匹配搜索，匹配了返回结果数组，如无匹陪则返回null。例如：

Var pattern = new RegExp(‘boy’,’i’); //模式字符串为boy，i 表示不区分大小写

pattern.test(Boy); //调用正则对象的test方法，传入需要与模式字符串匹配的字符串Boy ，若匹配成功则返回true，失败返回false。

pattern. Exec(Boy); // 调用正则对象的exec方法，传入需要与模式字符串匹配的字符串Boy ，若匹配成功则返回匹配数组Boy，失败返回null。

5.String对象也提供了4个使用正则表达式的方法：

match（正则对象）; // 返回匹配到的子串或null

replace（’正则对象, ’字符串’）; //用‘字符串’替换匹配到的数据，并返回替换后的字符串。

search（’正则对象’）; /返回匹配到的串的开始位置，无匹配返回-1

split（’正则对象’）; //返回按“匹配到的串”拆分的数组（字符串拆分成数组）

注意：正则对象是指通过new运算或字面量创建的正则表达式（var 对象名= new RegExp（模式字符串）），而以上方法可以直接用“字符串.方法名（）;”形式调用。

6.RegExp对象的静态属性（指不声明实例即可使用的属性）：

input属性：当前被匹配的字符串

lastMatch属性：最后一个匹配的字符串

lastParen属性：最后一对圆括号里的匹配子串

leftContext属性：最后一次匹配到的子串左边的子串

multiline属性：是否所有表达式都用于多行布尔值

rightContext属性：最后一次匹配到的子串右边的子串

注意：这些属性有些浏览器不支持，很少使用，且这些属性可以用短名来代替，不懂得自己百度。

7.RegExp对象的实例属性（必须先声明实例才能使用的属性）：

global属性：布尔值，表示g 是否已设置

ignoreCase属性：布尔值，表示 i 是否已设置

multiline属性：布尔值，表示m是否已设置

lastIndex属性：整数，代表下次匹配将从哪个字符开始（可以手动设置）

Source属性：正则表达式的源字符串形式

8.获取控制：正则表达式元字符是指包含特殊含义的字符，他们有一些特殊功能，可以控制匹配模式的方式。

元字符	字符类型	匹配范围
.	单个字符和数字	匹配除换行符外的任意字符
[a-z0-9]		匹配括号中的字符集中的任意字符
[^a-z0-9]		匹配任意不在括号中的字符集中的字符
\d		匹配数字
\D		匹配非数字（与[^0-9]相同）
\w		匹配字母、数字和_
\W		匹配非字母、非数字和非_
\0	空白字符	匹配null字符
\b		匹配空格字符
\f		匹配进制字符
\n		匹配换行符
\r		匹配回车字符
\t		匹配制表符
\s		匹配空白字符、空格、制表符和换行符
\S		匹配非空格字符
^	锚字符	行首匹配
$		行尾匹配
\A		只有匹配字符串开始处
\b		匹配单词边界，词在[]时内无效
\B		匹配非单词边界
\G		匹配当前搜索的开始位置
\Z		匹配字符串结束处或行尾
\z		只匹配字符串结束处
X？	重复字符	匹配0个或1个X
X+		匹配至少一个X
X*		匹配0个或任意多个X
（xyz）+		匹配至少一个（xyz）
X{m，n}		匹配最少m个、最多n个X
this\|where\|logo	替代字符	匹配this或where或logo中的任意一个
（string）	记录字符	用于反向引用的分组
\1或$1		匹配第一个分组中的内容
\2或$2		匹配第二个分组中的内容
\3或$3		匹配第三个分组中的内容

9.贪婪和惰性：（略）需要时自己百度。

10.常用的正则：

A.检查邮政编码

Var pattern=/[1-9][0-9]{5}/;

Var str=’输入的邮编字符串’;

alert(pattern.test(str));

B.检查文件压缩包

Var pattern=/[\w]+\.zip/;

Var str=’文件名称字符串’;

alert(pattern.test(str));

C.删除多余空格

Var pattern=/\s/g;

Var str=’可能有空格的字符串’;

Var result=str.replace(pattern; ‘’ );

alert(result);

D.删除首空格

Var pattern=/^\s+/;

Var str=’可能首部含有空格的字符串’;

Var result=str.replace(pattern, ‘’ );

第十一章、Function类型

1.Function类型：即函数类型，它实际上也是对象，每个函数都是Function类型的一个实例，而且和其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上是指向函数对象的指针。

2.函数的声明方式：

A.普通的函数声明

function box（参数）{ 函数体语句; }

B.使用变量初始化

Var box= function（参数）{ 函数体语句; }

C.使用 Function构造函数

Var box= new Function（参数）{ 函数体语句; }

3.作为值的函数：js中的函数本身就是变量，所以函数也可以作为值来使用，不仅可以把函数作为参数传递给另一个函数，而且函数返回值也可以是函数。

4.函数的内部属性：在函数内部，有两个特殊的对象arguments和this，arguments是一个数组对象，包含着传入函数中的所有参数，主要用途是保存参数，它有一个callee属性，该属性是一个指针，指向拥有这个对象的函数。 this对象引用的是函数调用语句所处的那个作用域。

5.函数属性和方法：js中的函数是对象，因此函数也有属性和方法。每个函数都有length和proctype两个属性。 Length属性表示函数希望接收的命名参数的个数。 Proctype属性是保存所有实例方法的真实所在，也就是原型。Proctype下有apply（）和call（）方法。

第十二章、变量、作用域、内存

1.变量的值的类型：js中值有两种类型，基本类型值和引用类型值。基本类型值是指保存在栈内存中的简单数据段，这种值完全保存在内存中的一个位置。而引用类型值是指保存在堆内心存中的对象，而变量中保存的只是一个指向堆内存对象的指针。将值赋值给变量时，解析器必须确定这个值是基本类型还是引用类型。基本类型有Undefined、Null、Boolean、Number、String，这些类型值在内存中占有固定大小的空间，他们保存在栈内存中，我们通过值进行访问。引用类型的值，则必须在堆内存中为该值分配空间，这种值的大小是不固定的，因此不能把它保存在栈内存中，但内存地址的大小是固定的，因此将内存地址保存在栈内存中，所以变量保存的是对象的地址即指针，而变量的值是指堆内存中的对象值。这样，在查询引用类型的变量时，先从栈中读取内存地址，然后通过地址找到堆中的值，这种访问方式叫按引用访问。

2.栈内存和堆内存：是内存分配的两种模式，栈内存空间大小是固定的，用于保存基本类型值和指针，堆内存空间大小不固定，用于保存引用类型值。

3.动态属性：定义基本类型值和引用类型值的方式是相似的，都是创建一个变量并为该变量赋值。但是值保存到变量中之后，对不同类型的值可以执行的操作就不同了。

Var box=new Object(); //创建引用类型 box.name=’Lee’; //为该对象新增一个属性

var nox=’Lee’;//创建基本类型 nox.age=27;//基本类型的值是不能添加属性的

4.复制变量值：在变量复制方面，基本类型与引用类型也有不同。基本复制的是值本身而引用类型复制的是指针地址（他们复制的都是栈内存中的数据）。

{ Var box=’Lee’; //在栈内存box中生成一个值Lee

Var box2 = box; //将box中保存的值Lee复制一份到box2中

box=’kkk’; //更改box中的值

alert( box2 ); //输出box2的值还是Lee，说明box和box2是相互独立的

}

{ var nox = new Object(); //创建一个引用类型对象

nox.name=’Lee’; //给该对象增加一个属性name

var nox2= nox //复制nox中保存的值给nox2

nox2.name=’kkk’; // 更改nox2的属性name为kkk

alert(nox.name); // 输出nox的name属性为KKK，说明nox中的原有属性值也被改变了，由此判断，这两个变量nox和nox2都指向同一个对象值，引用类型的变量复制时复制的是指向堆对象值的指针地址。

}

5.参数传递：js中虽然变量有基本类型和引用类型，但所有参数都是按照值传递的（传递的是变量保存的值），没有引用传递方式。

6. 变量的类型检测：

使用typeof运算符语法：typeof 变量 //检测变量类型，返回类型字符串

使用 instanceof运算符语法：对象 instanceof 类型 //判断对象是否属于指定类型，返回true或false

7.执行环境及作用域：执行环境是js中最为重要的一个概恋，执行环境定义了变量或函数有权访问的其他数据，决定了他们各自的行为。全局执行环境是最外围的执行环境，在web浏览器中，全局执行环境被认为是window对象，因此所有的全局变量和函数都是作为window对象的属性和方法创建的（可以用“window.属性、window.方法”方式调用）。

8.局部执行环境：局部执行环境是相对于全局而言的，每个执行环境都有一个与之关联的对象（该对象只对解析器可见），用于保存该环境中定义的变量和方法。

9.变量和函数的销毁：当执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数也随之销毁。如果是全局环境，需要程序执行完毕或网页被关闭才会销毁。

10.变量作用域：变量的适用执行环境，局部执行环境里的变量在该环境下优先于全局执行变量。不使用var关键声明的变量是全局变量，使用var之后作用于具体的环境。

11.js中没有块级作用域：即if等语句的“{}”没有封闭作用域的功能。

12.内存问题：js中具有自动收集垃圾、释放内存机制，不必像C、C++语言那样需要手动跟踪内存使用情况。

第十三章、基本包装类型

1.基本包装类型：为了便于操作基本类型值，js提供了3个String、Boolean和Number特殊的引用类型，这些类型和其他引用类型相似，但同时具有与各自的基本类型相应的特殊行为，实际上，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而能够调用一些方法来操作这些数据。既是基本类型又是特殊的引用类型称为基本包装类型。

Var box=’Mr.Lee’; //定义一个字符串

Var box2=box.substring (3); //截取字符串前3位

注意：变量box是一个字符串类型，而它又能调用substring（）方法，说明它又是一个对象（对象才能调用方法），’Mr.Lee’是一个字符串类型的值，按道理不应该是对象，不应该会有自己的方法，但js又把它定义为特殊的引用类型，所以支持属性和方法调用。

2.引用类型：Object类型、Array类型、RegExp类型

3.基本类型：String类型、Number、Boolean类型、Null类型、Undefined类型

4.基本包装类型（既是基本类型又是引用类型）：String类型、Number、Boolean类型

5.三种基本包装类型都有以下规则（以string类型为例）：

A.字面量写法：

Var box = ‘Mr.Lee’; //声明字面量

box.name=’Lee’; //尝试给它添加属性，但无效

box.age=function(){return 25;} //尝试给它添加方法，但无效

box.substring(3); //调用系统内置方法，有效

B.new运算符写法：

Var box= new String(‘Mr.Lee’); //声明字面量

box.name=’Lee’; //尝试给它添加属性，该属性有效

box.age=function(){return 25;} //尝试给它添加方法，该方法有效

box.substring(3); //调用系统内置方法，有效

注意：能使用new关键字创建的是引用类型值（Object类型），因此能够给它添加属性和方法，而使用字面量形式创建的是基本类型值，不能给他添加属性和方法。但两种方式都可以使用内置方法。但不建议使用new运算符，因为不容易区分是基本类型值还是引用类型值。

6.Boolean基本包装类型：没有特定的属性和方法。

7.Number基本包装类型：

静态属性和方法	说明
MAX_VALUE	最大值
MIN_VALUE	最小值
NaN	非数值
NEGATIVE_INFINITY	负无穷大
PISITIVE_INFINITY	正无穷大
prototype	原型
toString()	转换为字符串
toLocalString()	转换为本地数字格式字符串
toFixed()	将数字保留小数点后指定位数并转化为字符串
toExponential()	将数字以指数形式表示，保留小数点后指定位数并转化为字符串
toPrecision()	指数形式或点形式表述数，保留小数点后指定位数并转化为字符串

8.String基本包装类型：

属性和方法	说明
length	返回字符串长度
constructor	返回创建String对象的函数
prototype	添加属性或方法扩展字符串
charAt(n)	返回指定索引位置的字符
charCodeAt(n)	以unicode编码形式返回指定索引位置字符
concat(str1...str2)	将字符串参数串联到调用该方法的字符串
slice(n,m)	返回字符串n到m位置之间的字符串
substring(n,m)	返回字符串n到m位置之间的字符串
substr(n,m)	返回字符串n开始的m个字符串
toLowerCase()	将字符串全部转换为小写
toUpperCase()	将字符串全部转换为大写
toLocalLowerCase()	将字符串全部转为小写且本地化
toLocalUpperCase()	将字符串全部转为大写且本地化
indexOf ( Str,n)	从n开始搜索第一个Str，并将搜索的索引值返回
lastindexOf (str,n)	从n开始搜索最后一个Str，并将搜索的索引值返回
Math(pattern)	返回模式中的子串或null
replace(pattern,replacement)	用第二个参数替换第一个
Search (pattern)	返回字符串中pattern开始位置
Split(pattern)	返回字符串按指定pattern拆分的数组
fromCharCode(ASCII)	输出ascii码对应值
LocalCompare(STR1,STR2)	比较两个字符串大小，返回相应值

第十四章、内置对象

1.内置对象：由ECMAScript实现提供的、不依赖于宿主环境的对象。ECMAScript定义了Global和math对象两个内置对象。

2.Global对象：js中不属于任何其他对象的属性和方法都是该对象的属性和方法，所以，事实上并不存在全局变量和全局函数：所有的全局作用域定义的变量和函数，都是Global对象的属性和方法（因为js中没有定义怎样调用Global对象，所以不能通过“Global.属性、Global.方法”方式调用全局属性和方法，web浏览器将Global作为window对象的一部分，全局变量和方法可以使用“window.属性、windo.方法”方式调用）。

3.URI编码：URI编码可以对链接进行编码，以便发给浏览器。他们采用特殊的UTF-8编码替换所有的无效字符，从而让浏览器接受和理解（有些浏览器可以自动编码）。

4.Global对象的属性和方法：

encodeURI()	编码（不会对本身就属于uri的特殊字符进行编码）
encodeURIComponent()	编码（对任何非标准字符都进行编码）
decodeURI()	解码被编码的字符
decodeURIComponent()	解码被编码的字符
eval()	解析字符串，该方法接收一个js代码的字符串，解析后字符串内容就可以被当作js代码使用
属性	Undefined、NaN、Object、Array、Function等等

5.Math对象：该对象提供了一些与数学操作运算有关的属性和方法。

Math.E	自然对数的底数常量e的值
Math.LN10	10的自然对数
Math.LN2	2的自然对数
Math.LOG2E	以2为底e的对数
Math.LOG10E	以10为底e的对数
Math.PI	π的值
Math.SQRT1_2	1/2的平方根
Math.SQRT2	2的平方根
min()	求一组数中的最小值
max()	求一组数中的最大值
Math.ceil ()	将数值向上舍入为最接近的整数
Math.floor()	将数值向下舍入为最接近的整数
Math.round()	将数值四舍五入为最接近的整数
random()	返回>0且<1之间的随机数
Math.abs(num)	返回num的绝对值
Math.exp(num)	返回Math.E的num次幂
Math.log(num)	返回numde自然对数
Math.pow(num,power)	返回num的power次幂
Math.sqrt(num)	返回num的平方根
Math.acos(x)	返回x的反余弦值
Math.asin(x)	返回x的反正弦值
Math.atan(x)	返回x的反正切值
Math.atan2(y,x)	返回y/x的反正切值
Math.cos(x)	返回x的余弦值
Math.sin(x)	返回x的正弦值
Math.tan(x)	返回x的正切值

第十五章、面向对象与原型

1.开发模式：EMCAScript程序设计有面向过程（函数式）和面向对象两种方式。但js中没有类的概念，因此他的对象与基于类的语言中的对象有所不同。

2.工厂模式创建对象：是一种创建对象的方法，是为了解决重复实例化相似对象产生大量代码的问题而使用的。

例如：创建对象，并给对象创建属性和方法：

Var box=new Object();

box.name=’Lee’;

box.run=function (){ return 0; }

以上方式是创建对象的基本方法，但是若想创建多个类似的对象，就会产生大量的代码。使用以下方式可以解决重复实例化的问题：

function createObject(name,age) //使用工厂模式创建对象

{ var obj=new Object();

obj.name=name;

obj.age=age;

obj.run=function(){ return 0;}

return obj; //返回obj对象给调用者

}

Var box1= createObject(‘Lee’,26); //调用函数创建第一个实例

Var box2= createObject(‘Jack’,32); //调用函数创建第二个实例

3.用构造方法创建对象：工厂模式解决了代码重复问题，但是无法区分创建的实例到底是哪个对象的实例，因此我们可以使用另一种创建对象的方式，使用构造函数创建对象：

function Box(name,age) //使用构造函数模式创建对象

{ Box.name=name;

Box.age=age;

Box.run= function(){ return 0;}

}

Var box1=new Box(‘Lee’,26); //使用 new运算符new Box()

Var box1=new Box(‘Jack’,32);

4.使用构造函数的方式既解决了重复实例化的问题，又解决了对象识别问题，但构造函数内部并没有使用new Object(),那为何还可以实例化对象？

答：使用构造函数的方式和使用工厂模式的方式不同：构造函数没有显示地创建对象（new Object()），而是在调用构造函数时自动执行new Object()，直接将属性和方法赋值给this（代表新创建的对象），最后直接返回对象，不需用return返回。

5.使用构造函数的规范：

A. 函数名和实例化构造名相同（推荐使用大写，有助于区分构造函数和普通函数）。

B. 通过构造函数创建对象必须使用new运算符（普通函数不用new调用）。

6.通过构造函数创建对象的过程：

A. 当使用“new 构造函数名()”方式创建对象时，后台会自动执行new Object()。

B. 将构造函数的作用域给新对象（即new Object()创建的对象），而函数体内的this就代表该新对象。

C. 执行构造函数内的代码创建新对象属性。

D. 返回新对象（后台直接反回，不需要return语句）。

7. 构造函数与普通函数的区别：调用方式不同，构造函数必须使用new运算符来调用，否则就会变为普通函数。

8. 对象冒充函数：A.call(B, 参数列表 ) //用B对象冒充A对象。

9. 函数原型：我们创建的每个函数都有一个prototype属性，该属性是一个对象，它的作用是包含“由特定类型的所有实例共享的属性和方法”。使用原型的好处是可以让所有对象实例共享它包含属性和方法（也就是说，不必在构造函数中定义对象的属性和方法，而是可以直接把这些信息添加到原型中）。

10. 实例方法和属性与原型方法和属性：实例方法和属性是指在构造函数体内定义的，原型方法和属性是指在prototype对象下（构造函数.prototype.属性或方法）的属性和方法，实例会共享原型方法和属性。

11.判断对象是否指向该构造函数的原型对象：构造函数名.prototype.isPrototypeOf（对象）

12.原型模式调用属性和方法的执行过程：

A.优先查找实例属性和方法，如果有，立刻返回。

B.如果实例里没有属性和方法，则去原型对象里找，如果有，就返回。

13.判断属性是实例属性还是原型属性：构造函数名.hasOwnProperty(属性) //实例里返回true，否则返回false。

14.使用字面量表达式创建原型：

function Box(){}; //没有为它创建实例方法和属性，即为原型模式

Box.prototype= { //使用字面量为它创建原型属性和方法

name:’Lee’,

age:26,

run: function(){return 0;}

}

15.原型模式创建对象的优缺点：省略了构造函数传参数这一过程，它带来的缺点是初始化的值都是一致的，优点是实现共享。

16.继承：ECMAScript与其他正统面向对象的语言不一样，它只支持继承，不支持接口实现，而继承的方式是依靠原型链完成（将父类实例化后的对象实例赋值给子类的原型属性）。

function Box () { this.name=’Lee’ } //被继承的函数，超类型（父类）

function Desk () { this.age=28 } //继承的函数，子类型（子类）

Desk.prototype = new Box(); //父类实例对象赋值给子类原型属性（父类的全部给子类）

desk=new Desk(); //创建子类的对象

alert(desk.name ) ; //输出有效，name属性已被继承

17.引用共享和超类型无法传递参数，因此就算继承了方法也没办法共享。我们为此可以采用一种叫“借用构造函数”的技术或者使用“对象冒充”的方法（解决传参问题）来解决这两种问题。原型链+借用构造函数的模式（组合继承）可以解决传参和方法共享问题。

第十六章、匿名函数和闭包

1.匿名函数：没有名字的函数。

2.闭包：是指有权访问另一个函数作用域中变量的函数（创建闭包常用的方式就是在函数内部创建另一个函数，可以通过另一个函数来访问这个函数的局部变量）。使用闭包可以把局部变量驻留在内存中，避免使用全局变量（全局变量污染会导致应用程序不可预测性，每个模块都有不同人员开发，推荐使用封装的、私有的局部变量）。

3.匿名函数的声明：与普通函数一样，只是匿名函数没有函数名称。

function () {代码块} //没有函数名，单独的匿名函数是无法运行的。

4.匿名函数的自我执行：（匿名函数）（）; //如有参数，就放在第二个括号内。

{ function (){ return 0; } )(); //第一个括号包含包含匿名函数，第二个括号表示执行。

5.匿名函数赋值给变量与匿名函数的返回值赋值给变量：

function () { return 0;} //声明匿名函数

var box= function () { return 0;} ; //把匿名函数赋值给变量

var box= ( function () { return 0;} ) (); //把匿名函数自我执行后的返回值赋给变量

6.使用闭包注意：由于闭包里的作用域返回的局部变量资源不会被立刻销毁，所以可能会占用更多的内存，过度使用闭包会导致性能下降，建议在非常有必要时才使用闭包。作用域链机制会导致循环里的匿名函数取得的任何变量都是最后一个值。可以给变量赋null值解除引用等待垃圾回收。

7.this对象在闭包中的问题：this在运行时是基于函数的执行环境绑定的，如果this在全局范围就表示window，在对象内部就指向这个对象，而在闭包中this是指向window的，因为闭包不属于这个对象的属性和方法（闭包模拟的是全局环境）。

8.内存泄漏：由于IE的js对象和DOM对象使用不同的垃圾收集方式，因此闭包在IE中会导致内存泄漏问题，也就是无法销毁驻留在内存中的元素。这时，需要使用赋null来解除引用才能消毁，否则需要关闭浏览器才能销毁。

9.模仿块级作用域：js中没有块级作用域的概念，块级作用域指由for等流程语句的{}限定的范围，例如：

function box(){

for (var i=0;i<5;i++){ //块级作用域（js没有这个东西）

}

var i; //就算重新声明也不会改变之前的数据

}

我们可以将语句放入自我执行的匿名函数就可以模仿块级作用域：

function box(){

(function(){

for (var i=0;i<5;i++){ })(); //运行到这里后，i就被销毁了

var i; //将语句放入匿名函数中后，这里的i就与for里面的i没任何关系了

10.私有变量：js中没有私有属性的概念，所有的对象都是公有的，但却有私有变量的概念，任何定义在函数中的变量都是私有变量，函数外部是不能访问的（但可以利用闭包访问，或创建私有变量的公有方法）。

第十七章、BOM（浏览器对象模型）

1.windo对象：js中最顶层的对象。他有六大属性（document、frames、history、location、navigator、screen），document对象又包含五大属性（anchors、forms、images、links、location），这些属性都是对象，window和document下的location是一样的。

2.window下的属性和和方法调用：window.属性或方法、直接属性或方法（若是某个浏览器独有的属性或方法，那么其他浏览器可能不识别，会把它当变量来使用，则此时需用“window.属性或方法”来强制使用）。

3.系统对话框：浏览器通过alert()、confirm()、prompt()方法可以调用系统对话框向用户显示信息。系统对话框与浏览器显示的网页没有关系，也不包含HTML。

alert(‘提示字符串’); //弹出警告信息

confirm(‘提示字符串’); //确定和取消，返回true和false

prompt(参数1,参数2); //输入提示框，参数1是说明，参数2是默认值，返回输入的值

print(); //调出打印窗口

find(); //调出查找窗口

defaultstatus=”状态栏默认文本”; //浏览器状态栏初始默认值

status=”状态栏文本”; //浏览器状态栏设置值

4.新建窗口：使用window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口，他可以接收4个参数：要加载的URL地址、窗口的名称或目标、特性字符串、一个表示新页面是否取代浏览器记录中当前加载页的布尔值。

open(‘heep://www.baidu.com’); //新建窗口并打开百度

open(‘heep://www.baidu.com’,’baidu’); //新建窗口并命名窗口,并打开百度

open(‘heep://www.baidu.com’,’_parent’); //在本页窗口打开百度

open(‘heep://www.baidu.com’,’_blank’); //新建窗口并打开百度

5.新建窗口open()第三个参数特性字符串：窗口配置功能

设置	值	说明
widh	数值	新窗口宽度，不能小于100
height	数值	新窗口高度，不能小于100
top	数值	新窗口y坐标，不能是负值
left	数值	新窗口x坐标，不能是负值
location	yes或no	是否显示地址栏，不同浏览器默认值不同
Menubar	yes或no	是否显示菜单栏，默认为no

6.默认情况下，alert()是指window.alert(),表示父窗口，而open()返回的是子窗口的window对象，表示子窗口弹出。所以若在子窗口中使用了alert()弹出窗口，则要想关闭子窗口，需先要关闭弹出窗口。

var box =open(‘http://www.baidu.com’,’baidu’,’width=400,height=400,top=100,left=100’);

box.alert(‘弹出窗口’); //由open打开的子窗口弹出窗口

7.opener表示子窗口对应的父窗口： window.opener.属性（父窗口属性，window可以省略）。

8.窗口位置和大小：用于确定和修改window对象位置的属性和方法有很多，IE、Safari、Opera、Chrome都提供了screenLeft属性和screenTop属性，分别表示表示窗口相对于屏幕左边和上边的位置。Firefox则使用screenX和screenY属性来表示。

9.页面位置和大小：Firefox、Safari、Opera、Chrome都提供了4个属性（innerWidth和innerHeight用于返回浏览器窗口本身的尺寸，outerWidth和outerHeight用于返回浏览器窗口本身及边框的尺寸）。

10.间歇调用和超时调用：js中可以通过设置间歇值和超时值来调度代码在特定的时刻执行。超时调用使用window对象的setTimeout()方法，它接收两个参数（要执行的代码和毫秒数超时时间），可以使用clearTimeout()方法（接收的参数为setTimeout()返回的数值ID）取消尚未执行的超时调用计划。间歇调用与超时调用类似，使用setInterval()方法，它接收两个参数（要执行的代码和时间间隔），可以使用clearInterval()取消间歇调用。

setTimeout(‘alert(‘LEE’)’,1000); //会返回一个数值Id，表示超时调用

var box= setTimeout(‘alert(‘LEE’)’,1000); //把返回id赋给box

clearTimeout(box); //根据ID取消超时调用

11.location对象：提供与当前窗口中加载的文档有关的信息，还提供了一些导航功能。

属性	描述的URL内容
hash	如果该部分存在，表示锚点部分
host	主机名：端口号
hostname	主机名

12.hitory对象：保存上网记录，从窗口被打开开始记录，length属性用于保存记录数，back()用于后退到上一记录，forward()用于前进到下一记录， go （num）用于跳到指定记录（num=—N表示后退N条，num=N表示前进N条）。

13.window对象的属性：

closed	当窗口关闭时为true
defaultStatus	窗口底部状态栏显示的默认值
document	窗口中当前显示的文档对象
frames	窗口中的框架对象数组
history	保存窗口最近加载的URL
length	窗口中的框架数
location	当前窗口的URL
name	窗口名
offscreenbuffering	用于绘制新窗口内容并在完成后复制已存在的内容，控制屏幕更新
opener	打开当前窗口的窗口（即当前窗口的父窗口）
parent	指向包含另一个窗口的窗口
screen	显示屏幕相关信息（如高度、宽度等）
self	指示当前窗口
status	描述由用户交互导致的状态栏临时信息
top	包含特定窗口的最顶层窗口
window	指示当前窗口，与self等效

第十八章、浏览器检测

1.每个浏览器都有自己独特的扩展，所以在开发阶段来判断浏览器是一个非常重要的步骤，虽然浏览器开发商在公共接口方面努力去支持常用的公共功能，但现实中，浏览器之间的差异和‘怪癖’却是非常多的，因此客服端检测是一种补救措施。

2.navigator对象：专用于识别客户端浏览器的对象。

3.浏览器嗅探器：是一段程序，有了它，浏览器检测就简单多了。这里提供一个browserdetect.js文件，用于判断浏览器名称、版本号及操作系统。

4.插件检测：插件是一类特殊的程序，它可以扩展浏览器功能。navigator对象的plugins属性，是一个数组，用于存储在浏览器中已安装的插件列表。

5. AactiveX：IE没有插件，但提供了ActiveX控件，是一种在web网页中嵌入对象或组件的方法。

6.客户端检测：能力检测、怪癖检测、用户代理检测。

第十九章、DOM基础（文档对象模型）

1.DOM介绍：DOM描绘了一个层次化的节点树，针对HTML和XML文档的API。

2.节点：加载HTML页面时，web浏览器生成一个树形结构，用来表示页面的内部结构，DOM将这种树形结构理解为由节点构成，我们把标签当作节点或元素。

3.节点分类：元素节点（标签）、文本节点（标签的内容）、属性节点（标签的属性）。

4.查找元素：w3c提供了定位节点的方法和属性，用于快速的对节点进行操作。

方法和属性	说明
getElementById()	获取特定ID元素的节点
getElementsByTagName()	获取相同元素的节点列表
getElementsByName()	获取相同名称的节点列表
getAttribute()	获取特定元素节点的属性值
setAttribute()	设置特定元素节点的属性值
removeAttribute()	移除特定元素节点的属性
tagName	获取或设置元素节点的标签名称
InnerHTML	获取或设置元素节点的内容

5.HTML的属性：

id	元素节点的id名称
title	元素节点的title属性
style	Css内联样式属性值
className	Css元素的类

6.节点属性：三个有用的属性nodeNme、nodeType、nodeValue。

节点类型	nodeName	nodeType	nodeValue
元素节点	元素名称	1	null
属性节点	属性名称	2	属性值
文本节点	#text	3	文本内容（不包含html）

7.节点的层次结构：可以划分为父节点、子节点、兄弟节点，当我们获取其中一个元素节点的时候，就可以使用层次节点属性来获取与他相关的层次节点。

属性	说明
childNode	获取当前元素节点的所有子节点
firstChild	获取当前元素节点的第一个子节点
lastChild	获取当前元素节点的最后一个子节点
ownerDocument	获取该节点的文档根节点，相当于document
parentNde	获取当前节点的父节点
previousSibing	获取当前节点的前一个同级节点
nextSibling	获取当前节点的后一个同级节点
atttributes	获取当前元素节点的所有属性节点集合

8.节点操作：DOM不仅可以进行查找，还可以进行创建、复制、插入、删除、替换等操作。

方法	说明
write()	该方法可以把任意字符串插入到文档中
createElement()	创建一个元素节点
appendChild()	将新节点追加到子节点列表的末尾
creatTextNode()	创建一个文本节点
insertBefore()	将新节点插入到前面
replaceChild()	将新节点替换旧节点
cloneNode()	复制节点
removechild()	移除节点

第二十章、DOM进阶

1.DOM类型：

类型名	说明
Node	表示所有类型值得统一接口，IE不支持
Document	表示文档类型
Element	表示元素节点类型
Text	表示文本节点类型
Comment	表示文档中的注释类型
CDATASection	表示CDATA区域类型
DocumentType	表示文档声明类型
DocumentFragment	表示文档片段类型
Attr	表示属性节点类型

2.Node类型：Node接口定义了12个数值常量以表示每个节点的类型值，除IE外的浏览器都支持该类型。

常量名	说明	Nodetype值
ELEMENT_NODE	元素	1
ATTRIBUTE_NODE	属性	2
TEXT_NODE	文本	3
CDATA_SECTION_NODE	CDATA	4
ENTITY_REFERENCE_NODE	实体参考	5
ENTITY_NODE	实体	6
PROCESSING_INSTRUCETION_NODE	处理指令	7
COMMENT_NODE	注释	8
DOCUMENT_NODE	文档根	9
DOCUMENT_TYPE_NODE	doctype	10
DOCUMENT_FRAGMENT_NODE	文档片段	11
NOTATION_NODE	符号	12

3.Document类型：表示文档或文档的根节点，这个节点是隐藏的，没有具体的元素标签。

4.Element类型：用于表示HTML中的元素节点。元素节点在非IE浏览器中可以反回他具体的元素节点的对象类型。

元素名	元素对应类型
HTML	HTMLHtmlElement
DIV	HTMLDivElement
BODY	HTMLBodyElement
P	HTMLParamElement

5.Text类型：表示文本节点类型，文本不包含HTML或转义后的HTML，文本节点的nodeType为3。

6.Comment类型：表示文档中的注释，nodeTyoe为8。

7.Attr类型：表示文档元素中的属性，nodeType为11。

第二十一章、DOM操作表格及样式

1.操作表格：<table>标签是HTML中结构最为复杂的一个，我们可以通过DOM来创建它，或者HTML DOM来操作它。

window.onload= function() { //窗体加载时执行匿名函数创建标签

var table= document.createElement(‘table’);

table.width=100;table.border=2;

var caption=document.createElement(‘caption’);

table.appendChild(caption);

var captionText=document.createTextNode(‘人员表’);

caption.appendChild(captionText);

var thead=document.createElement(‘thead’);

table.appendChild(thead);

var tr=document.createElement(‘tr’);

thead.appendChild(tr);

var th=document.createElement(‘th’);

tr.appendChild(th);

th.appendChild(document.createTextNode(‘数据1’));

th.appendChild(document.createTextNode(‘数据2’));

document.body.appendChild(table);

}

2.使用HTML DOM创建标签元素，提供的一些常用方法和属性：

caption	保存着<caption>元素的引用
tBodies	保存着<tbod>元素的HTMLCollection集合
tFood	保存着<tfood>元素的引用
tHead	保存着<thead>元素的引用
rows	保存着对<tr>元素的HTMLCollection集合
createTHead()	创建<thead>元素，并返回引用
createTFoot()	创建<tfoot>元素，并返回引用
createCaption()	创建<caption>元素，并返回引用
deleteTHead()	删除<thead>元素
deleteTFoot()	删除<tfoot>元素
deleteCaption()	删除<caption>元素
deleteRow()	删除指定的行
insertRow()	向rows集合中的指定位置插入一行

3.表格的格式：

<table> //表标签

<caption>表格标题</caption> //表标题标签

<thead> //表头标签（主要放标题单元格，通常只有一个）

<tr> //行标签（表头中一般只有一行）

<th> 标题1 </th> //列标签（th标签与td标签差不多，th只是多了居中和加粗）

</tr>

</thead>

<tbody> //表体标签

<tr> //行标签（表体中通常有多个行标签）

<td> 列1 </td> //列标签（一行中通常有多个列标签）

</tr>

</tbody>

<tfoot> //表尾标签（通常只能有一个表尾）

<tr> //行标签（表尾通常只能有一个行标签）

<td> 表尾列</td> //列标签

</tr>

</tfoot>

</table>

4.<tbody>元素的属性和方法：

rows	保存<tbody>元素中行的HTMLConnection集合
deleteRow()	删除指定位置的行
insertRow()	向rows集合中的指定位置插入行，并返回引用

5.<tr>元素的属性和方法：

cells	保存着<tr>元素中列的HTMLConnection集合
deleteCell()	删除指定位置的列（即单元格）
insertCell()	向cells集合中的指定位置插入单元格，并返回引用

6.检测浏览器支持：CSS可以增强页面的显示效果，但并非任何浏览器都支持最新CSS。所以在使用DOM操作样式的时候我们有必要先检测浏览器的支持能力（可以使用hasFeature()）

7.使用样式：有三种方式（行内样式、内联样式、链接样式），任何HTML元素都有一个style属性，它返回CSSStyleDeclaration对象。常用CSS属性及js调用格式：

color	style.color
font-size	style.fontSize
float	style.cssFloat（非IE）、style.styleFloat（IE）

8.DOM2级样式规范为style定义的一些属性和方法：

cssText	访问或设置style中的代码
length	CSS属性的数量
parentRule	CSS信息的CSSRule对象
getPropertyCSSValue(name)	返回包含给定属性值的CSSSValue对象
getPropertyPriority(name)	如果设置了!important则返回，否则返回空字符串
item(index)	返回值定位置的属性名称
removeProperty()	从样式中删除制指定属性
setproperty(name,v,p)	给属性设置相应的值，并加上优先权

9.样式属性和方法：

第二十二章、DOM元素尺寸和位置

1.通过内联获取元素CSS大小：

Var box=document.getElementById(‘box’); //获取元素

box.style.width; //200px 、null

2. 通过计算获取元素大小：

Var style=window.getcomputedstyle？window.getcomputedstyle(box,null) ：null||box.currentStyle;

Style.width; //1424px、200px、auto

3.通过CSSStyleSheet对象中的cssRules或rules属性获取元素大小：

Var sheet=document.styleSheets[0]; //获取link或style

Var rule=(sheet.csssRules||sheet.rules)[0]; //获取第一条规则

rule.style.width; //200px 、null

4.通过clientWidth和clientHeight获取元素可视区大小：

box.clientWidth;

box.clientHeigth;

5.通过scrollWidth和scrollHeigth获取滚动内容的元素大小：

box.scorllHeigth;

6.通过offsetWidth和offsetHeigth获取元素包括边框、内边距和滚动条的大小。

7.通过clientLeft和clientTop获取元素周边大小。

（本节获取元素大小的属性很多，具体看视频）

第二十三章、动态加载脚本和样式

1.当网站需求变大，脚本的需求也变大，我们就需要引入太多的脚本，从而会降低整体性能，所以我们可以使用DOM动态地使用脚本。

2.样式表也可以动态加载。

第二十四章、事件入门

1.事件介绍：事件是由访问web页面的用户引起的一系列操作，js有三种事件模型（内联模型、脚本模型、DOM2模型）。

2.内联模型：事件处理函数是HTML标签的一个属性，用于处理指定事件。

3.脚本模型：由于内联模型违反了HTML与js代码层次分离的原则，为此我们可以在js代码中处理事件，这种方式就叫脚本模型。

Var input =document.getElementByTagName(‘input’)[0]; //获取第一个input对象

Input.onclick = function(){alert(‘Lee’);}; // onclick事件执行匿名函数

Input.ondbclick=box ; //把函数名赋值给事件时不要加括号

4.事件处理函数：

处理函数	影响的元素	何时发生
onabort	图像	图像加载被中断时
onblur	窗口、框架、所有表单对象	焦点从对象上已开时
onchange	输入框、选择框、文本区域	改变元素的值且失去焦点时
onclick	链接、按钮、表单对象、图像映射区	单击对象时
ondbclick	链接、按钮、表单对象	双击对象时
ondragdrop	窗口	用户将对象拖放到浏览器窗口时
onError	脚本	脚本发生语法错误时
onfocus	窗口、框架、所有表单对象	获得鼠标焦点时
onkeydown	文档、图像、链接、表单	按键被按下时
onkeypress	文档、图像、链接、表单	按键按下然后松开时
onkeyup	文档、图像、链接、表单	按键被松开时
onload	主体、框架、图像	文档或图像被加载时
onunload	主体、框架集	文档或框架集被卸载时
onmouseout	链接	鼠标移除链接时
onmouseover	链接	鼠标移到链接时
onmove	窗口	浏览器窗口移动时
onreset	表单复位按钮	单击表单reset按钮时
onresize	窗口	改变窗口大小时
onselect	表单元素	选择表单元素时
onsubmit	表单	提交表单给服务器时
onscroll	滚动条	滚动带滚动条的元素时

5.事件的触发方式和范围：每个事件都有自己的触发方式和范围，如果超出，事件处理将失效。

A.鼠标事件：页面所有元素都可触发

B.键盘事件：keydown由键盘上任意键按下触发，按住不放会重复触发。Kepress由键盘上字符键按下触发，按住不放会重复触发。Keyup由任意键释放触发。

第二十五章、事件对象

1.事件对象：一般称为event对象，当触发某个事件时会产生事件对象，这个对象包含着所有与事件有关的信息。浏览器在执行事件处理函数绑定的函数时，浏览器会默认传递给这个函数一个隐藏参数（不可见，但存在），该参数就是事件对象。

2.事件处理由三部分组成（对象、事件处理函数、函数）。

document.onclick =function() {alert(‘Lee’)}

注意： document是绑定的对象，onclick是事件处理函数（或叫绑定对象的属性、侦听器），function()是事件被触发后执行的函数。

3.鼠标事件：对于mousedown和mouseup事件来说，在其event对象中存在一个buttom属性用于表示按下或释放。

W3C中的buttom属性

buttom值	说明
0	表示鼠标左键
1	表示鼠标中键
2	表示鼠标右键

IE中的buttom属性

buttom值	说明
0	没有按下按钮
1	按下鼠标左键
2	按下鼠标右键
3	同时按下左右键
4	按下鼠标中键
5	同时按下左中键
6	同时按下右中键
7	同时按下左中右三键

4.可视区和屏幕坐标：事件对象提供了两组获取浏览器坐标的属性

属性	说明
client	可视区X坐标，距离左边框的位置
client	可视区Y坐标，距离上边框的位置
screen	屏幕区X坐标，距离左屏幕的位置
screen	屏幕区Y坐标，距离上屏幕的位置

5.修改建：shift、ctrl、alt、windows键常用于配合鼠标触发特殊事件，修改鼠标行为和事件，因此叫修改键。

修改键属性	说明
shiftKey	判断是否按下了shift键
ctrlKey	判断是否按下了ctrl键
altKey	判断是否按下了alt键
metaKey	判断是否按下了windows键，IE不支持

6.键码：在发生keydown和keyup事件时，event对象的keyCode属性会包含一个代码，与键盘上一个特定的键对应。

7.W3C中event对象的属性和方法：

8.IE中的event事件和方法：

9.事件流：事件流描述从页面接受事件的顺序，当几个具有事件的元素层叠在一起的时候，单击其中一个元素时，并非只是当前被点击的元素会触发事件，而是层叠在点击范围内的所有元素都会触发事件。事件流包括两种模式（冒泡、捕获）。事件冒泡是指从里往外逐个触发，事件捕获是指从外往里逐个触发。

第二十六章、事件绑定及深入

1.事件绑定分为两种：传统事件绑定、现代事件绑定。

2.传统事件绑定的缺点：传统事件绑定有内联模型和脚本模型，脚本模型就是讲一个函数赋值给一个事件处理函数。但有以下几个缺点：

A.一个事件处理函数触发两次事件时，后一个事件会覆盖前一个事件，导致前一个事件失效：

window.onload=function(){alert(‘1’);}; //事件1

window.onload=function(){alert(‘2’);}; //事件2，事件1会被事件2覆盖

B.事件切换器问题（看视频）

3.为了解决传统的覆盖问题、可读性问题、this传递问题，我们可以创建一个自定义事件处理函数来处理以上问题。

4.使用事件切换器不停地切换事件的时候，浏览器会卡死并报错（too much recursion太多的递归），因为积累了太多的事件，我们需要移除用完的事件。

5.W3C事件处理函数：DOM2级事件定义了addEventListener()和removeEventListener()方法，用于添加事件和删除事件处理处理程序。他们接受3个参数（事件名、函数、布尔值（true表示捕获，false冒泡））。W3C现代事件绑定有几个好处：不要自定义、可以屏蔽相同的函数、可以设置冒泡或捕获。

window.addEventListener(‘load’,’function(){return 0;}’,’false’);

6.IE事件处理函数：ie实现了与DOM中类似的两个方法attachEvent()和detachEvent()，他们都有两个参数：事件名称、函数（IE不支持捕获只支持冒泡，IE添加事件不能屏蔽相同函数）。

window.attachEvent(‘onload’,’function(){return 0;}’);

7.W3C中提供了一个relatedTarget属性，可以用于在onmouseover和onmouseout事件中获取从哪里移除和从哪里移入的DOM对象。

第二十七章、表单处理

1.表单介绍：在HTML中，表但是由,<form>元素来表示的，而在js中表单对应的是HTMLFormElement类型。HTMLFormElement类型继承了HTMLElement，因此他拥有HTML元素的默认熟悉，而且还有自己的属性和方法：

属性和方法	说明
acceptCharset	服务器能够处理的字符集
action	接受请求的URL
elements	表单中所有控件的集合
enctype	请求的编码类型
length	表单中所有控件的数量
name	表单的名称
target	用发送请求和接受响应的窗口名称
reset()	将所有的表单重置
submit()	提交表单

2.获取表单对象：有多种方式可以获取表单<form>对象,如下：

document.getElementById(‘myForm’); //通过ID获取

document.getElementByTagName(‘form’)[0]; //获取第一个表单对象

document.forms[0]; //通过属性调用方式使用索引获取第一个表单对象

document.forms[‘yourForm’]; //通过属性调用方式使用表单名称获取表单对象

document.yourForm; //直接通过name属性获取表单对象

3.表单提交：通过事件对象，可以对象可以阻止submit的默认行为，也可以使用submit()方法自定义触发submit事件（也就是说不使用submit按钮也可以提交），submit事件的默认行为就是携带数据跳转到指定页面。

AddEvent(fm,’submit’,function(evt){preDef(evt);}); //触发submit事件时阻止默认行为

4.普通按钮是不能提交表单的，但可以为普通按钮添加submit事件，实现submit按钮的功能。

5. 把submit事件注册到input中的submit按钮是无法触发submit事件的，必须把submit事件绑定到form对象上（form.submit();），才能触发submit事件，只不过触发submit事件的流程是点击input元素中的submit按钮而已。

6.表单提交常见问题：因为各种原因可能导致重复提交表单，解决重复提交有两种方法，一是提交后立刻禁用提交按钮，二是提交后取消后续的表单提交操作。

7.共有的表单字段属性：除了<fiedset>元素外，所有的表单字段都拥有相同的一组属性。由于<input>类型可以表示多种表单字段，因此有些属性只适用于某些字段，以下是共有的属性：

属性和方法	说明
disabled	布尔值，表示当前字段是否被禁用
form	指向当前字段所属表单的指针，只读
name	当前字段的名称
readOnly	布尔值，表示字段是否只读
tabIndex	表示当前字段的切换
type	当前字段的类型
value	当前字段的值

8.除了<fieldset>字段外，所有的表单字段都有type属性。对于<input>元素，type值等于HTML属性的type值，对于非<input>元素，type的属性如下：

元素说明	HTML标签	type属性的值
单选列表	<select>.....</select>	select-one
多选列表	<select multiple>.....</select multiple>	select-multiple
自定义列表	<button>....</button>	button
自定义非提交按钮	<button type=’button’>...</button>	button
自定义重置按钮	<button type=’reset’>...</button>	reset
自定义提交按钮	<button type=’submit’>...</button>	submit

9.共有的表单字段方法：每个表单字段都有两个方法foucs()（将焦点定位到表单字段里）和blur()（将焦点从元素中移除）。

10.共有的表单字段事件：

事件名	说明
blur	当字段失去焦点时触发
change	对于input和textarea元素，当改变value并失去焦点时触发对于select元素，当改变选项时触发
focus	当字段获取焦点时触发

11.js提供了六组剪贴版相关事件：

事件名	说明
copy	发生复制操作时触发
cut	发生剪切操作时触发
paste	发生粘贴操作时触发
beforcopy	发生复制操作前触发
beforcut	发生剪切操作前触发
beforepaste	发生粘贴操作前触发

12.选择框脚本：选择框是通过<select>和<option>元素创建的，除了通用的属性和方法，HTMLSelectElement类型还提供了以下属性和方法：

add(new,rel)	插入新元素，并指定位置
multiple	布尔值，是否允许多项选择
options	<option>元素的HTMLColletion集合
remove(index)	移除给定位置的选项
selecteIndex	基于0的选中项的索引，若没有选中项则值为-1
size	选择框中可见的行数

13.在DOM中，每个<option>元素都有一个HTMLOptionElement对象，以便访问数据，这个对象有如下一些属性：

index’	当前选项在optio集合中的索引
label	当前选项的标签
selected	布尔值，表示当前选项是否被选中
text	选项的文本
value	选项的值

第二十八章、错误处理与调试

1.错误处理：使用try-catch语句，其中catch(e)中参数e为出错的对象，e对象有两个属性message和name，分别表示出错信息和名称。

try {可能出错的代码}

catch(e) { 若try中出错则跳到这里，执行这里的代码 }

2.finally字句：作为try-catch语句的可选语句，不管是否发生异常，都会执行该关键字后面的语句（就算try或catch里面包含return语句，也不会阻止finally执行）。

3.错误类型：执行代码可能发生的错误有多种，每种错误都有对应的类型，ECMA-262定义了7中错误类型（Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError），其中Error是基类型。

4.抛出错误：使用catch来处理错误信息，如果处理不了，我们就把它抛出（在浏览器显示错误信息），只不过错误信息可以自定义，更加精确和具体。

5.浏览器兼容报告：

6.浏览器消息控制台：可以用来查看js错误，console对象提供了几个方法用于向控制台记录消息：

error(message)	将错误消息记录到控制台
info(message)	将信息类消息记录到控制台
log(messsage)	将一般消息记录到控制台
warn(message)	将警告消息记录到控制台

第二十九章、cookie与存储

1. cookie的作用：在浏览器本地的磁盘上以很小的文件形式保存数据，比如存储用户登录信息等。

2. cookie的组成：由名/值对形式的文本组成，完整格式为：

name=value; [expires=过期时间]; [path=访问路径]; [domain=访问域名]; [secure]

[]中是可选项，name=value是必选项。expires表示cookie的失效时间，默认为关闭浏览器后失效（被浏览器自动清理）；path表示访问路径，当设置了路径后，那么只有设置的那个路径文件才能访问cookie；domain表示访问域名，用于限制只有设置的域名才能访问，默认限制为创建cookie的域名；secure用于安全设置，表明必须通过安全通道来传输（https）才能获取cookie。

3.创建或获取cookie：document.cookie=’name=value;’。

4.把cookie的创建和获取封装为函数，可以方便我们调用。

document.cookie=’use=zhang;’ //设置cookie

document.cookie=’emal=614716190@qq.com’; //设置cookie

function setCookie(name,value,expires,path,domain,secure) //封装设置cookie的函数

{ var cookieName=encodeURIComponent()+’=’+encodeURIComponent(value); //编码

...........相关的流程控制语句

}

5.cookie的局限性：cookie虽然在持久保存客服端用户数据提供了方便，分担了服务器的存储负担，但是有局限性（每个特定的域名下cookie数量有限、cookie大小一般不超过4K、cookie的安全性不高）。

6.web存储：js提供了sesssionStorage、localStorage和globalStorage用于web存储。

第三十章、XML

1.创建XMLDOM对象：

2.载入XML：如果已经获取了XMLDOM对象，则可以使用该对象的loadXML()和load()这两个方法分别载入XML字符串和XML文件。

xmlDom.loadXML(‘<root version=”1.0”><user>zhang</user></root>’); //加载XML文档字符串

cmlDom.load(‘text.xml’); //加载XML文件

3.操作XML：如果已经加载了XML，就可以使用之前学过的DOM对象来获取或创建XML数据，比如标签内的文本。

var user=xmlDom.getElementsByTagName(‘user’)[0]; //获取XML中<user>节点

4.同步和异步加载XML：load()是用于服务器端加载XML的，所谓同步就是指在加载XML完成之前代码不会继续执行，等到加载完了才返回。所谓异步就是指加载XML时，js会把任务丢给浏览器后台处理，边加载边返回。

xmlDom.async=false; //设置同步

xmlDom.async=true; //设置异步

5.判断异步时是否完全加载XML：

6.IE解析错误：在加载XML时，可能会遇到格式不正确的情况，为了解决这个问题，微软的XMLDOM对象提供了parseError属性用于反馈错误：

7.DOM2中的XML：IE可以实现对XML的读取，其他浏览器也各自实现了对XML的处理功能。DOM2级在document.implementation中引入了createDocument（）方法用于操作XML。

A.创建XMLDOM对象：

var xmlDom=document.implementtion.createDocument(‘’,’root’,null); //创建xmlDom

var user=xmlDom.createElement(‘user’); //使用DOM对象为其创建元素

xmlDom.getElementByTagName(‘root’)[0].appendChild(user); //添加user到root下

var value=xmlDom.createTextNode(‘zhang’); //创建文本节点

xmlDom.getElementByTagName(‘user’)[0].appendChild(value); //添加文本到user下

B.createDocument()需要传递三个参数（命名空间、根标签、文档声明），js管理命名空间比较困难，命名空间留空即可，文档声明一般用不到，直接传null即可。

8.DOMParser类型：由于DOM2中没有loadXML()方法，所以提供了DOMParser类型来创建XMLDOM对象，IE9、safari、Chrome、Opera等都支持这个类型.

var xmlParser= new DOMParser(); //创建DOMParser对象

var xmlStr=’<root><user>zhang</user></root>’; //创建字符串

var xmlDom= xmlParser.parseFromString(xmlStr,’text/xml’); //创建XMLDOM对象

parseFromString()方法有两个参数： XML字符串、内容类型text/xml。

9.XMLSerializer类型：该类型用于帮助序列化XML字符串。

var seralizer= new XMLSerializer(); //创建XMLSerializer对象

var xml= serializer.serializeToString(xmlDom); //序列化XML

10.DOM2级解析错误：DOM2在处理XML发生错误时，并没有相应的对象来捕获错误，而是直接生成另一个错误的XML文档，通过该文档可以获取错误信息。

11.跨浏览器处理XML：

第三十一章、XPath

1.XPath是一种节点查找手段，对比之前的标准DOM去查找XML中的节点方式，大大降低了查找难度，方便开发者使用，但是DOM3Y以前的标准并没有对XPath做出规范，直到DOM3推荐出规范行列，大部分浏览器实现了这个标准，IE则是以自己的方式实现了XPath。

2.IE中的XPath

3.W3C中的XPath：在DOM3规范定义的类型中，最重要的两个类型是XPathEvaluator和XPathReault。其中XPathEvaluator用于在特定上下文对XPath表达式求值。

4.XPath详情请参考他的使用手册，这里不再赘述。

第三十二章、JSON

1.xml的结构化数据比较烦琐、冗长，为了解决这个问题，json的结构化数据出现了，json是js的一个严格的子集，利用js中的一些模式来表示数据结构。

2.JSON：json和xml类型都是一种结构化的数据表示方式，所以json并非是js独有的数据数据格式，其他很多语言都可以对json进行解析和序列化。

3.JSON语法：json可以表示三种类型的值（简单值、对象、数组），json本身就是一个字符串，所以任何表示都需要加引号。

JSON中对象的表示方法： ‘{ “属性” ：值 }’

JSON中数组的表示方法： ‘[100,”zhang”,true]’

4.一般情况下，我们可以把json结构数据保存在文本里，然后通过XMLTttpRequest对象去加载它。

5.json的解析和序列化：如果载入的是json文件，我们要使用就必须对其进行解析为原生的js值，ECMAScript5对解析JSON定义了全局对象JSON，该对象提供了两个方法stringgify()和parse()，前者将js值转换为JSON字符串，后者将JSON字符串转换为js原生值。

第三十三章、Ajax

1.Ajax：是Asynxhronous JavaScript+XML技术的简写，这种技术能够向服务器请求额外的数据而不需要刷新整个页面，给用户带来了更好的体验。

2.Ajax的技术核心：XMLHttpRequest对象提供了向服务器发送请求和解析服务器响应的接口。能够以异步的方式从服务器获取更多的信息，这意味着只要用户触发某一事件，在不刷新网页的情况下，就能够更新服务器最新的数据。

3.创建XMLHttpRequest对象： var xhr=new XMLHttpRequest();

4.在使用XMLHttpRequest对象时，必须先调用它的open()打开准备发送请求，他接受三个参数：发送的请求类型（get或post）、请求的URL、表示是否异步的布尔值。

var xhr=new XMLHttpRequest(); //实例化XMLHttpRequest对象

xhr.open(‘get’,’demo.php’,false); //启动请求准备发送，以get方式请求，url是 demo.php，false表示同步

xhr.send(null); //发送请求，该方法接受一个参数（请求主体发送的数据），若不需要则填null

5.当请求发送到服务器端，收到响应后，响应的数据会自动填充XMLHttpRequest对象的属性，然后就可以写代码操作这些返回的数据，XHR属性：

属性名	说明
responseText	作为响应主体被返回的文本
responseXML	如果响应主体内容类型是”text/xml”或”application/xml”，则返回包含响应数据的XMLDOM文档
status	响应的HTTP状态
statusText	HTTP状态说明

6.接受响应后，第一步检查status属性，以确定响应成功返回，下面是HTTP的状态代码：

HTTP状态码	状态字符串	说明
200	OK	服务器成功返回了页面
400	Bad Request	语法错误导致服务器不能识别
401	Unauthorized	请求需要用户认证
404	Not found	指定的 URL在服务器上找不到
500	Internal Server Error	服务器意外错误，无法完成请求
503	ServiceUnavailable	服务器过载或维护导致无法完成请求

7.同步调用方式简单，但我们经常需要使用异步调用，异步调用需要触发readystatechange事件，然后检测readyState属性，根据不同状态写不同代码：

值	状态	说明
0	未初始化	尚未调用open()方法
1	启动	已经调用open()方法，但未调用send()方法
2	发送	已经调用send()方法，但未接受响应
3	接受	已经开始接受响应数据
4	完成	已接受全部响应数据，并且可以使用

var xhr=new XMLHttpRequest(); //创建对象

xhr.onreadstatechange=funtion() //触发事件

{检测readystate属性，根据不同的状态写不同代码操作返回的数据}

xhr.open(‘get’,’demo.php’,true); //异步方式发送

8.GET和POST：请求的提交方式有两种，其中get方式是附在url尾部提交给服务器的，post方式是以表单的形式提交给服务器的。

demo.php?name=zhang&age=25 // get方式提交

<form method=’post’> //post方式提交

</form>

9.HTTP头信息：包含服务器返回的响应头信息和客户端发送的请求头信息，我们可以获取响应头信息或设置请求头信息。

xhr.getResponseHeader(‘Content-Type’); //获取单个响应头信息

xhr.getAllResponseHeaders(); //获取整个响应头信息

xhr.setRespnseHeader(‘my header’,’zhang’); //设置单个请求头信息，该方法放在open()之后，send()之前。

10.封装AJAX：ajax使用比较麻烦，主要是参数问题，比如到底使用get还是post，同步还是异步等等，因此我们可以自己封装一个Ajax函数，来方便我们使用。

第三十四章、封装库

1.理解javascript库：把各种常用的js代码组织起来存放在一个js文件中，形成一个包，这个包就叫js库。目前优秀的js库有jQuery、Prototype、Dojo、Extjs等等。本章节主要是讲解如何封装库。

2.创建基础库：我们可以创建一个基础库，然后再里面编写最常用的代码，最后不断地扩展封装。最常用的代码将在后续小节中封装。例如：

var Base = { //以对象的方式封装，整个库可以是一个对象

getId: function (id) { return document.getElementById (id);}, //方法尽可能简短而有含义

getName: function(name) { return document.getElementByName(name);},

};

function getId(){ return document.getElementById (id); } //以函数的方式封装

3.前台调用封装的js库：

window.onload = function(){ alert(Base.getId(“box”).innerHTML); }; //在onload事件中写代码

4.连缀操作：在调用库的时候，我们需要在前台调用的时候可以同时设置多个操作，我们可以封装库使他能够实现连缀调用（我们在此使用调用对象方法之后又返回对象的方式实现连缀）。

5.改写库对象：如果要想实现连缀操作，我们就需要改写前面的库封装方式，因为使用对象式的封装方法无法为其添加原型方法，所以后面采用函数式对象的写法。如下：

function Base() { this.getId = function( id ) { return.document.getElementById(id); }; }

//如果在函数体外为其添加方法，需要用Base.prototype.方法名 = function(){};方式添加

//在为其封装的方法中，需要使用return this 返回当前对象，才能实现连缀操作

// 此方式在调用时需要实例化Base对象，通过对象去调用，但我们可以把实例化代码也封装到库中。

6.在实现连缀调用的过程中，我们需要保存节点或者节点数组，因此在封装库对象中需要创建一个数组用来保存这些数据，而且需要循环处理，以便后续访问使用。

function Base(){

this.elements=[]; //创建数组来保存获取的节点或节点数组

this.getId=function(id){ //通过id获取节点

this.elements.push(document.getElementById(id));

return this;

}

this.getTagName=function(tag){ //通过标签名获取节点

var tags= document.getElementByTagName(tag); //保存获取到的节点数组

for (var i=0;i<tags.length;i++){

this.elements.push(tags[i]); //循环将节点添加到基础库节点数组中

}

return this;

}

this.css=function(attr,value){ //封装css方法，添加css样式

for(var i=0;i<this.elements.length;i++){

this.elements[I ].style[attr]=value;

}

return this;

}

this.html=function(str){ //封装html方法，添加标签内容

for(var i=0;i<this.elements.length;i++){

this.elements[I ].innerHTML=str;

}

return this;

}

this.click=function(fn){ //封装clickl方法，添加click事件方法

for(var i=0;i<this.elements.length;i++){

this.elements[I ].onclick=fn;

}

return this;

}

7.有时候，我们同时使用了多个封装的节点选择器，这样就会造成保存节点的数组中的节点累加，后面的操作会影响某些我们不想操作的节点，因此我们在前台调用库的时候，因该每次都重新实例化一个库对象，这样不同的库对象中就不会累积已经操作过的节点了。

var $= function(){ return new Base(); } //通过此句，用$调用Base库就可以解决上述的问题

8.在上面封装的的css方法和html方法中，都只是封装了设置css样式和添加元素内容的功能，我们还需要通过这两个方法获取css样式或获取元素内容，此时css方法就只需要一个属性名参数，html方法不需要参数。我们可以通过传递过来的参数个数来判断是获取还是设置，例如html()封装如下：

Base.prototype.html=function( str ){

for(var i=0;i<this.element.length;i++){

if(arguments.length==0){ return this.element[i].innerHTML; } //如果没有传参则返回内容

else{this.elements[i].innerHTML=str; } //如果传参则设置元素内容病返回对象

}

return this;

}

9.获取节点的方式有很多种，比如通过class、id、tagname等等，此处省略，此外在通过这些方式获取节点时，如果把this.elements放到外部，会导致实例化的this.elements公有化，因此这个数组必须放到Base库内部。

10.还可以封装样式移除等功能，这些基本方法不再讲述，具体参考jquery封装好的源码。

posted @ 2022-07-11 23:34 我若安好，便是晴天阅读(46) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

我若安好，便是晴天

Javascript基础

作者导言: 引用偶像刘德华的一句话 “学到的就要教人，赚到的就要给人”！

第二章、使用javascript语言

第三章、语法 关键字 保留字及变量

第四章、数据类型

第五章、运算符

第六章、流程控制语句

第七章、函数

第八章、数组和对象

第九章、时间与日期

第十章、正则表达式

第十一章、Function类型

第十二章、变量、作用域、内存

第十三章、基本包装类型

第十四章、内置对象

第十五章、面向对象与原型

第十六章、匿名函数和闭包

第十七章、BOM（浏览器对象模型）

第十八章、浏览器检测

第十九章、DOM基础（文档对象模型）

第二十章、DOM进阶

第二十一章、DOM操作表格及样式

第二十二章、DOM元素尺寸和位置

第二十三章、动态加载脚本和样式

第二十四章、事件入门

第二十五章、事件对象

第二十六章、事件绑定及深入

第二十七章、表单处理

第二十八章、错误处理与调试

第二十九章、cookie与存储

第三十章、XML

第三十一章、XPath

第三十二章、JSON

第三十三章、Ajax

第三十四章、封装库

第三章、语法关键字保留字及变量