初识JavaScript

JavaScript组成：

1.ECMAScript

js的核心语法标准

2.DOM（文档对象模型）

js操作html的api（api：封装的方法）

3.BOM（浏览器对象模型）

js操作浏览器的api

拓展：Ajax----XMLHttpRequest，用于在后台与服务器交换数据，基本特点：在不重新加载页面的情况下更新页面，局部刷新

JavaScript特点:

1.解释型语言，js->nodejs（js解释器）

2.弱类型语言，变量的数据类型取决于值的数据类型

3.顺序解释，自上而下

4.可为前端脚本语言，也可以是后端语言

在网页中使用JavaScript:

1.外部引入：

2.内部编写：

在body和head中使用JavaScript的区别

在head中的js在调用时才执行，在body中的js在页面加载时就被执行

因为浏览器解析html是从上到下的，如果把JavaScript放在head里的话，则先被解析，但这时候body还没有解析，所以会返回空值。一般都会绑定一个监听，当全部的html文档解析完之后再执行代码。

windows.onload = function(){
// 执行的代码
}

所以一般习惯将JavaScript放在body的最后面

打印结果语句：console.log（' '）;

在终端执行命令语句：node （js文件名）

注释：单行注释//，多行注释/* */

关键字：break,do,try,typeof,case,else,new,var,catch,finally,return,void,continue,for,switch,while,debugger,this,function,with,default,if,throw,instanceof,delete,in

关键字区分大小写

标识符：指变量，函数，属性的名字或者函数的参数

以下是组成规则：

1.字母，数字，下划线，$组成

2.只能以字母，下划线，$开头。

3.不能将关键字作为标识符。命名采用驼峰式命名

▲每个语句以分号结尾！！！

变量

变量是一个值的容器

变量的使用：

声明 var message;

初始化 message = "hello"

声明并初始化 var message = "hello";

定义多个变量 var message= "hello",found=false, age = 29;

变量名的命名规则：

1.变量名由字母，数字，下划线以及$组成。

2.不能使用下划线或者数字作为变量名的开头

3.使用驼峰命名规则

4.不能使用关键字或是保留字

var用于声明一个变量

（在es6中，可以通过let声明一个变量，通过const声明一个常量）

变量相关例子：

1.定义多个变量

2.变量重复声明

3.变量声明提升

（在所有代码执行之前，js解释器会将js中所有的var声明的变量提升）

4.var声明的变量的作用域

（1）var的变量声明提前只会提前到当前作用域的最前面

（2）如果在函数中定义变量没有加var，该变量为全局变量

（3）用var定义的变量将成为定义该变量的作用域中的局部变量

（4）

（5）

JavaScript基本数据类型：

