JS超乎你想象的超详细基础笔记

JS超详细笔记

在你学习js的过程中，这里可以找到你所有想要的笔记，如果想要word文档原稿，请前往https://download.csdn.net/download/qq_45847045/13038453
，笔记和这里一模一样，但是word文档更加的注重重点，有光标标记，红色字体标注。

1、 JS的书写格式：
Ⅰ、行内式：在标签内的属性中添加JS语句
例如：<button οnclick=”alert(‘点我了！’);”>点我</buttom>
<a herf=”javascript:alert(‘点我了！‘);”>点我</a>
Ⅱ、页内式:<script></script> 使用注意：此标签通常写在文档尾部；网页是从上到下加载，而j’s代码通常是给标签添加交互（操作元素），所以需要先加载HTML，否则如果执行js代码时html还未被加载，那么js代码将无法添加交互（操作元素）；如果脚本比较大，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续，会造成加载卡顿。如果要使得script标签放在前面而不出现加载卡顿的情况，可在script标签中添加函数（window.onload = function() {script语句} 等待页面加载完成在加载js语句
Ⅲ、外链式：用script标签在文档尾部引入外链js，如：
<script src=”相对路径的js文件“></script> 注意：一旦引入外链js，此script标签内部的语句不起效。
2、 JS中的注释：单行注释：// 多行注释: /注释内容/
标准注释

注释文化：www.cnblogs.com/humi/p/7956586.html
3、 JS常见的输出方式：
Ⅰ、在网页中弹出显示框，显示信息（阻断弹窗，必须点击才会向下下载）
弹窗：(window).alert(‘我是内容’);
Debugger；

Ⅱ、在控制台输出消息，一般用来调试程序
Console.log(‘我是内容’);括号内也可以是形参
Console.warn(‘这是一个警告!!‘)；
Console.error(‘这是一个错误!!’);
Ⅲ、在网页中弹出输入框，一般用于接受用户输入的信息
Window.prompt(‘我是内容！’);
运行内容

Ⅳ、在网页中弹出提示框，显示信息，该方法一般与if
判断语句结合使用
Window.confirm(‘我是内容！’);
运行内容

Ⅴ、可以向body中输出一个内容
Document.write(‘我是内容/文本标签‘)；

Js基本语法
1、字面量、常量、变量
Ⅰ、字面量：（字母，数字，字符串……）
Ⅱ、常量:定义后，固定且不能修改的数据

Es6才加进来的
Ⅲ、变量：变量可以用来保存字面量，而且变量的值可以任意改变（定义后，可以修改的数据）
定义变量：使用var关键字来声明一个变量（例：var 变量名称；）

变量初始化：1、先定义后赋值。2、定义直接赋值。
变量的默认值：

变量命名的规则和规范：
第一、

第二、

Javascript中的关键字

Javascript中的保留字

2、数据类型
数据类型划分：
Ⅰ、简单数据类型
Number String Boolean Undefined Null
Number：
整数运算保证精确，浮点数可能不精确
String：
字符串由单引号和双引号括起

Boolean只有true和false两种数值

Undefined：变量为赋值，typeof返回的值就是Undefined
Null：当一个变量的值为null时，typeof返回的值为object

但是用===时返回false，因为undefined的数据类型为Undefined，而null的数据类型为Null
双==比较值是否相等，相等返回true，否则为false
三===比较值和数据类型是否相等，两者都相等返回true，否则返回false
Ⅱ、引用（复杂）数据类型
Ojiect
数据类型的查看
Typeof 操作符（会将检查的结果以字符串的形式返回给我们）
3、数据类型的转化
Ⅰ、转换成字符串类型
① 使用tostring（）函数
常规使用方法：

使用注意：

② 使用String（）函数
使用String（）函数可以将null和undefined直接转换为string
而tostring（）函数不行

③ 使用拼接字符串方式（最简单）
常规使用：任何数据和+“”连接到一起都会直接转换为字符串（其实现原理和String（）函数一样）

Ⅱ、转换成Number类型
①、字符串转数字

②、布尔转数字
True转为1，false转为0
③、null和undefined转数字
null转为0，而undefined转为NaN(Not a Number)

Ⅲ、parselnt（）函数/parseFloat（）函数
①、parseInt:有两个参数，第一个参数为要转换的字符串，第二个参数为要转为的进制（一般为10进制）（从第一个效数字开始，直到遇到无效数字，如果从第一位不是有效数字，则直接返回NaN）

②、parseFloat：

使用注意：对于非string类型（布尔类型）使用parseInt()或parseFloat()时，会先将其转换为string类型在进行操作

Ⅳ、+和-0运算符
+直接调用Number()函数将其强制转换为number类型
-调用Number函数会让数值变为相反数，-0则和+一样

+直接调用Number()函数将其强制转换为number类型

-调用Number函数会让数值变为相反数，-0则和+一样
Ⅴ、转成布尔类型
函数Boolean()，0、空字符串（“”）、null、undefined NaN都会转换为false，而其他的均转换为true

4、 运算符
运算符的结合性：
① 自左至右

② 自右至左

Ⅰ、算术运算符
① 加法：

② 减法
③ 乘法
④ 除法：任何数除以0都得Infinity（无穷大）
2-4：字符串做减法、乘法、除法会转换为Number再进行运算
⑤ 取余：分母为0，返回NaN；分子为0，返回0
注意：非Number类型的值进行运算，会将这些转为Number然后再运算
任何值和NaN运算都是NaN
Ⅱ、赋值运算符
① 简单的赋值运算符：

② 复合的赋值运算符
a) +=
b) -=
c) *=
d) /=
e) %=
以上优先级最小
Ⅲ、关系运算符、

注意：对于非数值进行比较时，会将其转换成数值然后进行比较
Ⅳ、逻辑运算符
① &&（同时成立为真）

② ||（其中一个成立为真）

③ ！（取反）

Ⅴ、自增/减运算符

Ⅵ、三目运算符
条件表达式？语句1：语句2；
条件表达式为true取语句1的值，为false取语句2的值
注意：如果条件表达式的求值结果为非布尔值，会将其转换为布尔值然后再运算
Ⅶ、运算符的优先级
图示：

5、 代码块
在es5中，{}没用，在es6中，{}内的变量在括号外是无法拿到的
6、 流程控制语句
Ⅰ、顺序结构
默认的流程结构，按照书写顺序从上到下执行每一条语句
Ⅱ、选择结构
对给定的条件进行判断，再根据判断结果来决定执行哪一段代码
1）、if…else
2)、switch(){
Case n:break;
Default:
}
switch语句中的case后面的表达式是全比较（比较值和类型），全部匹配才会输出case语句后面的值
Case的穿透问题：未加break
Default可以在switch语句中任意位置
Ⅲ、循环结构
在给定条件成立的情况下，反复执行某一段代码
1）、While循环
While（条件表达式）{
语句1……
}
判断while语句的条件表达式是否为真，若为真，则执行，否则不执行
2）、do-while循环
执行流程：首先执行一次循环体，接着判断while中条件表达式是否为真，如果为真再次执行循环体，否则退出循环。
3）、for循环
注意：break语句在多层循环中只向外跳一层
7、 数组（Array）数组是一个对象（直接new一个数组）
Ⅰ、构造数组（Array）构造函数
如：var arr1 = new Array();
Ⅱ、使用数组字面量
如：var arr1 = [];(这种定义数组，长度用数组的属性来定义，arr1.lenth = 长度)
Ⅲ、数组原理：数组里可以存放任意类型的数据（数字，字符，布尔等）
Ⅳ、常用操作
a)、length 求数组的长度 数组的长度=数组名.length；（常用来取最后一个元素）
b）、取数组的元素 数组中指定的元素 = 数组名[索引值]；(数组的索引代表数组中的元素在数组中的位置，从0开始)
Ⅴ、数组元素的移入移出方法：
①、数组名.pop()，把数组最后一个元素移除，返回值为删除的元素
②、数组名.shift()，把数组第一个元素移除，返回值为删除的元素
③、数组名.push(‘小料’)，从数组最后添加一个元素‘小料‘，返回值为数组长度
④、数组名.unshift(‘小料’)，从数组的开头添加一个元素‘小料‘，返回值为数组长度
Ⅵ、判断是否为数组的两种方式：
①、检测名 instanceof Array；返回为true为是，反之；
②、Array.isArray(参数)；若是数组，则返回true，反之
Ⅶ、数组排序方法
直接使用数组的方法sort()，即：arr.sort(function(a,b){return a-b;})(return为a-b则升序排列，若为b-a，则降序排列)
8、 函数（Function）函数是一个对象（直接new一个函数）函数是object数据类型