值类型：String,Number,Boolean,Null,Undefined(es6新增：symbol）

引用数据类型：Object,Array,Function

String：

可以用length获取字符长度

Number：

科学计数法：

非数值：

NaN=not a number

判断一个数是不是 “不是数值”：

Null：

表示一个空对象

Undefined：

表示变量不含有值，未定义的。

null与undefined关系：undefined继承null

可以通过typeof判断一个变量的类型：

（对于引用类型，function只会返回function，其他都会返回object）

引用数据类型

Object:

创建对象：

通过点语法获取对象的属性：

Function:

创建一个函数：

基本数据类型的值存在栈，值与值之间独立存在，修改一个值不会影响其他变量

引用类型存放在栈时，值为对象的地址，赋值给其他引用类型是给地址，所以值变的时候，其他引用类型的值也跟着变

深拷贝与浅拷贝：

主要针对引用类型来说的，浅拷贝表示仅拷贝引用地址，深拷贝表示对于对象的克隆。

操作符及类型转换与流程控制语句

操作运算符

加号（+）

1.数据相加

2. 取正数

3.与字符串运算时，就是字符串连接符

4.可以将数字字符串或布尔类型等隐式转换成number类型

负号（-）

1.对数字进行取负

2.可以将字符串数字隐式转换成数字

取反（！）

经常被用作条件判断时的取反操作，类型判断等，还可以用'!'将变量转换为Boolean类型

！！a ==a，意为取反之后再取反

隐式转换

隐式转换有三种：

1.ToPrimitive (将值转为原始值）

2.ToNumber (将值转为数字）

3.ToString (将值转为字符串）

ToPrimitive

ToPrimitive(input, PreferredType?)

input是要转换的值，PreferredType是可选参数，仅可以是Number或String类型。他只是一个转换标志，转化后的结果并不一定是这个参数值的类型，但是转换结果一定是一个原始值（或者报错）。

对于Date求原始值比较特殊，PreferredType是String，其他Object对象均为Number。

基本类型的转换：

加：字符串+数字，数字就会转成字符串

减：数字-字符串，字符串转成数字(如果字符串不是纯数字，就会转成NaN)

乘除的转换和减的一样

==的隐式转换

引用类型的转换：

先把引用类型转成基本类型

PreferredType转换策略

如果PreferredType被标记为Number，则会进行下面的操作流程来转换输入的值。

1、如果输入的值已经是一个原始值，则直接返回它

2、否则，如果输入的值是一个对象，则调用该对象的valueOf()方法，如果valueOf()方法的返回值是一个原始值，则返回这个原始值。

3、否则，调用这个对象的toString()方法，如果toString()方法返回的是一个原始值，则返回这个原始值。

4、否则，抛出TypeError异常。

如果PreferredType被标记为String，则会进行下面的操作流程来转换输入的值。

1、如果输入的值已经是一个原始值，则直接返回它

2、否则，调用这个对象的toString()方法，如果toString()方法返回的是一个原始值，则返回这个原始值。

3、否则，如果输入的值是一个对象，则调用该对象的valueOf()方法，如果valueOf()方法的返回值是一个原始值，则返回这个原始值。

4、否则，抛出TypeError异常。

注意：

PreferredType的值会按照这样的规则来自动设置：

1、该对象为Date类型，则PreferredType被设置为String

2、否则，PreferredType被设置为Number

案例：

1.[]+[]

输出的结果为空字符串

进行ToPrimitive，两个都是Array对象，不是Date对象，所以以Number为转换标准，

先调用valueOf()，结果还是[ ]，不是原始值

继续调用toString()，结果是“”(空字符串)原始值，将“”返回。

第二个[ ]过程是相同的，返回“”。加号两边结果都是String类型，所以进行字符串拼接，结果是“”。

2.[]+{}

以Number转换标准进行ToPrimitive。

[ ]的结果是“”。

{ }先调用valueOf()，结果是{ }，不是原始值，所以继续调用toString()，结果是“[object Object]”,是原始值，将“[object Object]”返回。

加号两边结果都是String类型，所以进行字符串拼接，结果是“[object Object]”。

3.{}+[]

{} + [] // 0

{ } + [ ]被解析成了{ };+[ ]，前面是一个空代码块被略过，剩下+[ ]就成了一元运算。[ ]的原值是””，将””转化成Number结果是0。

4.{}+{}

比较运算符：

==，两边值类型不同的时候，要先进行类型转换为同一类型后，再比较值是否相等。

===，不做类型转换，类型不同的结果一定不等。

"=="表示只要值相等即可为真，而"==="则要求不仅值相等，而且也要求类型相同。

对于Array,Object等高级类型，双等和三等是没有区别的，因为是进行“指针地址”比较

!= 和 ==用法类似，比较若类型不同，先偿试转换类型，再作值比较

!== 和 === 用法类似，只有在相同类型下,才会比较其值。

非数值的情况下使用'>''<''>=''<='

如果符号两侧都是字符串，不会将其转换为数值进行比较，而会分别比较字符串中字符的Unicode编码。

而在比较字符编码时，是一位一位进行比较的，如果符号两侧第一位一样，则比较下一位

逻辑运算符

&&（同真才真，一假则假）

如果有一个操作数不是布尔类型，逻辑与就不一定返回boolean类型

当第一个表达式为真，整个表达式的结果取决于第二个表达式，返回第二个表达式

当第一个表达式为假，整个表达式的结果就可以确定，返回第一个表达式

[null,NaN,undefined,false,0,""]直接返回该操作数

||（有真则真，同假才假）

如果两个或多个操作数都是null,NaN,undefined,false,0,""可被转换为false的值的时候返回后面那个值。

如果第一个操作数是null,NaN,undefined,false,0,"" 则返回第二个操作数。

如果第一个操作数是真，直接返回第一个操作数。

当第一个表达式为假，整个表达式的结果取决于第二个表达式，返回第二个表达式

类型转换

1.转换为String（除了null和undefined）

如果变量为number类型，默认情况下toString()是以十进制格式返回数值的字符串表示，通过传递参数，可以输入以二进制，八进制，十六进制乃至任意有效进制格式的字符串值

任意其他数据与字符串相加都会转化为字符串

2.转为布尔类型

3.转为Number

转换值是Boolean，null，undefined

转换值是string类型

parseInt()函数

如果转换的值是null,undefined,boolean，均转换为NaN

如果转换的值是Number，整数值原样输出，如果是小数，舍去小数点后面的内容

如果转换的值是string

parseFloat()函数

如果转换的值是null,undefined,boolean，均转换为NaN

如果转换的值是Number，整数值原样输出，如果是小数，保留小数点，但是如果是10.0结果为10

如果转换的值是string

对象

对象的创建模式

1.字面量模式

2.构造函数模式

对象的访问

例如访问name属性：

obj.name
obj['name']

删除对象的自有属性

delete obj.pro
delete obj["proname"]

新增属性

obj.newpropname="value"

Object显示类型强制转换

object转为Boolean类型

数据类型	转换为true的值	转换为false的值
Boolean	true	false
String	任何非空的字符串	""(空字符串)
Number	任何非零数字(包括无穷大)	0和NaN
Object	任何对象	null
Undefined	无	undefined

object转string

object转number

1.如果只重写了valueOf()或者toString()方法，则调用该方法，并将返回值用Number()转换。
2.如果两个方法都重写了，则调用valueOf()，并将返回值用Number()转换。
3.如果两个方法都没有重写，则返回NaN

检测属性

1.in

检测某属性是否是某对象的自有属性或者是继承属性

2.Object.prototype.hasOwnProperty()

检测给定的属性是否是对象的自有属性，对于继承属性将返回false

3.Object.prototype.propertyIsEnumerable()

propertyIsEnumerable()是hasOwnProperty()的增强版，除了是自身属性外，还要求是可枚举属性，即我们创建的属性。

Object原型属性及方法(原型方法，实例可以调用的方法)

总结:每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，实例都包含一个指向原型对象的内部指针。

对象-定义属性

ECMAScript中有两种属性：数据属性、访问器属性。

这两种属性用于设置属性的高级属性

数据属性

包含一个属性值的位置，这个位置可以读取和写入值。数据属性特性如下

[[Configurable]]

表示是否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性(属性直接定义在对象中，默认为true)。当为false时，不能重新定义不能使用delete删除。

[[Enumerable]]

表示能否通过for-in循环返回属性。(属性直接定义在对象中，默认为true)

[[Writable]]

表示能否修改属性的值。(属性直接定义在对象中，默认为true)

[[Value]]

包含这个属性的数据值 name:jacky

要修改属性默认的特性，必须使用ECMAScript5的

Object.defineProperty()

语法：

Object.defineProperty(obj, prop, descriptor)

参数说明：

obj：必需。目标对象
prop：必需。需定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特性

当我们创建一个对象并且为对象设置一个属性的时候，该属性默认特性Configurable、Enumerable、Writable默认都为true，value为该属性的值。

定义属性

Object.defineProperties()

语法：

Object.defineProperties(obj, props)

参数说明：

obj：必需。目标对象
props：该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置

读取属性

Object.getOwnPropertyDescriptor()

返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）

语法: Object.getOwnPropertyDescriptor(obj, prop)

obj: 需要查找的目标对象

prop: 目标对象内属性名称

Object. getOwnPropertyDescriptors()

功能: 所指定对象的所有自身属性的描述符，如果没有任何自身属性，则返回空对象。

语法: Object.getOwnPropertyDescriptors(obj)

obj: 需要查找的目标对象

访问器属性

这个属性不包含数据值，包含的是一对get和set方法，在读写访问器属性时，就是通过这两个方法来进行操作处理的。

访问器属性包含的四个特性：

[[Configurable]]

表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性，默认为false

[[Enumerable]]

表示能否通过for-in循环返回属性,默认为false

[[Get]]

在读取属性时调用的函数,默认值为undefined

[[Set]]

在写入属性时调用的函数,默认值为undefined

这里要注意下，访问器属性不能直接定义，要通过Object.defineProperty()这个方法来定义。

对象序列化

对象序列化是指将对象的状态转换为字符串，也可以反序列化，将字符串还原为对象函数。

RegExp，Error对象，undefined值不能序列化和反序列化。

JSON.stringify(obj) 将对象序列化为JSON字符串,只能序列化对象可枚举的自有属性

JSON.parse(jsonStr) 反序列化

函数

函数声明

function 函数名(形参列表){
//函数体
}

函数表达式

var 函数名 = function(形参列表){
//函数体
}

函数声明提升

函数内部属性

只有在函数内部才能访问的属性。this也可以在函数外部进行使用。

arguments是一个类数组对象，包含着传入函数中的所有参数。arguments主要用途是保存函数参数，但是这个对象还有一个名为callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。

callee 属性是 arguments 对象的一个成员，仅当相关函数正在执行时才可用。

callee 属性的初始值就是正被执行的 Function 对象。

this

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在事件中，this 表示接收事件的元素。
在显式函数绑定时，我们可以自己决定this的指向

显式函数绑定

在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

在下面实例中，当使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法：

IIFE

IIFE: Immediately Invoked Function Expression，意为立即调用的函数表达式，也就是说，声明函数的同时立即调用这个函数。

作用

页面加载完成后只执行一次的设置函数。
将设置函数中的变量包裹在局部作用域中，不会泄露成全局变量。

函数的声明和IIFE的区别在于，在函数的声明中，我们首先看到的是function关键字，而IIFE我们首先看到的是左边的（。也就是说，使用一对（）将函数的声明括起来，使得JS编译器不再认为这是一个函数声明，而是一个IIFE，即需要立刻执行声明的函数。

IIFE的写法

对返回结果不进行处理的两种写法：

(function(形参){
函数体内容
})(实参);

(function(形参){
函数体内容
}(实参));

作用域

作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突

作用域链

1.自由变量

当前作用域没有定义的变量，这成为自由变量。自由变量的值如何得到 —— 要到创建这个函数的那个父级作用域寻找，如果没有就一直向上级祖先元素寻找（这就是所谓的"静态作用域"）

2.作用域链

如果父级也没有，再一层一层向上寻找，直到找到全局作用域还是没找到，就宣布放弃。这种一层一层的关系，就是作用域链。

函数调用

调用函数的方式不仅限于()执行，还有其他几种方式

函数名(实参列表);
函数名.call(执行环境对象,实参列表);
函数名.apply(执行环境对象,实参列表数组);
函数名.bind(执行环境对象)(实参列表);

call

可以有多个参数

2.apply

与call相似，但不同的是当有多个参数时，第二个参数必须是个数组

注意：如果call和apply的第一个参数是null，那么this在node环境下指向的是global对象，在HTML中指向的是window对象

3.bind

同样bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。

总结：call和apply都是改变上下文中的this并立即执行这个函数，bind方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加。

函数的应用

回调函数

回调，就是回头调用的意思。先执行完主函数，再回头调用传入的函数。

回调函数的作用：回调函数都用在耗时操作上面，因为主函数不用等待回调函数执行完，可以接着执行自己的代码。比如ajax请求，比如处理文件等。

闭包

闭包就是指有权访问另一个函数作用域中的变量的函数。

闭包的生成有三个必要条件

函数嵌套函数
内部函数引用了外部函数中的数据（属性、函数）
参数和变量不会被回收

在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包的用途

一个是可以读取函数内部的变量，另一个是让这些变量的值始终保持在内存中。

在这段代码中，result实际上就是闭包B函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数A中的局部变量n一直保存在内存中，并没有在A调用后被自动清除。

原因就在于A是B的父函数，而B被赋给了一个全局变量，这导致B始终在内存中，而B的存在依赖于A，因此A也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

数组

创建数组

1.字面量创建数组

2.构造函数创建数组

拓展：

数组的访问

[index] 直接访问,索引可以超过索引范围，只不过访问的值为undefined

length-1=Max(index)

length+N length-N 开辟新的内存空间或数组元素的删除

（并不是直接使用length加或减而是设置新的长度）

数组的遍历

数组API

数组序列化

toString() 在默认情况下都会以逗号分隔字符串的形式返回数组项

join() 使用指定的字符串用来分隔数组字符串

构造函数的方法

Array.isArray()

用来判断某个变量是否是一个数组对象

Array.from()

从类数组对象或者可迭代对象中创建一个新的数组实例。

var myArr = Array.from("LISI");
console.log(myArr);//["L","I","S","I"]

Array.of()

根据一组参数来创建新的数组实例，支持任意的参数数量和类型。

栈与队列方法

Array.prototype.push()

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

注意：新元素将添加在数组的末尾，此方法改变数组的长度。

语法

array.push(item1, item2, ..., itemX)

Array.prototype.pop()

pop() 方法用于删除数组的最后一个元素并返回删除的元素。

注意：此方法改变数组的长度！

语法

array.pop()

Array.prototype.shift()

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

注意：此方法改变数组的长度！

语法

array.shift()

Array.prototype.unshift()

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

注意：该方法将改变数组的数目。

语法

array.unshift(item1,item2, ..., itemX)

排序方法

Array.prototype.reverse()

reverse() 方法用于颠倒数组中元素的顺序。

语法

array.reverse()

Array.prototype.sort()

sort() 方法用于对数组的元素进行排序。如果调用该方法时没有使用参数，将按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。如果要想进行升序或是降序排序的话，要提供比较函数。

排序顺序可以是字母或数字，并按升序或降序。

默认排序顺序为按字母升序。

语法

array.sort(sortfunction)

关于升序和降序的条件

当 a>b 时，
a - b > 0 ，排序结果 ===> b，a （升序）
b - a < 0 ，排序结果 ===> a，b （降序）

当 b>a 时，
a - b < 0 ，排序结果 ===> a，b （升序）
b - a > 0 ，排序结果 ===> b，a （降序）

当 a=b 时，
a - b = b - a =0 , 排序结果 ===> 保持不变

无论a>b还是b>a，return a-b 总能得到升序的结果，而 return b-a 总能得到降序的结果。

数字排序（升序）：

数字排序（降序）：

操作方法

Array.prototype.concat()

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

语法

array1.concat(array2,array3,...,arrayX)

Array.prototype.slice()

slice() 方法可从已有的数组中返回选定的元素。

slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

语法

array.slice(start, end)

Array.prototype.splice()

splice() 方法用于添加或删除数组中的元素。

注意：这种方法会改变原始数组。

语法

array.splice(index,howmany,item1,.....,itemX)

Array.prototype.indexOf()

indexOf() 方法可返回数组中某个指定的元素位置。

该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。

如果在数组中没找到指定元素则返回 -1。

语法

array.indexOf(item,start)

Array.prototype.lastIndexOf()

lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。

如果要检索的元素没有出现，则该方法返回 -1。

该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。

如果在数组中没找到指定元素则返回 -1。

语法

array.lastIndexOf(item,start)

迭代方法

Array.prototype.every()

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

注意： every() 不会对空数组进行检测。 every() 不会改变原始数组。

语法

array.every(function(currentValue,index,arr), thisValue)

输出结果：

Array.prototype.some()

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。some() 不会改变原始数组。

语法

array.some(function(currentValue,index,arr),thisValue)

Array.prototype.filter()

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测。filter() 不会改变原始数组。

语法

array.filter(function(currentValue,index,arr), thisValue)

Array.prototype.map()

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。map() 不会改变原始数组。

语法

array.map(function(currentValue,index,arr), thisValue)参数

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数函数参数见下表
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

返回值

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

Array.prototype.forEach()

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

语法

array.forEach(function(currentValue, index, arr), thisValue)

参数

参数	描述
function(currentValue, index, arr)	必需。数组中每个元素需要调用的函数。函数参数见下表
thisValue	可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值

参数	描述
currentValue	必需。当前元素
index	可选。当前元素的索引值。
arr	可选。当前元素所属的数组对象。

正则表达式

正则表达式的创建

1.字面量创建

2.构造函数

修饰符

i：ignoreCase，匹配时忽视大小写

m：multiline，多行匹配

g：global，全局匹配

正则表达式实例方法

1.exec

可用来匹配字符串中符合正则表达式的字符串

如果匹配到，返回值是一个result数组:[匹配的内容，index: 在str中匹配的起始位置，input: 参数字符串，groups: undefined]，否则返回null

注意：

1)如果有修饰符"g",则正则表达式的实例reg中会维护lastIndex属性，记录下一次开始的位置，当第二次执行exec的时候，从lastIndex开始检索。

2)如果没有修饰符"g",不会维护lastIndex属性，每次执行从开始位置检索

2.test

用来测试待检测的字符串中是否有可以匹配到正则表达式的字符串，如果有返回true，否则返回false

注意：

1)如果正则表达式中有修饰符"g",则在reg中会维护lastIndex属性，记录下一次开始的位置，当第二次执行test的时候，从lastIndex开始检索。

2)如果正则表达式中没有修饰符"g",不会维护lastIndex属性，每次执行从开始位置检索