定义函数：Ⅰ、函数声明方式定义函数
函数直接声明
Function 函数名(形参){
代码块；
}
Ⅱ、函数表达式声明方式
var sum = function(形参){
代码块；
}
函数直接声明和函数表达式声明的区别：直接声明在任意地方都可以执行，而函数表达式声明法不能在任意地方调用，只有执行到声明的地方以后才能使用
调用函数：函数名（实参）
JavaScript中没有函数标签，实参和形参可以不相等

Ⅲ、argument对象（伪数组对象）主要用来装函数传进的实参
argument里有一个指针callee，它指向argument所在的函数
作用一：用argument属性来对比形参和实参的个数是否相等
判断实参和形参必须要相等的时候才能执行可用此方法

作用二：用argument来存实参，然后可以调用其伪数组属性使得实参所有值成为一个数组来计算（可以使函数没有形参，而从argument中直接取实参来用）

Ⅳ、length属性，求函数形参的个数
Ⅴ、函数形参类型提示

{数据类型}形参名
Ⅶ、return
return本身存在函数，未写的时候，默认是return；即返回的是undefined
return可以返回任何类型的数据
Ⅷ、匿名函数（没有名字的函数）
作用1、在绑定事件的时候
如： document.onclick = function(){Alert(1);}
Document.onclick指在点击body（文档）时，触发匿名函数function（）。
作用2、定时器
如： setInterval(function(){
Console.log(‘每秒爱你一遍!’);
}1000)//setInterval是设置定时器,参数1000为1000ms，即1s钟执行函数一次。

作用3、立即执行函数

Ⅸ、回调函数（在函数内调用函数）
常用于递归
例子：简易计算器

Ⅹ、变量的作用域
① 不使用var声明的变量为全局变量（不推荐）
② 块级作用域：任何一对{}中的语句集都属于一个块，在这之中定义的所有变量都在代码块都是不可见的，称为块级作用域
③ 预解析：JS解析器执行代码的时候，分为两个过程：预解析过程和代码执行过程
预解析的过程：
1、 把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
2、 把函数的声明提升到当前作用域的最前面，不会提升调用
3、 先提升var，再提升function
9、 对象（Object）
Ⅰ、类和对象
类是一类事物，而对象是一类事物中的一个个体（万物皆对象）
Ⅱ、JS中的对象：
JS中的对象是无序属性的集合，其属性可以包含基本值、对象或函数
对象就是一组没有顺序的值，由一组组键值对构成
事物的特征在对象中用属性来表示
事物的行为在对象中用方法来表示

Ⅲ、JS中对象的分类
a) 内建对象（内置对象）
Es标准中自带的对象
b) 宿主对象
由JS的运行环境提供的对象，现在主要指由浏览器提供的对象
如：BOM对象，DOM对象
c) 自定义对象
Ⅳ、常见的创建对象的方式
①、对象字面量

{ }的字面量就是对象
注意：字面量对象的创建细节—变量用=连接对象，属性和行为后都用：进行描述
应用场景：数据的传递
②、new Object()创建对象

注意：直接new一个对象（即Object()），然后赋值需要用变量名加.

③、工厂函数创建对象（可量产）

注意：直接用函数构建一个传递参数进去的对象，在函数内部new一个对象，返回对象的变量
④、自定义构造函数（可量产）

注意：自定义构造函数对象中变量的参数用this，不需要重新new一个对象，然后调用函数，直接new函数名，即可创建一个对象，传递的参数不同，都是不同的对象。
Ⅴ、属性和方法
属性：如果一个变量属于一个对象所有，那么该变量就可以称之为该对象的一个属性。
方法：如果一个函数属于一个对象所有，那么该函数就可以称之为该对象的一个方法。
Ⅵ、new关键字
new关键字一般是和构造函数一起配合使用的

This和new的原理

Ⅶ、this（只能在函数内部）
①、普通函数执行，内部this指向全局对象window

上图str属于window，所以str可以直接在函数内部被this调用
②、如果函数作为一个对象的方法，被该对象所调用，那么函数内的this则指向该对象

上图name是对象的属性，在该内部行为（函数）调用this，那么this本身指向该对象，而this指向的对象就是该对象的某个（name）属性
③、构造函数中的this是一个隐式对象，类似一个初始化的模型，所有方法和属性都挂载到了这个隐式对象身上，后续通过new关键字来调用，从而实现实例化

上图中未用new调用函数时，函数是一个普通函数，而用new调用函数时，函数就成为了构造函数，而此构造函数中的this就直接指向构造函数内部的属性和方法。
Ⅸ、对象使用
①、遍历对象的属性（访问对象的属性）
输出构造函数内的值：
a)、console.log(字面量名.属性名)
b)、console.log（字面量名[‘属性名’]）
遍历对象用for（var key in 对象名）{
Console.log(key + ‘:’ + 对象名[key];
}
c)、调用对象里的方法用 字面量.方法()
②、删除对象的属性和方法：
关键字delete
直接用delete 对象名.属性/方法名
Ⅹ、变量和对象在内存中的区别
①、JS中的变量都是保存在栈内存中的，基本数据类型的值直接在栈内存中存储，值与值之间是独立存在，修改一个变量不会影响到其他变量
②、对象是保存到堆内存中的，每创建一个对象，就会在堆内存中开辟一块新的空间，而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性时，另一个也会受到影响。
③、数据在内存中的表现形式
a）、基本类型作为函数的参数
函数的形参会在栈区开辟空间
b)、复杂类型作为函数的参数
10、 内置对象
Ⅰ、Array对象
检测一个对象是否是数组
①、instanceof Array

但是使用instanceof 对象种类有问题，因为数组，函数等祖先都是Object，所以可以说数组是Object，函数也可以是Object（不能做到唯一性）
②、isArray（） （可以做到唯一性）

③、toString()和valuesOf()
toString()：把数组转换成字符串，逗号每隔每一项
valuesOf()：返回数组本身

④、常用方法
A）、join（自定义符号）
将数组元素组成一个字符串，以自定义的符号为分隔符，该方法只接收一个参数：即分隔符
B)、push()和pop()(在数组尾部操作，即栈顶)

Push返回的是加入后的数组长度

Pop返回的是数组弹出的值
C）、shift()和unshift()(在数组头部操作，即栈底)

Unshift返回的是加入后的数组长度
Shift返回的是数组弹出的值
D）、reverse()（反转数组的项的顺序）
E）、concat()（不会改变原来的数组）

F）、indexOf()和lastIndexOf()（有两个参数，第一个参数是要寻找的值，第二个参数是要从数组的哪个地方开始找）

上图为从头开始寻找，寻找的元素为4，从头开始的下标为2的元素开始寻找
G）、forEach() （遍历数组）
在es5中用function（value，index，array）{
Console.log(value);（输出函数值）
Console.log(index);（输出数组元素对应下标）
Console.log(array);（输出函数本身）}

H）、sort()

如果sort()不传参数进行排序，它是按照Unicode码进行排序
均是从第一个字符开始比较

Sort()一般传一个函数
Function sortNumber(a,b){
return a-b;
}

传的参数为a，b；
return 的a-b即从大到小排序
若为b-a即从小到大排序
也可以是字符串长度：即a，b都用其本身的属性：a.length/b.length
I）、map()
和forEach()类似，但是map()会将新的元素放在一个新的数组中

J）、filter

K）、every(且)

如上图，使得数组的函数值与其规定的值进行比较，如果都成立，返回true，如有一个不成立，则返回false。
L）、some(或)
与上面every相反，即有一个成立都返回true，都不满足才返回false。
Ⅱ、Math对象
Math.PI //圆周率
Math.random() //生成随机数
想要获得随机数的范围
直接用 Math.random() * (y-x) +x;
比如要随机数在3-8
即：Math.random() * (8-3) + 3;
Math.floor()/Math.ceil() //向下取整/向上取整
Math.round() //取整，四舍五入
Math.abs() //绝对值
Math.max()/Math.min() //求最大和最小值
Math.sin()/Math.cos() //正弦/余弦
Math.power()/Math.sqrt() //求指数次幂/求平方根
Ⅲ、String对象
字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会产生一个新的字符串（即原字符串开辟的空间不会消失，而新的字符串有开辟了一个空间。）
①、获取字符串中字符的个数：str.length
②、字符方法：
a)、charAt() //获取指定位置处的字符