toString/toLocaleString

把正则表达式的内容转化成字面量形式字符串/有本地特色的字符串（JS中没效果）

valueOf

返回正则表达式本身

正则表达式实例属性

lastIndex

当没设置全局匹配时，该属性值始终为0

设置了全局匹配时，每执行一次exec/test来匹配，lastIndex就会移向匹配到的字符串的下一个位置，当指向的位置后没有可以再次匹配的字符串时，下一次执行exec返回null，test执行返回false，然后lastIndex归零，从字符串的开头重新匹配一轮

可以理解成，每次正则查找的起点就是lastIndex

输出结果：

ignoreCase、global、multiline

判断正则表达式中是否有忽略大小写、全局匹配、多行匹配三个模式修饰符

source

返回字面量形式的正则表达式（类似于toString）

正则表达式语法-元字符

直接量字符

正则表达式中的所有字母和数字都是按照字面含义进行匹配的，Javascript正则表达式语法也支持非字母的字符匹配，这些字符需要通过反斜线\作为前缀进行转义。

字符	匹配
字母和数字字符	自身
\o	Null字符
\t	制表符
\n	换行符
\v	垂直制表符
\f	换页符
\r	回车符

字符集合

一个字符集合，也叫字符组。匹配集合中的任意一个字符。

方括号用于查找某个范围内的字符:

[abc] 查找方括号之间的任何字符

[0-9] 查找任何从0至9的数字

[^xyz] 一个反义或补充字符集，也叫反义字符组。也就是说，它匹配任意不在括号内的字符。

边界符

^ 匹配输入开始。表示匹配行首的文本（以谁开始)。如果多行（multiline）标志被设为 true，该字符也会匹配一个断行（line break）符后的开始处。

$ 匹配输入结尾。表示匹配行尾的文本（以谁结束）。如果多行（multiline）标志被设为 true，该字符也会匹配一个断行（line break）符的前的结尾处。

如果 ^和 $ 在一起，表示必须是精确匹配。

字符集合与"^"和"$"一起使用

\b 匹配一个零宽单词边界，表示一个单词（而非字符）边界，也就是单词和空格之间的位置，或者字符（\w）与字符串开头或者结尾之间的位置。

\B 匹配一个零宽非单词边界，与"\b"相反。不能是结尾或者开头。

字符类

将直接量字符单独放进方括号内就组成了字符类，一个字符类可以匹配它所包含的任意字符。

字符类	含义
.	匹配除换行符\n和回车符之外的任何单个字符，等效于[^\n\r]
\d	匹配一个数字字符，等效于[0-9]
\D	[^0-9]
\w	匹配包括下划线的任何单个字符，包括A~Z，a~z，0~9和下划线"_"，等效于[a-zA-Z0-9_]
\W	[^a-zA-Z0-9_]
\s	匹配任何Unicode空白字符，包括空格、制表符、换页符等，等效于[\f\t\n\r]
\S	[^\f\t\n\r]

结合英文原意记忆：

d ==> digit（数字）

s ==> space（空白）

w ==> word（单词）

数量词

字符	含义
*	>=0次
+	≥1 次
？	0或1次
{n}	n 次
{n,}	≥n 次
{n,m}	n到m 次

重复方式

1)贪婪模式：尽可能多的匹配（首先取最多可匹配的数量为一组进行匹配），当匹配剩余的字符串，还会继续尝试新的匹配，直到匹配不到为止，为默认模式。

2)非贪婪模式：尽可能少的匹配（每次取最少匹配的数量为一组进行匹配），直到匹配不到为止使用方法：在量词后加上 ?

选择

字符"|"用于分隔供选择的字符，选择项的尝试匹配次序是从左到右，只要发现了匹配项就会选择匹配

分组

有圆括号包裹的一个小整体成为分组

一个分组中，可以有多个候选表达式，用 | 分隔：

捕获与引用

被正则表达式匹配（捕获）到的字符串会被暂存起来。

$1引用了第一个被捕获的串，$2是第二个，依次类推。

嵌套分组的捕获

以左括号出现的顺序进行捕获。

引用

正则表达式里也能进行引用，这称为反向引用：

\1引用了第一个被分组所捕获的串，换言之，表达式是动态决定的。

如果编号越界了，会被当成普通表达式

String对正则表达式的支持

1.search

查找字符串中是否有匹配正则的字符串，有则返回字符串第一次出现时的位置，无则返回null

正则中无论是否有全局匹配都不会影响返回结果

2.match

匹配字符串中符合正则表达式的字符串，并返回该字符串的一个数组，其中包括字符串内容、位置

如果正则设置全局匹配，则一次性返回所有符合正则表达式的字符串数组

如果其中添加了分组，返回符合要求的字符串以及分组的一个数组，但如果同时开启全局匹配则不会在数组中添加分组内容

3.split

以某种形式分割字符串

4.replace

满足正则表达式条件的内容将被替换

前瞻表达式

(?=exp)	正向前瞻	匹配后面满足表达式exp的位置
(?!exp)	负向前瞻	匹配后面不满足表达式exp的位置

（正向前瞻）

正则表达式的意思是，匹配一个H，但是一定是i的前面有H，才满足正则表达式的要求

（负向前瞻）

正则表达式的意思是，匹配一个H，但是后面不能跟着i

JavaScript面向对象

面向对象的程序设计

1.内置对象及内置函数

1.1.基本包装类型

为了便于操作基本类型值，ECMAScript提供了3个特殊引用类型（基本包装类型）：Boolean, Number, String。

基本包装类型，和其他引用类型一样，拥有内置的方法可以对数据进行额外操作。

每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型对象，从而可以调用一些方法操作这些数据。

例如：

为什么它不是对象却能调用对象的方法呢？

在执行第二行代码时，JS会自动进行下面的步骤：

1.自动创建 String 类型的一个实例（和基本类型的值不同，这个实例就是一个基本包装类型的对象）

2.调用实例（对象）上指定的方法

3.销毁这个实例

JS什么时候会自动创建一个对应的基本包装类型对象？

取决于当前执行的代码是否是为了获取他的值。每当读取一个基本类型的值，也就是当我们需要从内存中获取到它的值时（这个访问过程称为读取模式），这时，后台就会自动创建一个基本包装类型的对象。

引用类型和基本包装类最主要的区别就是对象的生存期。

引用类型：使用new操作符创建的引用类型实例，在执行流离开当前作用域之前一直都保存在内存中

基本包装类型：只存在一行代码的执行瞬间，然后立即销毁

给基本类型添加方法或者属性

增加对应的包装对象的原型方法

给字符串添加属性或方法，要写到对应的包装对象的原型下才行

使用new运算符创建String对象

1.Boolean类型

Boolean 类型没有特定的属性或者方法。一般直接将Boolean当做一个工具方法来使用。

2.Number类型

内置属性（静态属性，直接调用即可）

属性	描述
MAX_VALUE	可表示的最大的数。
MIN_VALUE	可表示的最小的数。
NaN	非数字值。
NEGATIVE_INFINITY	负无穷大，溢出时返回该值。
POSITIVE_INFINITY	正无穷大，溢出时返回该值。
prototype	使您有能力向对象添加属性和方法。

内置方法(对象方法)

方法	描述
toString	把数字转换为字符串，使用指定的基数。
toLocaleString	把数字转换为字符串，使用本地数字格式顺序。
toFixed	把数字转换为字符串，结果的小数点后有指定位数的数字。
toExponential	把对象的值转换为指数计数法。
toPrecision	方法可在对象的值超出指定位数时将其转换为指数计数法。
valueOf	返回一个 Number 对象的基本数字值。

例如toFixed

String类型

对象属性

属性	描述
constructor	对创建该对象的函数的引用
length	字符串的长度
prototype	允许您向对象添加属性和方法

String 也包含对象的通用方法，比如 valueOf()、toLocaleString()和 toString()方法，但这些方法都返回字符串的基本值。

字符方法