b）、charCodeAt() //获取指定位置处的字符的ASCLL码(同上)
c）、下标获取 //和charAt()等效

③、字符串操作方法
a)、concat() //拼接字符串，等于+，+更常用
b）、slice() //从start位置开始，截取到end位置，end取不到，原数组不会被影响
splice() //数组删除splice（第几个开始，要删除几个），原数组会被影响
c）、 substring() //从start位置开始，截取到end位置，end取不到
d）、substr() //从start位置开始，截取length个字符

④、位置方法
a)、indexOf() //返回指定内容在元字符串中的位置
b）、lastindexOf() //从后往前找，只找第一个匹配的
⑤、去除空白
trim() //只能去除字符前后的空白

⑥、大小写转换
a）、toUpperCase() //转换大写
b）、toLowerCase() //转换小写

⑦、split(分割字符)
Split(分割字符)是把某个字符串按照分割字符将其分成一个数组，数组的项以分隔符为界分开。
⑧、URL（地址）转化为对象

⑨、replace（替换字符）
只能替换第一个要替换的字符，字符串名.replace(‘要替换的字符’，‘换成的字符’)；
Ⅳ、Date对象
首先声明一个时间对象，即：var date = new Date();
获取当前的时间戳的四种方法：
1、date.valueOf();
2、date.getTime();
3、在声明对象时在new前加一个 + 号

4、H5新增的方式，直接用Date.now();
JS特效
一、DOM（文档对象模型）

Ⅰ、window和document
①、window（属于BOM）

②、document

可以通过document拿到文档内所有的标签

通过document拿到div对象

Ⅱ、事件
事件：触发-响应机制
用户和浏览器之间的交互行为，例如：点击按钮，鼠标进入/离开、双击等。。。
事件的三要素：
①、事件源：触发（被）事件的元素
②、事件名称：click点击事件
③、事件处理程序：事件触发后要执行的代码（函数形式）
传统的事件解绑方式：在事件最后给当前事件赋值一个null，即eventTarget.onclick = null
方法监听注册方式：eventTarget.removeEventListener(事件，function（）)

Ⅲ、文档加载过程
Script 标签如果要写在html头部，必须要加上windom.onload加载事件（即当所有页面加载完成后再执行script标签。（推荐把script写在最后）

Onload事件会在整个页面加载完成后才触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保代码执行时所有的DOM对象已经加载完毕
Ⅳ、文档元素获取
①、根据id获取元素
②、根据标签名获取元素
③、根据name获取元素
④、根据类名获取元素
⑤、根据选择器获取元素
下图第一种方法为id获取元素；第二种方法为class获取元素；第三种方法为根据标签获得元素，第四种为根据name获得元素，最后面的根据选择器获取元素。

Ⅴ、节点之间的关系
①、获取父元素
先拿到当前节点，然后用当前节点加上本身的APIs中的parentNode直接可以拿到他的父节点

②、上一个兄弟节点
当拿到一个标签时，想拿到他的上一个兄弟节点，就用previousElementSibling || previousSibling 即可获得当前标签的上一个标签

③、下一个兄弟节点
当拿到一个标签时，想拿到他的下一个兄弟节点，就用nextElementSibling || nextSibling 即可获得当前标签的下一个标签

④、获取标签中的第一个子节点
当拿到一个父元素标签时，想要得到当前父元素的第一个子元素，则用
firstElementChild || firstChild

⑤、获取标签中的最后一个子节点
当拿到一个父元素标签时，想要得到当前父元素的最后一个子元素，则用
lastElementChild || lastChild

⑥、获取所有元素节点
当拿到一个父元素 标签时，想要得到其所有的元素，则用child Nodes
只想要元素节点，用 children

如果只能用childNodes来获取标签节点，则用以下这个方法：