方法	描述
charAt(index)	返回指定索引位置的字符
charCodeAt(index)	以Unicode编码形式返回指定索引位置的字符

字符串操作方法

方法	描述
concat()	连接字符串。
slice()	方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
substring()	提取字符串中两个指定的索引号之间的字符。
substr()	从起始索引号提取字符串中指定数目的字符。

字符串位置方法

方法	描述
indexOf(str,n)	从n开始搜索第一个str，并将搜索的索引值返回
lastIndexOf(str,n)	从n开始搜索的最后一个str，并将搜索的索引值返回

大小写转换方法

方法	描述
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
toLocaleLowerCase()	把字符串转换为小写。本地化
toLocaleUpperCase()	把字符串转换为大写。本地化

字符串的模式匹配方法

方法	描述
match()	找到一个或多个正则表达式的匹配。
replace()	替换与正则表达式匹配的子串。
search()	检索与正则表达式相匹配的值。
split()	把字符串分割为字符串数组。

Math对象

通过把 Math 作为对象使用就可以调用其所有属性和方法

对象属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

下面是对象方法中比较常用的方法

Math.min() //求一组数中的最小值

Math.max() //求一组数中的最大值

Math.ceil() 向上舍入

Math.floor() 向下舍入

Math.round() 四舍五入

Math.random() 返回大于0小于1的一个随机数 [0，1)

Date对象

Date 对象用于处理日期和时间。是JS提供的内置构造函数。

new Date() 在传入参数的时候，可以获取到一个你传递进去的时间

还可以传递多个数字参数

第一个参数表示年
第二个参数表示月份，月份从0开始计数，0表示1月，11表示12月
第三个参数表示该月份的第几天，1~31
第四个参数表示当天的几点，0~23
第五个参数表示的是该小时的多少分钟，0~59
第六个参数表示该分钟的多少秒，0~59

常用对象方法

Get方法

获取指定字符中的数据

Moment

在当前目录下使用node安装moment库

npm install moment --save

日期格式可到moment官网查看

在浏览器中使用

时间戳转换：

lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

引入lodash函数：

解决深拷贝浅拷贝：

_.chunk(array, size)

定义

将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。

如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。

参数

array (Array): 需要处理的数组

size (number): 每个数组区块的长度

_.compact(array)

定义

创建一个新数组，包含原数组中所有的非假值元素。例如false, null, 0, "", undefined, 和 NaN 都是被认为是“假值”。

参数

array (Array): 待处理的数组

_.drop(array, [n=1])

定义

创建一个切片数组，去除array前面的n个元素。（n默认值为1。）

参数

array (Array): 要查询的数组。 [n=1] (number): 要去除的元素个数。

_.indexOf(array, value, [fromIndex=0])

定义

返回首次 value 在数组array中被找到的索引值，如果 fromIndex 为负值，将从数组array尾端索引进行匹配。

参数

array (Array): 需要查找的数组。

value (*): 需要查找的值。

[fromIndex=0] (number): 开始查询的位置。

_.uniq(array)

定义

创建一个去重后的array数组副本。只有第一次出现的元素才会被保留。

参数

array (Array): 要检查的数组。

深入理解对象

JavaScript工厂模式

工厂模式是创建对象的一种方式

工厂模式的作用：创建对象；降低代码冗余度

为什么用工厂模式来创建对象：

1.如果用字面量的方式创建的话，一个对象就要创建一次，非常麻烦

2.如果用new Object创建对象，很难看出是一个整体，因为是先实例化了一个对象，然后再为对象添加属性

使用工厂模式创建对象：

工厂模式优点：只要传入参数，工厂函数便可以创建对象

缺点：创建对象时无法知道它具体的数据类型

构造函数模式

自定义构造函数

以函数的形式为自己的对象类型定义属性和方法。

▲构造函数的函数名首字母要大写，用来区分构造函数和非构造函数

构造函数和工厂函数的区别：

1.没有显式的创建对象

2.属性和方法直接赋值给this

3.没有return

instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

构造函数的使用方法：

1.当作一个构造函数来使用：

2.当作一个普通函数来使用：

没有使用 new 操作符调用 Person()，结果会将属性和方法添加到全局对象。

3.在另一个对象的作用域中调用

通过 call()（或 apply()）调用函数，同时将特定对象指定为作用域。这里的调用将对象 o 指定为 Person()内部的 this 值，因此执行完函数代码后，所有属性和 sayName()方法都会添加到对象 o 上面。

构造函数的问题

构造函数的主要问题在于，其定义的方法会在每个实例上都创建一遍。

例如：person1 和 person2 都有名为 sayName()的方法，但这两个方法不是同一个 Function 实例。

因为都是做一样的事，所以没必要定义两个不同的 Function 实例。况且，this 对象可以把函数与对象的绑定推迟到运行时。要解决这个问题，可以把函数定义转移到构造函数外部：

这样虽然解决了相同逻辑的函数重复定义的问题，但全局作用域也因此被搞乱了，因为那个函数实际上只能在一个对象上调用。如果这个对象需要多个方法，那么就要在全局作用域中定义多个函数。这会导致自定义类型引用的代码不能很好地聚集一起。这个新问题可以通过原型模式来解决。

原型模式

每个函数都会创建一个 prototype 属性，这个属性是一个对象，包含应该由特定引用类型的实例共享的属性和方法。实际上，这个对象就是通过调用构造函数创建的对象的原型。使用原型对象的好处是，在它上面定义的属性和方法可以被对象实例共享。原来在构造函数中直接赋给对象实例的值，可以直接赋值给它们的原型。

所有属性和 sayName()方法都直接添加到了 Person 的 prototype 属性上，构造函数体中什么也没有。使用这种原型模式定义的属性和方法是由所有实例共享的。

原型层级

在通过对象访问属性时，会按照这个属性的名称开始搜索。搜索开始于对象实例本身。如果在这个实例上发现了给定的名称，则返回该名称对应的值。如果没有找到这个属性，则搜索会沿着指针进入原型对象，然后在原型对象上找到属性后，再返回对应的值。

虽然可以通过实例读取原型对象上的值，但不可能通过实例重写这些值。如果在实例上添加了一个与原型对象中同名的属性，那就会在实例上创建这个属性，这个属性会遮住原型对象上的属性。

只要给对象实例添加一个属性，这个属性就会遮蔽（shadow）原型对象上的同名属性，也就是虽然不会修改它，但会屏蔽对它的访问。即使在实例上把这个属性设置为 null，也不会恢复它和原型的联系。不过，使用 delete 操作符可以完全删除实例上的这个属性，从而让标识符解析过程能够继续搜索原型对象。

原型与in操作符

console.log("name" in p1);无论name在实例上还是原型上，都可以被检测到

!object.hasOwnProperty(name) && (name in object)

不是自有的属性但是又可以检测到则为原型属性

原生对象的原型

通过原生对象的原型可以取得所有默认方法的引用，也可以给原生类型的实例定义新的方法。

更简单的原型模式

在前面的案例中，每次定义一个属性或方法都会把 Person.prototype 重写一遍。为了减少代码冗余，直接通过一个包含所有属性和方法的对象字面量来重写原型成为了一种常见的做法

这样重写之后，Person.prototype 的 constructor 属性就不指向 Person了。在创建函数时，也会创建它的 prototype 对象，同时会自动给这个原型的 constructor 属性赋值。而上面的写法完全重写了默认的 prototype 对象，因此其 constructor 属性也指向了完全不同的新对象（Object 构造函数），不再指向原来的构造函数。

为了解决这个问题，可以在重写原型对象时，专门设置constructor的值，但是，以这种方式恢复 constructor 属性会创建一个[[Enumerable]]为 true 的属性。而原生 constructor 属性默认是不可枚举的。因此，如果使用的是兼容 ECMAScript 的 JavaScript 引擎，那可能会改为使用 Object.defineProperty()方法来定义 constructor 属性：

原型的问题

Person.prototype 有一个名为 friends 的属性，它包含一个字符串数组。然后这里创建了两个Person 的实例。person1.friends 通过 push 方法向数组中添加了一个字符串。由于这个friends 属性存在于 Person.prototype 而非 person1 上，新加的这个字符串也会在（指向同一个数组的）person2.friends 上反映出来。

组合模式

组合使用构造函数模式和原型模式。

继承

很多面向对象语言都支持两种继承：接口继承和实现继承。前者只继承方法签名，后者继承实际的方法。接口继承在 ECMAScript 中是不可能的，因为函数没有签名。实现继承是 ECMAScript 唯一支持的继承方式，而这主要是通过原型链实现的。

原型链

ECMAScript 把原型链定义为 ECMAScript 的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。

每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。这就是原型链的基本构想。

通过创建 Animal 的实例并将其赋值给Dog的原型对象，所以Dog. prototype 实现了对 Animal 的继承。

这个案例中实现继承的关键，是 Dog 没有使用默认原型，而是将其替换成了一个新的对象。这个新的对象恰好是 Animal 的实例。这样一来，Dog 的实例不仅能从 Animal 的实例中继承属性和方法，而且还与 Animal 的原型挂上了钩。

注意，getAnimalName()方法还在 Animal.prototype 对象上，而 name 属性则在 Dog.prototype 上。这是因为 getAnimalName()是一个原型方法，而name 是一个实例属性。

由于 Dog.prototype 的 constructor 属性被重写为指向Animal，所以 d1.constructor 也指向 Animal，想要指回Dog可以修改Dog.prototype.constructor。

默认原型

任何函数的默认原型都是一个 Object 的实例，这意味着这个实例有一个内部指针指向Object.prototype。

原型与继承关系

原型与实例的关系可以通过两种方式来确定。

第一种方式是使用 instanceof 操作符，如果一个实例的原型链中出现过相应的构造函数，则 instanceof 返回 true。

第二种方式是使用 isPrototypeOf()方法。原型链中的每个原型都可以调用这个方法，只要原型链中包含这个原型，这个方法就返回 true。