其中push是把当前元素直接放入指定的数组
其中每种元素都有其单独的nodeType值：

⑦、获取任意兄弟节点

当拿到某个父级元素时，要拿其里面的任意兄弟节点
Ⅵ、节点操作
①、增加节点元素：
Document.creatElement(‘标签名’)；
例如：

在最后追加元素用appendChild属性，
在任意位置添加元素用insertBefore，这两个属性都有两个参数，第一个参数时要新加入的标签名，第二个参数是参照某个标签的位置来添加（当要拿某个参照的元素时，必须在script标签中拿到要参照的标签）

当拿到button标签时，才能以它为参照添加在其前面。
②、删除某个节点元素
1.拿到某个标签，直接调用删除方法
remove（）

2.把某个节点从他的父节点中移除
直接拿到父级元素，然后用方法removeChild()

③、克隆标签（带ID的标签不能克隆）
1.浅克隆（只克隆当前标签元素，不克隆子元素）
当拿到某个标签时，想要克隆，直接调用方法cloneNode()；

2.深克隆（克隆当前元素，而且包括其子元素，在方法cloneNode()中传参数）

④、节点属性的操作
1.增加元素的属性
先获取到要操作的某个节点
用方法setAttribute()即可，方法又两个参数，第一个参数为当前标签的属性，第二个为属性的值。

2.删除元素的属性
用方法removeAttribute()即可，直接传一个参数（属性名）

3.获得元素属性的方法
用getAttribute()即可。
4.H5自定义属性的方法，自定义属性的名称以data-自定义名称开头，而获取此自定义属性的方法用dataset.自定义名称或者是dataset[‘自定义名称’]（ie11以上才兼容）
注意：如果自定义属性里面有多个短横线（-）链接的单词，我们获取的时候采取驼峰命名法获取

⑤、三种动态创建元素的区别
1、document.write（）是直接讲内容写入页面的内容流，但是当文档执行完成时，他会导致页面全部重新绘制。
2、innerHTML是讲内容写入某个DOM节点，不会导致页面全部重新绘制
3、innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂。
4、createElement（）创建多个元素效率稍微低一点点但是结构更清晰
注意：innerHTML创建多个元素的时候，使用拼接字符串的方式效率比createElemrnt（）效率低，但是当innerHTML采取数组的形式拼接，效率则会比createElement高。
补充的方法：
1、在js中要改css的样式，必须用style方法，如：

2、改变文本的内容，用innerText方法，如：

3、常用的鼠标事件
①、监听鼠标进入图标
使用方法onmouseover
②、监听鼠标离开图标
使用方法onmouseout
③、监听鼠标移动
使用方法onmousemove

4、同步和异步问题
JS中把代码分为同步任务和异步任务，先执行完同步任务再执行异步任务。
同步任务都在主线程上执行，形成一个执行栈
异步任务包括（普通事件，如click，resize等，资源加载，如load，error等，定时器等）
①、绑定元素
在处理for循环的同步和异步问题时，可以给同元素绑定一个新的属性，然后取这个新的属性使得功能实现

②、闭包
用闭包函数（函数）（实参参数）

5、value、innerHTML、innerText
innerHTML和innerText区别：innerText不会识别html标签，而innerHTML会识别html标签（即html标签会起作用）；在获取内容时，innerText会去除html标签，同时空格和换行也会去掉，innerHTML不会。
6、onfocus(获取焦点)、onblur（失去焦点）

Onfocus事件是当鼠标获取到输入框的时候，发生一些变化
Onblur事件是当鼠标点击其他地方时，有发生一些变化
7、onchange事件
表单域发生变化的时候，可以监听到

8、contextmenu事件

9、selectstart事件

也可以用return false达到相同效果
10、常用的键盘事件
①、onkeyup（某个键盘按键被松动时触发）
②、onkeydown（某个键盘按键被按下时触发）
③、onkeypress（某个键盘按键被按下时触发，注意：它不会识别功能键，如：ctrl，shift箭头等）
三个执行的顺序为：keydown keypress keyup

Keycode属性可以返回被按下键盘的ASCLL码