关于方法

子类覆盖父类或者增加父类的方法：这些方法必须在原型赋值之后再添加到原型上。

原型链的破坏

以对象字面量方式创建原型方法会破坏之前的原型链，因为这相当于重写了原型链。

在这段代码中，子类的原型在被赋值为 Animal 的实例后，又被一个对象字面量覆盖了。覆盖后的原型是一个 Object 的实例，而不再是 Animal 的实例。因此之前的原型链就断了。

原型链的问题

在使用原型实现继承时，原型实际上变成了另一个类型的实例。这意味着原先的实例属性摇身一变成为了原型属性。

Animal 构造函数定义了一个 categorys 属性，其中包含一个数组（引用值）。每个Animal 的实例都会有自己的 categorys 属性，包含自己的数组。但是，当 Dog 通过原型继承Animal后,Dog.prototype 变成了 Animal 的一个实例，因而也获得了自己的 categorys属性。这类似于创建了Dog.prototype.categorys s属性。最终结果是，Dog 的所有实例都会共享这个 categorys 属性。这一点通过d1.categorys 上的修改也能反映到 d2.categorys上就可以看出来。

原型链的第二个问题是，我们无法在不影响所有对象实例的情况下把参数传进父类的构造函数。

经典继承

为了解决原型包含引用值导致的继承问题，产生了一种叫作“盗用构造函数”。即在子类构造函数中调用父类构造函数。因为毕竟函数就是在特定上下文中执行代码的简单对象，所以可以使用apply()和 call()方法以新创建的对象为上下文执行构造函数。

传递参数

经典继承函数的一个优点就是可以在子类构造函数中向父类构造函数传参。

Animal 构造函数接收一个参数 name，然后将它赋值给一个属性。在 Dog构造函数中调用 Animal 构造函数时传入这个参数，实际上会在 Dog 的实例上定义 name 属性。为确保 Animal 构造函数不会覆盖 Dog 定义的属性，可以在调用父类构造函数之后再给子类实例添加额外的属性。

经典继承函数的问题

1.创建的实例并不是父类的实例，只是子类的实例。

2.没有拼接原型链，不能使用instanceof。因为子类的实例只继承了父类的实例属性/方法，没有继承父类的构造函数的原型对象中的属性/方法。

3.每个子类的实例都持有父类的实例方法的副本，浪费内存，影响性能，而且无法实现父类的实例方法的复用。

组合继承

组合继承（有时候也叫伪经典继承）综合了原型链和经典继承函数，将两者的优点集中了起来。基本的思路是使用原型链继承原型上的属性和方法，而通过经典继承函数继承实例属性。这样既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性。

Animal 构造函数定义了两个属性，name 和 categorys，而它的原型上也定义了一个方法叫 sayName()。Dog 构造函数调用了 Animal 构造函数，传入了 name 参数，然后又定义了自己的属性 age。此外，Dog.prototype 也被赋值为 Animal 的实例。原型赋值之后，又在这个原型上添加了新方法 sayAge()。这样，就可以创建两个 Dog 实例，让这两个实例都有自己的属性，包括 categorys，同时还共享相同的方法。

组合继承弥补了原型链和经典继承函数的不足，是 JavaScript 中使用最多的继承模式。而且组合继承也保留了 instanceof 操作符和 isPrototypeOf()方法识别合成对象的能力。

DOM

DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）

文档：表示的就是整个的HTML网页文档

对象：表示将网页中的每一个部分都转换为了一个对象。

模型：使用模型来表示对象之间的关系，这样方便我们获取对象

文档对象模型（DOM）是网页的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。从本质上说，它将web页面和脚本或编程语言连接起来了。

严格地说，DOM不属于JS，但是操作DOM是JS最常见的任务，而JS也是最常用于DOM操作的语言。

节点层级

document 节点表示每个文档的根节点。在这里，根节点的唯一子节点是<html>元素，我们称之为文档元素（documentElement）。文档元素是文档最外层的元素，所有其他元素都存在于这个元素之内。每个文档只能有一个文档元素。在 HTML 页面中，文档元素始终是<html>元素。在 XML 文档中，则没有这样预定义的元素，任何元素都可能成为文档元素。HTML 中的每段标记都可以表示为这个树形结构中的一个节点。元素节点表示 HTML 元素，属性节点表示属性，文档类型节点表示文档类型，注释节点表示注释。DOM 中总共有 12 种节点类型，这些类型都继承一种基本类型。

节点

DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

节点的类型有七种：Document、DocumentType、Element、Text、Comment、DocumentFragment。

常用节点

文档节点（document）

整个HTML文档document对象作为window对象的属性存在的，我们不用获取可以直接使用。

元素节点（Element）

HTML文档中的HTML标签。

属性节点（Attribute)

元素的属性表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。

文本节点（Text）

HTML标签中的文本内容。
其他节点

DocumentType

doctype标签（比如<!DOCTYPE html>）。

Comment

注释

DocumentFragment

文档的片段

这七种节点都属于浏览器原生提供的节点对象(下面要讲的Node对象)的派生对象，具有一些共同的属性和方法。

节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM。

最顶层的节点就是document节点，它代表了整个文档。文档里面最高的HTML标签，一般是<html>，它构成树结构的根节点（root node），其他HTML标签节点都是它的下级。

除了根节点以外，其他节点对于周围的节点都存在三种关系。

父节点关系（parentNode）：直接的那个上级节点。
子节点关系（childNode）：直接的下级节点。
同级节点关系（sibling）：拥有同一父节点的节点。

DOM提供操作接口，用来获取三种关系的节点。其中，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。

Node类型

DOM Level 1 描述了名为 Node 的接口，这个接口是所有 DOM 节点类型都必须实现的。Node 接口在 JavaScript中被实现为 Node 类型，在除 IE之外的所有浏览器中都可以直接访问这个类型。在 JavaScript中，所有节点类型都继承 Node 类型，因此所有类型都共享相同的基本属性和方法。

属性

nodeType

nodeType属性返回一个整数值，表示节点的类型，常用节点类型如下

节点类型	值	对应常量
文档节点（document）	9	Node.DOCUMENT_NODE
元素节点（element）	1	Node.ELEMENT_NODE
属性节点（attr）	2	Node.ATTRIBUTE_NODE
文本节点（text）	3	Node.TEXT_NODE

nodeName

nodeName属性返回节点的名称

nodeValue

nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值

textContent

textContent属性返回当前节点和它的所有后代节点的文本内容

nextSibling

nextSibling属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null

（注意：可能会获取到“空格”或“回车”这样的文本节点）

previousSibling

previousSibling属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null

parentNode

parentNode属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点(element)、文档节点(document)和文档片段节点(documentfragment)

parentElement

parentElement属性返回当前节点的父元素节点。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null

firstChild和lastChild

firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null，last则返回最后一个子节点。

childNodes

childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点

操作节点的方法

以下是四种常用方法，都需要父节点对象进行调用

appendChild

appendChild方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。

insertBefore()

insertBefore方法用于将某个节点插入父节点内部的指定位置。

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

insertBefore方法接受两个参数，第一个参数是所要插入的节点newNode，第二个参数是父节点parentNode内部的一个子节点referenceNode。newNode将插在referenceNode这个子节点的前面。返回值是插入的新节点newNode

removeChild()

removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。

replaceChild()

replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。

var replacedNode = parentNode.replaceChild(newChild, oldChild);

replaceChild方法接受两个参数，第一个参数newChild是用来替换的新节点，第二个参数oldChild是将要替换走的子节点。返回值是替换走的那个节点oldChild。

其他方法

cloneNode()

方法返回调用该方法的节点的一个副本.

var dupNode = node.cloneNode(deep);

node

将要被克隆的节点

dupNode

克隆生成的副本节点

deep 可选

是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身。

Document类型

Javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。HTMLDocument继承自Document。

属性

documentElement

始终指向HTML页面中的<html>元素。

body

直接指向<body>元素

doctype

访问<!DOCTYPE>, 浏览器支持不一致，很少使用

title

获取文档的标题

URL

取得完整的URL

domain

取得域名，并且可以进行设置，在跨域访问中经常会用到。

referrer

取得链接到当前页面的那个页面的URL，即来源页面的URL。

images

获取所有的img对象，返回HTMLCollection类数组对象

forms

获取所有的form对象，返回HTMLCollection类数组对象

links

获取文档中所有带href属性的<a>元素

DOM编程界面

HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。

在 DOM 中，所有 HTML 元素都被定义为对象。

编程界面是每个对象的属性和方法。

属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。

方法是您能够完成的动作（比如添加或删除 HTML 元素）。

例子：

例子改变了 id="demo" 的 <p> 元素的内容，getElementById 是方法，而 innerHTML 是属性

getElementById 方法

访问 HTML 元素最常用的方法是使用元素的 id。

在上面的例子中，getElementById 方法使用 id="demo" 来查找元素。

innerHTML 属性

获取元素内容最简单的方法是使用 innerHTML 属性。

innerHTML 属性可用于获取或替换 HTML 元素的内容。

innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。

查找元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

getElementById()

返回匹配指定 id 的一个元素。

getElementsByTagName()

返回一个HTMLCollection(伪数组)，包含匹配指定标签名的所有元素。

getElementsByClassName()

返回一个HTML集合HTMLCollection(伪数组)，包含匹配指定类名的所有元素。

document.querySelector()

返回文档中匹配指定的CSS选择器的第一元素

document.querySelectorAll()

document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

添加元素

document.createElement(element)

创建一个新的HTML元素，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

写入

document.write()

向文档写如文本或 HTML 表达式或 JavaScript 代码。

Element类型

Element 对象对应网页的 HTML 元素。每一个 HTML 元素在 DOM 树上都会转化成一个Element节点对象。

属性

attributes：返回一个与该元素相关的所有属性的集合。

classList：返回该元素包含的 class 属性的集合。

className：获取或设置指定元素的 class 属性的值。

clientHeight：获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。

clientTop：返回该元素距离它上边界的高度。

clientLeft：返回该元素距离它左边界的宽度。

clientWidth：返回该元素它内部的宽度，包括内边距，但不包括垂直滚动条、边框和外边距。

innerHTML：设置或获取 HTML 语法表示的元素的后代。

tagName：返回当前元素的标签名。

常用方法

方法	描述
element.innerHTML = new html content	改变元素的 innerHTML
element.attribute = value	修改属性的值
element.getAttribute()	返回元素节点的指定属性值。
element.setAttribute(attribute, value)	设置或改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

element.innerHTML

属性设置或获取HTML语法表示的元素的后代。

效果：

element.attribute = value

修改已经存在的属性的值

element.getAttribute()

element.setAttribute(attribute, value)

把指定属性设置或更改为指定值。

element.style.property

设置或返回元素的 style 属性

Text类型

Text 节点由 Text 类型表示，包含按字面解释的纯文本，也可能包含转义后的 HTML 字符，但不含 HTML 代码。

属性及方法

length:文本长度

appendData(text):追加文本

deleteData(beginIndex,count):删除文本

insertData(beginIndex,text):插入文本

replaceData(beginIndex,count,text):替换文本

splitText(beginIndex):从beginIndex位置将当前文本节点分成两个文本节点

document.createTextNode(text):创建文本节点，参数为要插入节点中的文本

substringData(beginIndex,count):从beginIndex开始提取count个子字符串

DOM事件机制

事件机制

JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

事件是由三部分组成

事件三要素：事件源事件类型事件处理程序

1.事件源：事件被触发的对象 -->按钮对象

2.事件类型：如何触发？触发什么事件？例如鼠标点击，键盘按下等…

3.事件处理程序：通过一个函数赋值的方式

执行事件的步骤

1.获取事件源

2.注册事件（绑定事件）

3.采用函数赋值形式添加事件处理程序

常用事件：

当用户点击鼠标时
当网页加载后
当图像加载后
当鼠标移至元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户敲击按键时

事件流

事件冒泡(IE事件流)

IE 事件流被称为事件冒泡，这是因为事件被定义为从最具体的元素（文档树中最深的节点）开始触发，然后向上传播至没有那么具体的元素（文档）

只要点击inner，便会出现如下情况：

也就是说，div#inner元素，即被点击的元素，最先触发 click 事件。然后，click 事件沿DOM 树一路向上，在经过的每个节点上依次触发，直至到达 document 对象。

阻止事件冒泡：

event.stopPropagation()

直接在对应方法中使用event.stopPropagation()便可阻止事件冒泡。

注意：如果点击方法时需要同时传递其他参数和event，直接传递event这个单词即可

οnclick="test(123,event)"

事件捕获

事件捕获的意思是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标前拦截事件。

在事件捕获中，click 事件首先由 document 元素捕获，然后沿 DOM 树依次向下传播，直至到达实际的目标元素div。

DOM事件流

DOM2 Events 规范规定事件流分为 3 个阶段：事件捕获、到达目标和事件冒泡。事件捕获最先发生，为提前拦截事件提供了可能。然后，实际的目标元素接收到事件。最后一个阶段是冒泡，最迟要在这个阶段响应事件。

点击div元素会以如图所示的顺序触发事件。

事件处理程序

事件意味着用户或浏览器执行的某种动作。比如，单击(click)、加载(load)、鼠标悬停(mouseover)。为响应事件而调用的函数被称为事件处理程序（或事件监听器）。事件处理程序的名字以"on"开头，因此 click 事件的处理程序叫作 onclick，而 load 事件的处理程序叫作 onload。有很多方式可以指定事件处理程序。

HTML 事件处理程序

特定元素支持的每个事件都可以使用事件处理程序的名字以 HTML 属性的形式来指定。此时属性的值必须是能够执行的 JavaScript 代码。

在 HTML 中定义的事件处理程序可以包含精确的动作指令，也可以调用在页面其他地方定义的方法。

this 值可以为事件的目标元素。

DOM0 事件处理程序

在 JavaScript 中指定事件处理程序的传统方式是把一个函数赋值给（DOM 元素的）一个事件处理程序属性。要使用 JavaScript 指定事件处理程序，必须先取得要操作对象的引用。每个元素（包括 window 和 document）都有通常小写的事件处理程序属性，比如 onclick。只要把这个属性赋值为一个函数即可：

这里先从文档中取得按钮，然后给它的 onclick 事件处理程序赋值一个函数。注意，前面的代码在运行之后才会给事件处理程序赋值。因此如果在页面中上面的代码出现在按钮之后，则有可能出现用户点击按钮没有反应的情况。

像这样使用 DOM0 方式为事件处理程序赋值时，所赋函数被视为元素的方法。因此，事件处理程序会在元素的作用域中运行，即 this 等于元素。

通过将事件处理程序属性的值设置为 null，可以移除通过 DOM0 方式添加的事件处理程序，如下面的例子所示：

btn.onclick = null;

把事件处理程序设置为 null，再点击按钮就不会执行任何操作了。

注意：

如果事件处理程序是在 HTML 中指定的，则 onclick 属性的值是一个包装相应HTML 事件处理程序属性值的函数。这些事件处理程序也可以通过在 JavaScript 中将相应属性设置为 null 来移除。

DOM2 事件处理程序

DOM2 Events 为事件处理程序的赋值和移除定义了两个方法：

addEventListener()和removeEventListener()。

这两个方法暴露在所有 DOM 节点上，它们接收 3 个参数：事件名、事件处理函数和一个布尔值，true 表示在捕获阶段调用事件处理程序，false（默认值）表示在冒泡阶段调用事件处理程序。

addEventListener()

以上代码为按钮添加了会在事件冒泡阶段触发的 onclick 事件处理程序（因为最后一个参数值为false）。与 DOM0 方式类似，这个事件处理程序同样在被附加到的元素的作用域中运行。使用 DOM2方式的主要优势是可以为同一个事件添加多个事件处理程序。

removeEventListener()

通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()并传入与添加时同样的参数来移除。这意味着使用 addEventListener()添加的匿名函数无法移除

这个例子通过 addEventListener()添加了一个匿名函数作为事件处理程序。然后，又以看起来相同的参数调用了 removeEventListener()。但实际上，第二个参数与传给 addEventListener()的完全不是一回事。传给 removeEventListener()的事件处理函数必须与传给 addEventListener()的是同一个

这个例子有效，因为调用 addEventListener()和 removeEventListener()时传入的是同一个函数。大多数情况下，事件处理程序会被添加到事件流的冒泡阶段，主要原因是跨浏览器兼容性好。把事件处理程序注册到捕获阶段通常用于在事件到达其指定目标之前拦截事件。如果不需要拦截，则不要使用事件捕获。

事件对象

在 DOM 中发生事件时，所有相关信息都会被收集并存储在一个名为 event 的对象中。这个对象包含了一些基本信息，比如导致事件的元素、发生的事件类型，以及可能与特定事件相关的任何其他数据。

注意：event 对象只在事件处理程序执行期间存在，一旦执行完毕，就会被销毁。

阻止默认事件发生

preventDefault()方法

用于阻止特定事件的默认动作，比如，链接的默认行为就是在被单击时导航到 href 属性指定的 URL或是修改表单提交的默认事件。如果想阻止这些行为，可以在 onclick 事件处理程序中取消

getElementsByTagName拿到的是一个类数组，所以要在最后选择加一个索引[]

事件委托

在 JavaScript 中，页面中事件处理程序的数量与页面整体性能直接相关。原因有很多。首先，每个函数都是对象，都占用内存空间，对象越多，性能越差。其次，为指定事件处理程序所需访问 DOM 的次数会先期造成整个页面交互的延迟。只要在使用事件处理程序时多注意一些方法，就可以改善页面性能。

事件委托就是当事件触发时，把要做的事委托给父元素（或父元素的父元素）来处理。也就是：利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作。使用事件委托技术能让你避免对特定的每个节点添加事件监听器。

事件委托利用事件冒泡，可以只使用一个事件处理程序来管理一种类型的事件。例如，click 事件冒泡到 document。这意味着可以为整个页面指定一个 onclick 事件处理程序，而不用为每个可点击元素分别指定事件处理程序。

这里只给<ul id="myLinks">元素添加了一个 onclick 事件处理程序。因为所有列表项都是这个元素的后代，所以它们的事件会向上冒泡，最终都会由这个函数来处理。但事件目标是每个被点击的列表项，只要检查 event 对象的 id 属性就可以确定，然后再执行相应的操作即可。相对于前面不使用事件委托的代码，这里的代码不会导致先期延迟，因为只访问了一个 DOM 元素和添加了一个事件处理程序。结果对用户来说没有区别，但这种方式占用内存更少。所有使用按钮的事件（大多数鼠标事件和键盘事件）都适用于这个解决方案。

事件类型

DOM3 Events 定义了如下事件类型。

用户界面事件（UIEvent）：涉及与 BOM 交互的通用浏览器事件。

焦点事件（FocusEvent）：在元素获得和失去焦点时触发。

鼠标事件（MouseEvent）：使用鼠标在页面上执行某些操作时触发。

滚轮事件（WheelEvent）：使用鼠标滚轮（或类似设备）时触发。

键盘事件（KeyboardEvent）：使用键盘在页面上执行某些操作时触发。

输入事件（InputEvent）：向文档中输入文本时触发。

用户界面事件

load

在 window 上当页面加载完成后触发，在窗套（<frameset>）上当所有窗格（<frame>）都加载完成后触发，在<img>元素上当图片加载完成后触发，在<object>元素上当相应对象加载完成后触发。

unload

当页面完全卸载后在window上触发，当所有框架都卸载后在框架集上触发，当嵌入的内容卸载完毕后再<object>上触发。