Keyup和keydown是不区分大小写，而keypress要区分大小写
Ⅷ、九宫格布局
把一个大盒子看成一个矩阵，给每一个子元素添加数组一样的索引（即下标，从0开始），可以根据每一个盒子所在的行列来算出当前盒子的位置，即可以使指定盒子定位到指定的位置。

Ⅸ、Date
Date对象基于1970年1月1日（世界标准时间）起的毫秒数

二、BOM
Ⅰ、窗口加载事件：
①、document.addEventListener(‘load’,function(){})
②、document.addEventListener(‘DOMCintentLoaded’,function(){})(仅当DOM加载完成，不包括样式表、图片、flash等等，比load快)
Ⅹ、定时器
应用的方向：
第一、JS的程序的执行速度是非常快的，如果希望一段程序，可以每隔一段时间执行一次，可以使用定时调用
第二、每一段程序需要在延迟多少时间后执行，可以使用定时器调用
1、循环执行
用方法setInterval（函数，时间（毫秒））
注意：此定时器第一次有空白，解决方法：先调用当前函数，再执行定时器即可。
2、结束定时器
用方法clearInterval（定时器id） 注意：定时器id是每个定时器固有的属性，即从1开始，可以用一个变量用于接收该定时器的id，然后结束定时器时就可以直接调用此id
3、防止定时器叠加问题（先清除后设置）
在事件内绑定定时器，可能出现定时器累加的情况。
解决问题：进入事件后的第一件事就是先清除定时器，然后再设置定时器。

4、一次性定时器
用方法setTimeout（函数，经过的时间）

非匀速运动的公式：起始值 +=（结束值–起始值） * 缓动系数（0-1）一般为0.2

事件对象

事件响应的细节：
一个元素绑定多个事件，当用on事件时，最后一个事件会覆盖之前的所有事件，而用
Addeventlistener则会依次执行

JS事件传递机制
从内到外就是冒泡机制，从外到内就是捕获机制

补充：e.target获取点击的元素，兼容写法：e.target?e.target:e.srcElement(三目运算符)
1、冒泡机制：
冒泡顺序：div->body->html->document->window
不是所有的事件都能冒泡，以下事件不能冒泡：blur(失去焦点的时候)、focus（获取焦点的时候）、load、unload、mouseenter、mouseleave

未阻止冒泡的时候，当点击按钮的时候，会触发三个事件，而阻止了冒泡时，当点击按钮的时候，会直接阻止后面的冒泡
阻止冒泡的兼容写法：if(event&&event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
和冒泡相关的两个事件的区别（mouseover和mouseenter）
Mouseover鼠标经过自身盒子会触发，经过子盒子还会触发；而mouseenter只会经过自身盒子时才触发，即mouseenter不会冒泡，同理，mouseleave事件也不会冒泡，其他功能和mouseover、mouseout一样。
2、捕获机制
Element.addEventListener(event,function,useCapture)
红色为可选，布尔值，指定事件是否在捕获或冒泡阶段执行。
当useCapture为true时，事件句柄在捕获阶段执行
当为false时（false为默认值）事件句柄在冒泡阶段执行

选中内容获取：window.getSelection()，当要转为字符串时，直接使用方法toString()即可

常见事件对象的属性和方法：
1、e.target和this的区别：e.target点击了那个元素就返回那个元素，而this返回的是绑定事件的元素

事件委托的原理：
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后使用冒泡原理影响设置每个子节点。
例如：给ul注册点击事件，然后利用对象的target来照到当前点击的li，因为点击li，事件会冒泡搭ul上，ul有注册事件，就会触发事件监听器。（我们相当于只操作了一次DOM，提高了程序的性能）
显示当前窗口屏幕高宽度：window.innerWidth(宽)，window.innerHeight(高)；

Location对象
1、URL：统一资源定位符是互联网上标准的地址，互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎样处理它
URL的一般语法格式为：protocol：//host[：port]/path/[？query]#fragment
例如：http://www.itcast.cn/index.html?name=andy&age=18#link

2、location对象的属性

重点记住：href和search
Href属性：当直接打印location.href时，返回的是当前页面的地址，如果需要跳转页面，则可以重新给它赋值，即location.href = ‘http://www.baidu.com’;

3、location对象的方法

Navigator对象
Navigatior对象包含有关浏览器的信息，他有很多属性，最常用的是userAgent，该属性可以返回由客户机发送服务端的user-agent头部的值。
例如：

如果是pc端就打开pc端的页面，如果是移动端，就打开移动端的页面。

History对象
Window对象提供的history对象，与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口中）访问过的URL

三大家族
第一家族：offSet家族（offSet自己的，用于获取元素尺寸，针对盒子元素）
1、OffsetWidth和offsetHeight（获取对象自身的宽度和高度，包括内容、边框和内边距；即：offsetWidth = width + border + padding）
2、offsetLeft和offsetTop（距离第一个有定位的父级盒子左边和上边的距离）
注意：父级盒子必须要有定位，如果没有，则最终以body为准，offsetLeft和offsettop从父标签的padding开始计算，不包括border
3、offsetParent（返回当前对象的父级（带有定位）盒子，可能是父亲，也可能是爷爷）
盒子.Noteparent是取当前元素的父元素，与offsetParent不同
4、offsetXXX和styleXXX的区别
一般拿元素的上下左右边距用offsetXXX，而赋值则用styleXXX
StyleXXX只能获取行内的，而offsetXXX则可以获取到所有的
Offset返回的是数字，而styleXXX返回的是字符串，除了数字还有单位px
OffsetXXX是只读的，而styleXXX是可读写的

第二家族：scroll家族（）
scrollTop：滚出页面的高度；
scrollleft:滚出页面的宽度；

ScrollTo(x,y)；x，y表示跳转到页面的定位（x表示横轴，y表示纵轴）
1、严格模式和怪异模式

使用：document.compatMode（值为BackCompat为怪 异模式，而值为CSS1Compat为严格模式）
要想使得所有浏览器都兼容scrolltop使用

第一个window.pageYOffset是所有浏览器最新版本的一种使用方法，document.documentElement.scrollTop是严格模式版本的兼容写法，而最后一种是古老版本浏览器的兼容写法
第三家族：client家族（）
clientWidth和clientHeight（获取对象自身的宽度和高度，包括内容和内边距；即：clientWidth = width + padding）
clientLeft和clientTop（返回元素边框的borderWidth，left返回左边框宽度，top返回上边边框的宽度）

立即执行函数：不需要调用，立马能够自己执行的函数
写法：
（function（） {}）（）或者（function（）{}（））；

三大家族的分别：

JSON：
1、概念：JSON（javascript Object Notation）是一种轻量级的数据交换格式
它基于ECMAScript的一个子集，相比于XML（重量级的数据交换格式），json易于阅读和编写，同时也易于机器解析和生成，目前数据传递基本上都是用json，它类似与js中的字面量对象。
作用：用于前后端的数据交互
2、组成：两大结构，对象和数组（两种结构相互组合而形成各种复杂的数据结构）

onscroll事件（监听页面滚动变化，当页面发生滚动时触发）
如：
变量名.addEventListener（’scroll’,function(){
}）
onresize事件（监听窗口发生变化，当窗口发生变化时触发）
如：
变量名.addEventListener（’resize’,function(){
}）

动画实现原理：
核心原理：通过定时器setIntervl（）不断移动盒子的位置
1、获得盒子的当前位置。
2、让盒子在当前位置加上一个移动距离。
3、利用定时器不断重复这个操作。
4、加一个结束定时器的条件。
5、注意此元素需要添加定位，才能使用element.style.left。

本地存储：
本地存储特性：

①、window.sessionStorage
Ⅰ、生命周期为关闭浏览器窗口
Ⅱ、在同一个窗口（页面）下数据可以共享
Ⅲ、以键值对的形式存储使用

②、window.localStorage
Ⅰ、生命周期永久生效，除非手动删除，否则关闭页面也会存在
Ⅱ、可以多窗口（页面）共享（同一浏览器可以共享）
Ⅲ、以键值对的形式存储使用

注意：
本地存储只能存放字符串的数据格式，需要把数组对象转换为字符串格式，语法：
JSON.stringify();
获取本地存储的数据时，需要把本地存储的字符串格式的数据转换为对象格式，语法：
JSON.parse();
Change事件，判断表单是否发生变化，发生变化执行回调函数