select

在文本框（<input>或 textarea）上当用户选择了一个或多个字符时触发

resize

在 window 或窗格上当窗口或窗格被缩放时触发。

scroll

当用户滚动包含滚动条的元素时在元素上触发。<body>元素包含已加载页面的滚动条。

大多数 HTML 事件与 window 对象和表单控件有关。

焦点事件

blur

当元素失去焦点时触发。这个事件不冒泡，所有浏览器都支持。

focus

当元素获得焦点时触发。这个事件不冒泡，所有浏览器都支持。

focusin

当元素获得焦点时触发。这个事件是 focus 的冒泡版

focusout

当元素失去焦点时触发。这个事件是 blur 的冒泡版。

鼠标事件和鼠标滚轮事件

DOM3 Events定义了 9 种鼠标事件。

click

在用户单击鼠标主键（通常是左键）或按键盘回车键时触发。这主要是基于无障碍的考虑，让键盘和鼠标都可以触发 onclick 事件处理程序。

dblclick

在用户双击鼠标主键（通常是左键）时触发。这个事件不是在 DOM2 Events 中定义的，但得到了很好的支持，DOM3 Events 将其进行了标准化。

mousedown

在用户按下任意鼠标键时触发。这个事件不能通过键盘触发。

mouseenter

在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不冒泡，也不会在光标经过后代元素时触发。mouseenter 事件不是在 DOM2 Events 中定义的，而是 DOM3 Events中新增的事件。

mouseleave

在用户把鼠标光标从元素内部移到元素外部时触发。这个事件不冒泡，也不会在光标经过后代元素时触发。mouseleave 事件不是在 DOM2 Events 中定义的，而是 DOM3 Events中新增的事件。

mousemove

在鼠标光标在元素上移动时反复触发。这个事件不能通过键盘触发。

mouseout

在用户把鼠标光标从一个元素移到另一个元素上时触发。移到的元素可以是原始元素的外部元素，也可以是原始元素的子元素。这个事件不能通过键盘触发。

mouseover

在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不能通过键盘触发。

mouseup

在用户释放鼠标键时触发。这个事件不能通过键盘触发。

mousewheel

鼠标滚轮事件

键盘事件与输入事件

键盘事件包含 3 个事件：

keydown，用户按下键盘上某个键时触发，而且持续按住会重复触发。

keypress，用户按下键盘上某个键并产生字符时触发，而且持续按住会重复触发。Esc 键也会触发这个事件。DOM3 Events 废弃了 keypress 事件，而推荐 textInput 事件。

keyup，用户释放键盘上某个键时触发。

输入事件只有一个，即 textInput。这个事件是对 keypress 事件的扩展，用于在文本显示给用户之前更方便地截获文本输入。textInput 会在文本被插入到文本框之前触发。当用户按下键盘上的某个字符键时，首先会触发 keydown 事件，然后触发 keypress 事件，最后触发 keyup 事件。注意，这里 keydown 和 keypress 事件会在文本框出现变化之前触发，而 keyup事件会在文本框出现变化之后触发。如果一个字符键被按住不放，keydown 和 keypress 就会重复触发，直到这个键被释放。对于非字符键，在键盘上按一下这个键，会先触发 keydown 事件，然后触发 keyup 事件。如果按住某个非字符键不放，则会重复触发 keydown 事件，直到这个键被释放，此时会触发 keyup 事件。

BOM

window对象

BOM 的核心是 window 对象，表示浏览器的实例。window 对象在浏览器中有两重身份，一个是ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义全局方法。

Global作用域

因为 window 对象被复用为 ECMAScript 的 Global 对象，所以通过 var 声明的所有全局变量和函数都会变成 window 对象的属性和方法。

Window窗口

窗口位置

screenLeft和screenTop

属性返回窗口相对于屏幕的X和Y坐标。(火狐浏览器不支持)

screenX和screenY

属性返回窗口相对于屏幕的X和Y坐标。(ie浏览器不支持，火狐可以使用此属性)

pageXOffset

设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYOffset

设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

窗口大小

innerWidth

页面视图区的宽度

innerHeight

页面视图区的高度

outerWidth

浏览器窗口的宽度

outerHeight

浏览器窗口的高度

screen对象

屏幕总宽度/高度(像素单位):

screen.width

screen.height

可用宽度/高度(像素单位):

screen.availWidth

screen.availHeight

颜色深度:

screen.colorDepth

颜色分辨率:

screen.pixelDepth

Window open()

window.open()方法可以用于导航到指定 URL，也可以用于打开新浏览器窗口。这个方法接收 4个参数：要加载的 URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值。通常，调用这个方法时只传前 3 个参数，最后一个参数只有在不打开新窗口时才会使用。

语法

window.open(URL,name,specs,replace)

参数

URL

可选。打开指定的页面的URL。如果没有指定URL，打开与新的空白窗口

name

可选。指定target属性或窗口的名称。支持以下值：

_blank - URL加载到一个新的窗口。这是默认
_parent - URL加载到父框架
_self - URL替换当前页面
_top - URL替换任何可加载的框架集
name - 窗口名称

specs

可选。一个逗号分隔的项目列表。支持以下值：

hannelmode=yes\|no\|1\|0	是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes\|no\|1\|0	是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes\|no\|1\|0	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels	窗口的高度。最小.值为100
left=pixels	该窗口的左侧位置
location=yes\|no\|1\|0	是否显示地址字段.默认值是yes
menubar=yes\|no\|1\|0	是否显示菜单栏.默认值是yes
resizable=yes\|no\|1\|0	是否可调整窗口大小.默认值是yes
scrollbars=yes\|no\|1\|0	是否显示滚动条.默认值是yes
status=yes\|no\|1\|0	是否要添加一个状态栏.默认值是yes
titlebar=yes\|no\|1\|0	是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes\|no\|1\|0	是否显示浏览器工具栏.默认值是yes
top=pixels	窗口顶部的位置.仅限IE浏览器
width=pixels	窗口的宽度.最小.值为100

replace

Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。

系统对话框

使用 alert()、confirm()和 prompt()方法，可以让浏览器调用系统对话框向用户显示消息。这些对话框与浏览器中显示的网页无关，而且也不包含 HTML。它们的外观由操作系统或者浏览器决定，无法使用 CSS 设置。此外，这些对话框都是同步的模态对话框，即在它们显示的时候，代码会停止执行，在它们消失以后，代码才会恢复执行。

alert()

alert()接收一个要显示给用户的字符串。alert()只接收一个参数。调用 alert()时，传入的字符串会显示在一个系统对话框中。对话框只有一个“OK”（确定）按钮。如果传给 alert()的参数不是一个原始字符串，则会调用这个值的 toString()方法将其转换为字符串。

警告框（alert）通常用于向用户显示一些他们无法控制的消息，比如报错。用户唯一的选择就是在看到警告框之后把它关闭。

confirm()

确认框通过调用 confirm()来显示。确认框有两个按钮：“Cancel”（取消）和“OK”（确定）。用户通过单击不同的按钮表明希望接下来执行什么操作。

要知道用户单击了 OK 按钮还是 Cancel 按钮，可以判断 confirm()方法的返回值：true 表示单击了 OK 按钮，false 表示单击了 Cancel 按钮或者通过单击某一角上的 X 图标关闭了确认框。

prompt()

提示框，通过调用 prompt()方法来显示。提示框的用途是提示用户输入消息。除了 OK 和 Cancel 按钮，提示框还会显示一个文本框，让用户输入内容。prompt()方法接收两个参数：要显示给用户的文本，以及文本框的默认值（可以是空字符串）。如果用户单击了 OK 按钮，则 prompt()会返回文本框中的值。如果用户单击了 Cancel 按钮，或者对话框被关闭，则 prompt()会返回 null。

location

location既是window的对象也是document的对象。

属性

host 返回服务器名称和端口号

hostname 返回不带端口号的服务器名称

href 返回当前加载页面的完整URL

pathname 返回URL的目录和文件名

port 返回URL中指定的端口号

protocol 返回页面使用的协议

search 返回URL的查询字符串。这个字符串以问号开头

方法

assign()

传递一个url参数，打开新url，并在浏览记录中生成一条记录。

replace()

参数为一个url，结果会导致浏览器位置改变，但不会在历史记录中生成新记录。

reload()

重新加载当前显示的页面，参数可以为boolean类型，默认为false，表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为true，强制从服务器中重新加载。

history对象

该对象保存着用户上网的历史记录。出于安全方面的考虑，开发人员无法得知用户浏览过的URL，不过借由用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退前进,注意：没有应用于History对象的公开标准，不过所有浏览器都支持该对象。

length

返回历史列表中的网址数

注意：Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。

back()

加载 history 列表中的前一个 URL

forward()

加载 history 列表中的下一个 URL

go()

加载 history 列表中的某个具体页面，负数表示向后跳转，正数表示向前跳转。

间歇调用和超时调用

setTimeout()

该方法返回一个数值ID，表示超时调用，这个超时调用ID是计划执行代码的唯一标识符通过它来取消超时调用。可以通过clearTimeout(ID);

参数：

1.要执行的代码 2.以毫秒表示的时间。

例如在1秒后执行输出语句

setInterval()

按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID，该ID可以用户在将来某个时刻取消间歇调用。

参数：

1.要执行的代码 2.以毫秒表示的时间。

如动态显示时间

Ajax

Ajax是一种创建交互式网页应用的网页发开技术，用于浏览器和服务器之间进行数据交互。Ajax在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

XMLHttpRequest

XMLHttpRquest对象是Ajax的基础，XMLHttpRequest用于在后台与服务器交换数据。意味着可以在不重新加载整个网页的情况下对网页的某部分更新。

XMLHttpRequest使用方法

创建XMHttpRequest对象

使用open方法设置和服务器的交互信息

open（）

1.指定HTTP方法或动作，不区分大小写，但通常用大写

取值：GET/POST/HEAD/DELETE/OPTIONS/PUT

GET：用于常规请求，适用于URL完全指定请求资源

POST：用于HTML表单，它在请求主题中包含额外数据，且这些数据存储到服务器上的数据库中

2.URL请求的主题，是相对于文档的URL。跨域请求会报错。

3.Boolean类型的值，如果值为false代表同步请求，send（）方法将阻塞直到请求完成。如果这个参数是true或省略，请求是异步的。

设置requestHeader()

在Ajax中，用setRequestHeader()方法来添加HTTP头，在send()方法中规定需要希望发送的数据

setRequestHeader()方法需要在open()和send()方法之间调用。

语法：

request.setRequestHeader(属性名称，属性值）

常用的数据格式：

(编码可带可不带)

1.发送json格式数据

request.setRequestHeader('Content-type','application/json;charset=utf-8');

2.发送表单数据

request.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=utf-8');

3.发送纯文本

request.setRequestHearder('Content-type','text/plain;charset=utf-8');

4.发送html文本

request.setRequestHeader('Content-type','text/html;charset=utf-8');

设置发送的数据，开始和服务器端交互

send（）

参数：请求主体内容，如果没有则为null，或者省略。

request.send（）

调用send（）之后，请求会发送到服务器

取得响应，注册事件

发送请求后会收到响应，XHR对象的以下属性会被填充上数据

responseText:作为响应体返回的文本

responseXML:如果响应的内容类型是“text/xml"或“application/xml”，那就是包含响应数据的XML DOM文档

status:响应的HTTP状态

statusText:响应的HTTP状态描述

readyState:返回HTTP请求状态

0 open（）尚未调用 UNSENT

1 open（）已调用 OPENED

2 接收到头信息 HEADERS_RECEIVED

3 接收到响应主体 LOADING

4 响应完成 DONE

readystatechange请求状态改变事件：当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件

如果请求完成，并且响应完成，可以获取到响应数据

响应解码

1.MIME类型为text/plain,text/html,text/css 文本类型时，可以使用responseText属性解析

2.MIME类型为XML文档类型时，使用responseXML属性解析

3.如果服务器发送对象，数组这样的结构化数据作为其响应，他应该传输JSON编码的字符串数据。通过responseText接受到它，可以把它传递给JSON.parse()方法来解析。

jQuery

jQuery是一个JavaScript的工具库，是对ECMAScript,dom,bom的一个浅封装，让用户更方便操作。

jQuery功能

1.使用css选择器进行元素查询

2.事件机制

3.Dom操作

4.属性操作

5.工具方法

6.Ajax

jQuery安装

1.从juery官网下载jQuery库

2.从CDN中载入jQuery

jQuery函数

通过"jQuery"和"$"来调用jQuery函数

$(匿名函数) 匿名函数在文档加载完毕以后执行

$(选择器) 通过选择器选择到符合条件的Element元素，将其转为jQuery对象

$(html片段) 将html片段转换成Element元素，然后再封装成一个jQuery对象

$(Element元素) 将Element元素转换成一个jQuery对象

jQuery和原生js的区别：

原生JS和jQuery入口函数的加载模式不同原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行 jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕
原生JS如果编写了多个入口函数，后面编写的会覆盖前面编写的

jQuery如果编写了多个入口函数，后面的不会覆盖前面的

jQuery对象

jQuery对象是类数组对象，jQuery的方法都是对类数组中的元素的批量操作。

注意：jQuery对象可以调用jQuery.prototype中声明的方法，普通的Element元素则不能调用。

jQuery选择器

jQuery选择器与css3中的选择器几乎一致：

基本选择器，层次选择器，伪类选择器，伪元素选择器，属性选择器

jQuery事件

on():绑定事件

off（）：解绑事件

click（）：元素点击时

dbclick（）：元素双击时

$(document).ready()：允许我们在文档完全加载完后执行函数

mouseenter()：当鼠标指针穿过元素时

mouseleave()：当鼠标指针离开元素时

mousedown()：当鼠标指针移动到元素上方，并按下鼠标按键时

mouseup()：当元素上松开鼠标按钮时，会发生mouseup事件

hover()：模拟光标悬停事件

当鼠标移动到元素上时，会触发指定当第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定当第二个函数（mouseleave）

blur()：当元素失去焦点时，发生blur事件

keydown()：按键按下

keyup()：按键抬起

jQueryDOM操作

jQuery中提供了一系列的操作DOM节点的api,用于解决DOM原生API无法进行批量操作并且功能性较差的弊端。

插入方法：append、appendTo、prepend、prependTo、after、before、insertBefore、insertAfter

包裹方法：wrap、unwrap、wrapAll、wrapInner

替换方法：replaceWith、replaceAll

移除方法：empty、remove、detach

克隆方法：clone

复制节点:

原生DOM有 cloneNode(true/false) 浅复制false 深复制true。是否复制内部内容，并不涉及事件的复制。默认浅复制

jQuery对象有 clone(true/false) 浅复制false 深复制true。会复制内容，是否复制事件。默认浅复制

属性操作

$(选择器).attr(属性名称); //获取属性的信息

$(选择器).attr(属性名称，值); //设置属性的信息

$(选择器).attr(json对象); //同时修改多个属性

$(选择器).removeAttr(属性名称); //删除指定的属性

$(选择器).attr(属性名称, fn函数); //通过函数的返回值给属性设置信息

有关类属性：

$(选择器).addClass(类名) //添加类名

$(选择器).removeClass(类名) //删除类名

$(选择器).toggleClass(类名) //如果有该class就删除，没有就添加

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

jQuery静态方法

1.数组及操作对象

each()

此方法可用于遍历任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略

map()

将一个数组中的元素转换到另一个数组中

作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中

toArray()

把jQuery集合中所有DOM元素恢复成一个数组

merge()

合并两个数组

2.测试操作

type（）

用于检测obj的数据类型

isEmptyObject（）

测试对象是否是空对象，即不包含任何属性

这个方法既检测对象本身的属性，也检测从原型继承的属性

isPlainObject（）

测试对象是否是纯粹的对象（即是否是通过{}或者new object创建的）

isNumberic（）

检测它的参数是否是一个数值

isArray（）

检测是否是一个数组

isFunction（）

检测是否是函数

3.字符串操作

param()

将表单元素数组或者对象序列化

trim（）

去掉字符串起始和结尾的空格，多用于用户数据的清洗

jQuery Ajax

在jQuery中使用ajax

$.get()

get无参接口

get有一个参数的接口

1.拼接方式

2.用对象传递方式

get有两个参数接口

$.ajax() 会自动将对象转换为查询字符串，对jquery的ajax来说，请求头默认为contentType='application/x-www-form-urlencoded'

$.post（）

有参数参数不是json格式

有参数参数为json格式

如何利用$.ajax向后台发送json字符串数据？

1.将参数转换为json字符串

JSON.stringify( )

2.将请求头设为json格式

contentType = 'application/json'

axios

基本格式：

如何利用axios向后台发送查询字符串数据？

1.将参数转换为查询字符串

var obj = {name:'zhangsan',id:'123456'}

Qs.stringify(obj )

2.将请求头设为格式

contentType = 'application/x-www-form-urlencoded'

使用Qs将对象转换为字符串格式

post请求，参数为查询字符串格式

$.ajaxSetup（）全局设置

ajax事件

ajaxComplete() 请求完成时执行

ajaxError() 请求发生错误时执行

ajaxSend() 请求发送前执行

ajaxStart() 请求开始时执行

ajax Success() 请求成功时执行

JavaScript的学习记录相关推荐

JavaScript从零开始学习记录（三）
前言到了我最为感兴趣的部分了,要戒骄戒躁,毕竟还没出发多远,不能想着一步登天,稳扎稳打笔记范围从这节视频到那节视频结束课程目标能够说出Web APIs阶段与JavaScript语法阶段的关联 ...
廖雪峰javascript教程学习记录
$1.数据类型和变量 1.不区分整数和浮点数,统一用Number 2.字符串String 3.布尔值注意: (1) 实际上,JavaScript允许对任意数据类型做比较; 要特别注意相等运算符==. ...
前端学习记录 —— JavaScript（一）
前端学习记录 -- JavaScript(一) 前言一.初识 JavaScript JavaScript 的特点 JavaScript的作用编程语言与标记语言的区别 HTML/CSS/JS 的关系 ...
JavaScript学习记录01快速入门、基本语法、严格检查模式
文章目录 JavaScript学习记录01快速入门.基本语法.严格检查模式 1.1什么是JavaScript 1.2认识JavaScript框架 1.3快速入门 1.4基本语法入门 1.5数据类型简介 ...
php+打开文件和其子文件,【php学习记录】引用、打开文件
[php学习记录] 引用.打开文件一.PHP echo 和 print 语句 echo 和 print 区别: echo - 可以输出一个或多个字符串 print - 只允许输出一个字符串,返回值总 ...
Echarts学习记录——如何去掉网格线及网格区域颜色
关键属性 splitLine和splitArea,可以设置相关的属性示例代码 <!DOCTYPE html> <html lang="en"> <h ...
MongoDB学习记录：入门（一）——五叶草
预热看我之前的文章Node学习记录: mongodb 这个系列旨在系统的学习Mongodb 部分图片来自慕课网mongodb入门截图学习目标 MongoDB官网:https://www.mongod ...
JavaScript-WebAPIs学习记录
JavaScript-WebAPIs学习记录浏览器交互效果 console.dir(); // 更好地查看里面的属性和方法 javascript:void(0); 或者 javascript:; 可 ...
第一周前端web学习记录
第一周前端web学习记录 #什么是HTML.CSS? 如何写代码以及在哪里写 vs code 的基本使用方法浏览器网站开发 HTML 的结构基础和属性创建标签嵌套 HTML标签设置属性 HT ...

JavaScript的学习记录