1、js导读
渲染引擎：用了来解析html与css，俗称内核，如blink、webkit
js引擎：也称js解释器，用来读取网页中的js代码，对其进行处理运行，如chrome的v8
浏览器本身不会执行js代码，是通过js引擎（解释器）来执行js代码。js引擎执行代码时逐行解释每一句源码（转换为机器语言），然后通过计算机执行，所以js为脚本语言，会逐行解释执行。
JavaScript=ECMAScript（js语法）+DOM（页面文档对象模型）+BOM（浏览器对象模型）
ECMAScript：规定了js的变成语法和基础 核心知识，所有浏览器厂商共同遵守的一套js语法工业标准
DOM：文档对象模型，w3c组织推荐的处理可标记语言的标准编程接口，通过DOM提供的接口可以对页面上的各种元素进行操作
BOM：浏览器对象模型，提供了独立于内容、可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等
2、变量
变量 是程序在内存中申请的一块用来存放数据的空间
使用var 声明变量，声明后，计算机自动为变量分配内存空间
只声明不赋值，输出为undefined
不声明不赋值直接用，会报错
不声明直接赋值使用，可以使用，但不提倡，会变成全局变量
有些变量有自身的含义，不能作为变量名如name
js变量数据类型只有在程序运行过程中根据等号右边的值进行判断，数据类型可动态变化
八进制，数字前加0，010=8
十六进制，数字前加0x，0x9
Number.MAX_VALUE 最大值
Number.MIN_VALUE 最小值
Number.MAX_VALUE*2 无穷大infinity
-Number.MAX_VALUE*2 无穷小-infinity
'abc'-100 非数字Na N
isNAN(12):判断是否是非数字，返回布尔值
str.length 字符串长度
加号字符串拼接，只要前面是字符型，后面无论是什么类型，都会变成字符型
布尔值参与加法运算当作1和0来算
未定义可以主动赋值：var a=undefined;可和字符串做连接运算
空值null加数值型为原数值型
typeof 变量：检测数据类型
prompt结果为字符型
字符串转换toString(),String(),加号拼接
parseInt('120px')=120 parseInt('qwe120px')=NaN
隐式转换（-*/）
''、0、NaN、null、undefined会转换为false，其余为true
编译器在代码执行之前进行编译，生成中间代码，解释器在运行时进行及时解释，并立即执行
避免浮点数直接参与运算，有精度缺失问题
表达式（数字+变量+运算符）的值为返回值
比较运算符的==号会有隐式转型（字符串与数值型 ）
switch与case要全等匹配
数组
直接修改数组的length，多余的值为undefined
3、函数
function 函数名（形参1,形参0...）{}
实参个数大于形参，多余的不参与运算
实参个数小于形参，多余的为undefined
函数如无return，则返回undefined
当不确定有多少参数传递时，用arguments来获取，所有函数都内置了arguments对象，存储了所有实参，他是一个伪数组，具有length，按索引存储，不具有push、pop方法
var 变量名=function(){} 函数表达式 匿名函数
作用域：限定名称的可用代码范围就是它的作用域，提高程序的可靠性和减少命名冲突
全局作用域：整个script标签，或者单独的一个js文件
局部作用域：在函数内部就是局部作用域
全局变量：在全局作用域下的变量，全局可用，在函数内部不声明直接赋值也是全局变量
局部变量：局部作用域下的变量，函数内部使用，形参也为局部变量
执行效率：全局变量只有在浏览器关闭时才会销毁，占内存资源，局部变量在程序执行完就会销毁，节约内存资源
在es6才有块级作用域{}
内部函数访问外部函数的变量，采取的是链式查找的方式来决定取值，也就是就近原则
js解释器在运行js代码时分两步：预解析和代码执行
预解析：js引擎会将js中所有var和function提升到当前作用域最前面
变量预解析：把变量声明提升到当前作用域最前面，不提升赋值
函数预解析：函数表达式声明函数时，和变量提升一样，函数提升只会提升var a;但是函数实现在调用后面前，所以会报错
var a=b=c=9;相当于var a=9;b=9;c=9;则b和c是全局变量
4、对象
对象：由属性和方法组成
属性：事物的特征，在对象中用属性来表示（名词）
方法：事物的行为，在对象中用方法来表示（动词）
构造函数：将对象里的一些相同的属性和方法抽象出来封装到函数里，是一种特殊的函数，用来初始化对象，构造函数首字母大写
构造函数是泛指某一类，对象则是特指某一个，利用构造函数创建对象也叫对象的实例化
new①构造函数在内存中创建一个空对象②this指向这个空对象③执行构造函数中的代码，给空对象添加属性方法④返回这个对象
for in遍历对象
js中对象分为三类：自定义对象、内置对象、浏览器对象
Math.PI圆周率
Math.max(),一组数的最大值，如果至少有一个无法转换未数字则返回NaN，无参数返回-infinity
Math.floor()向下取整
Math.ceil()向上取整
Math.round()四舍五入
Math.abs()绝对值，数字型字符串有隐式转换
Date()是一个构造函数需要new，无参数则返回系统当前时间
new Date()参数可为数字型(2019,10,1),返回时间月份比实际写的参数多1,字符串型('2019-10-01 8:8:8')
getFullYear() 返回当前日期的年
getMonth()返回当前月份0-11，所以实际要加1
getDate()返回当天日期
getDay()返回星期几，周日0到周六6
getHours()返回当前小时
getMinutes()返回当前分钟
getSecond()返回当前秒数
valueOf()返回距离1970年1月1日总毫秒数
getTime()返回距离1970年1月1日总毫秒数
+new Date()返回距离1970年1月1日总毫秒数
Date.now(),H5新增的返回距离1970年1月1日总毫秒数
数组对象
new Array(2)：表示创建了一个长度为2的两个空元素
instanceof：运算符 检测是否为某个类型
obj instanceof Array
isArray():判断参数是否为数组，ie9以上支持
push():在数组末尾添加元素，可以写多个参数，返回值为新数组长度，原数组产生变化
unshift():在数组前面添加元素，可以写多个参数，返回值为新数组长度，原数组产生变化
pop():删除数组最后一个元素，返回值为删除的元素，原数组产生变化
shift():删除数组第一个元素，返回删除的值，原数组产生变化
array.reverse():翻转原数组
array.sort():排序原数组
a = [1, 4, 77, 5, 6];
• a.sort(function(a, b) {
• return a - b; 升序 降序b-a
• })
array.indexOf('pink'，[起始位置]):查找元素在数组中的索引下标，只返回第一个满足的，如未找到返回-1，arr.lastIndexOf则相反
array.toString():数组转换为字符串
array.join(分隔符):以分割符显示字符串
concat()连接多个数组，不影响原数组
slice(begin,end):截取出新的数组
splice(第几个开始,删除的个数)：返回新的数组，影响原数组
字符串对象
字符串不可变，修改是返回一个新的字符串
字符串查找和数组类似
charAt(index):返回指定位置的字符
charCodeAt(index):获取指定位置处的ASCII
str[index]:返回指定位置的字符
concat(str1,str2...)连接多个字符串等价于+
substr(start,length):从start位置开始（索引），length为取得个数
slice(begin,end):start开始，到end，end取不到
substring(start,end):从start位置开始，截取到end位置，end取不到，不接受负值
replace('被替换的字符','替换后的字符'):只替换第一个
split('分隔符')：字符串转换为数组
数据类型
值类型（简单数据类型）：存储变量时存储值本身，由操作系统自动分配释放，类似于栈string,number,boolean,undefined,null
引用数据类型(复杂数据类型)：存储变量时存储的是地址（引用），一般由程序员分配释放，如程序员不释放，由垃圾回收机制回收，类似于堆
通过new关键字创建的对象（系统对象、自定义对象），Object、Array、Date等
5、DOM
API：是一些预先定义的函数，给程序员提供的一种工具接口，以便于能更轻松的实现想要实现的功能，不需要管接口内部实现
Web API：是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
DOM：文档对象模型，w3c组织推荐的处理可标记语言的标准编程接口，通过DOM提供的接口可以对页面上的各种元素进行操作
W3C定义了一系列DOM接口，通过这些接口可以改变网页的内容、结构和样式
文档：一个页面就是一个文档，DOM使用document表示
元素：页面中的所有标签都是元素，DOM使用element表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM使用node表示
document.detElementById(id),匹配Element对象，若在当前Document下未找到，返回null
console.dir()打印元素对象，更好查看属性和方法
getElementsByTagName()获取指定标签名对象的集合（伪数组）
document.body获取body
document.documentElement获取html
事件
事件三要素：事件源、事件类型、事件处理程序
事件源：事件触发的对象
事件类型：如何触发，什么事件，如鼠标经过、鼠标点击
事件处理程序：通过一个函数赋值方式完成
innerText不识别html标签，非标准，innerHTML识别html标签，也保留空格和换行， W3C标准
element.className=''，修改类名，会覆盖原来的
element.getAttribute('属性') 获取属性
element.属性=值，element.setAttribute('属性','值')，一般前者设置内置属性值，后者设置自定义属性值
element.removeAttribute('属性')移除属性
H5新增自定义属性规范,data-index=‘1’
H5新增从data集合中获取element.dataset.index或者element.dataset['index'] dataset中存放所有以data开头的自定义属性 data-list-name对应dataset.listName ie11
节点操作
网页中所有元素都是节点（属性，元素，文本），用node表示，DOM树中的所有节点均可通过js进行访问，所有HTML节点均可被修改、创建和删除
节点至少拥有nodeType(节点类型)、nodeName（节点名称）和nodeValue（节点值）三个基本属性
元素节点nodeType为1，属性节点nodeType为2，文本节点nodeType为3（文本节点包括文字、空格、换行等）
element.parentNode：获取离元素最近的父元素节点，无父节点返回为空
parentNode.childNodes：返回包含指定节点的子节点的集合，会识别到元素节点、文本节点等，一般不使用
parentNode.children：获取所有子元素节点
parentNode.firstChild:获取第一个子节点
parentNode.firstElementChild:获取第一个子元素节点，ie9
parentNode.lastChild:获取最后一个子节点
parentNode.lastElementChild:获取第最后一个子元素节点，ie9
node.nextSinling 获取当前元素的下一个兄弟节点，找不到返回null ，包含所有节点
node.previousSinling 获取当前元素的上 个兄弟节点，找不到返回null ，包含所有节点
node.ne g 获取当前元素的下一个兄弟元素节点，找不到返回null ie9
node.previousElementSinling 获取当前元素的上 个兄弟元素节点，找不到返回null ie9
var li=document.creatElement('li') 创建元素节点
node.appendchild(child)将一个节点添加到指定父节点的末尾，类似：：after
node.insertBefore(child,指定元素)在父结点中指定元素前添加节点
node.removeChild(child)删除父节点中的 元素
href="javascript:;"或者href="javascript:void(0);"阻止链接跳转
node.cloneNode()返回节点的一个副本，克隆之后还需要添加，如果参数为空或者false就是浅拷贝，至科只克隆节点本省本身，不克隆子节点，括号中为true就是深拷贝
document.write('<div>123</di v>'):直接将内容写入页面的内容流，当文档流执行完毕，会导致页面重绘，只剩下添加的内容
element.innerHTML：内容是拼接字符串，每次开辟空间，效率会低， 可以用字符数组拼接来提高效率，比直接创建高
document.createElement()：直接创建元素，结构清晰一些 ，效率会比拼接字符串高一些
事件高级
传统注册on开头的事件，但是同一个元素同一个事件只能设置一个处理函数 ，后注册的处理函数会覆盖前面注册的处理函数
方法监听注册事件 ，addEventListener()方法，ie9以前用attachEvent代替，同一个元素同一个事件可注册多个监听器（事件处理函数 ），按注册顺序执行
attachEvent事件监听 ，ie9以前
eventTarget.attachEvent('onclick',事件处理函数 )
传统事件删除eventTarget.οnclick=null
方法监听eventTarget.removeEventListener,需要事件监听器外置
attachEvent的解绑为detachEvent
DOM事件流
事件流描述的是从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程叫DOM事件流
DOM事件流分为三个阶段：
①捕获阶段：从Document先接收到点击事件，但是无处理函数，往下一直找，直到找到事件源，成为捕获阶段
②当前目标阶段：事件执行者
③冒泡阶段：从目标阶段一直往上冒泡，都接收到点击事件，查询是否绑定处理函数，一直到Document
事件冒泡：ie最早提出，事件开始时由最具体的元素接受，然后逐级向上传播到DOM最顶层节点的过程
事件捕获：网景最早提出，由DOM最顶层结点开始，然后逐级向下传播到最具体的元素接受的过程，节点都会接收到点击事件，如果有处理程序就执行
js代码中只能执行捕获或者冒泡其中一个阶段
onclick和attachEvent只能得到冒泡阶段
addEventListener('click',function(){},true),第三个参数为true时处于捕获阶段
addEventListener('click',function(){},false),第三个参数为false时处于冒泡阶段 （默认）
onblur、onfocus、onmouseenter、onmouseleave无冒泡
事件对象
event就是一个事件对象，写在侦听函数括号里面，当形参使用，事件对象只有有事件才会存在，系统自动创建，不需要传递参数，事件对象是事件发生后事件的一系列相关数据的集合，如鼠标事件包含了鼠标的相关信息--鼠标坐标等，键盘事件--判断用户按下的键，event可以自己命名ie678通过window.event，e=e||window.event
e.target和this的区别:e.target返回的是触发事件的对象（点了谁就是谁），this返回的是绑定事件的对象，e.current也是返回绑定事件对象，有兼容性问题
e.type返回事件类型
e.preventDefault():阻止事件默认行为 低版本浏览器使用e.returnValue;在传统注册事件方式时，处理函数中直接return false也可以阻止默认行为
e.stopPropagation():阻止冒泡行为，ie低版本使用e.cancelBubble=true
事件委托（代理、委派）
原理：不是给每一个子节点单独设置事件监听器，而是将事件监听器设置在父节点上，然后利用冒泡原理影响设置每个子节点，只操作了一次DOM，提高了程序的性能
鼠标事件
contextmenu：鼠标右击事件
selectstart:鼠标选中事件
e.clientX和e.clientY:获得鼠标在可视区域的坐标
e.pageX和e.pageY:返回鼠标相对于文档页面的XY坐标，ie9+支持
e.screenX和e.screenY：距离电脑屏幕的坐标
键盘事件
onkeyup某个按键被松开时触发
onkeydown：某个按键被按下触发，比keypress更有先触发
onkeypress：某个按键被按下触发，但是不识别功能键如ctrl、shift
e.key:按键，但是兼容性问题很大，
e.keyCode:返回该键的ASCII 要区分大小写要使用keypress
6、BOM
BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象为window
BOM由一系列对象构成，并且每个对象都提供了很多方法和属性
BOM缺乏标准，js语法标准化组织时ECMA，DOM标准化组织时W3C，BOM最初是NetScape浏览器标准的一部分
BOM的顶级对象为window，BOM是浏览器厂商在各自浏览器上定义的，兼容性较差
window.οnlοad=function(){}等页面文档所有元素加载完再执行此事件，有了此事件可以将js代码写在页面元素的上方，但是只能写一次，以最后一个window.load为准
DOMContentLoaded事件触发时，仅当DOM加载完成时，不包括样式表，图片，flash等，适用于图片较多，从用户访问到onload需要较长的时间
window.onresize串口大小调整事件
window.innerWidth当前屏幕的宽度
定时器
window.setTimeout(调用函数,[延迟的毫秒数])：设置定时器，再定时器到之后执行调用函数，省略时间就默认为0，函数名也可以'函数名()',但是不提倡
回调函数：上一件事做完，再回头调用这个函数
window.clearTimeout(timeoutID)：清除定时器
window.setInterval(回调函数,[间隔时间])：重复调用一个函数，每个这个时间就调用一次回调函数，window可省略
一般来说，this指向调用的对象，在全局作用域或普通函数中this指向window，定时器中的this也指向window，在方法中的this指向方法的调用者
js同步与异步
同步：前一个任务结束后再执行后一个任务，程序的执行顺序和任务排列一致、同步的
异步：在做一件事时，因为这件事会花费很长时间，在做这件事的同时，可以去处理其他事情
同步任务 ：同步任务都在主线程上执行，形成一个执行栈
异步任务：js异步任务时通过回调函数实现的，异步任务相关回调函数添加到任务队列（消息队列）中
普通事件：如click、resize等
资源加载：如load、error等
定时器：包含setInterval、setTimeout等
js执行机制：把所有任务分为同步和异步任务， 先执行执行栈中的同步任务，异步任务（回调函数）放入任务队列中，一旦执行栈中所有的同步任务执行完毕，系统按照次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈开始执行
当有异步任务时，提交给对应的异步进程处理 ，异步任务完成，进入任务队列中，
由于主线程不断重复获得任务、执行任务、再获取任务、在执行，所以这种机制被称为事件循环
location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL，因为这个属性返回的是一个对象，所以也叫做location对象
location.href：获取或设置整个URL
location.host：返回主机（域名）
location.port：返回端口号，如果为空返回空串
location.pathname：返回路径
location.search：返回地址栏参数
location.hash：返回片段，也就是#后面内容，常见于链接、锚点
location.assign(url):页面跳转，记录了浏览历史，所以可以实现后退功能
location.replace(url)：替换当前页面，不记录历史，所以不能后退页面
location.reload():重新加载页面，相当于刷新页面，如果参数为true，就是强制刷新（不用缓存数据，直接从服务器读取）
navigator对象
navigator对象包含有关浏览器的信息，它有很多属性，常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值
history对象
window对象给我们提供了一个history对象，与浏览器历史记录进行交互，该对象包含用户（浏览器窗口中）访问过的URL
history.back():可以后退功能
history.forward():前进功能
history.go(参数)：前进后退功能，参数是1就是前进一个页面，-1就是后退一个页面
PC网页特效
offset：offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等
注：获得元素距离带有定位父元素的位置
获得元素自身的大小
返回的数值不带单位
element.offsetParent:返回作为该元素带有定位的父级元素，如果父级元素都没有定位就返回body
element.offsetTop：返回元素相对带有定位父元素上方的偏移
element.offsetLeft：返回元素相对带有定位父元素左边框的偏移
element.offsetWidth：返回自身包括padding、边框、内容区的宽度、不带单位
element.offsetHeight：返回自身包括padding、边框、内容区的高度、不带单位
offset和style的区别：style只能获取行内样式表中的样式值，而且获得不包含padding和border的值，最重要的是style是可读写，而offset是只读
client：使用client系列相关属性来获取元素可视区的相关信息，通过相关属性可以动态得到该元素的边框大小、元素大小等
element.clientTop：返回元素上边框的大小
element.clientLeft：返回元素左边框的大小
element.clientWidth：返回自身包括padding、内容区的宽度、不带单位
element.clientHeight：返回自身包括padding、内容区的高度、不带单位
立即执行函数：(function(){})()或者(function(){}())， 不需要调用，立马能够自己执行的函数,第二个括号就是参数，立即执行函数作用就是，独立创建了一个作用域，里面是局部变量，不会有命名冲突
window.devicePixelRatio获得物理像素比
scroll：动态得到该元素的大小、滚动距离等
element.scrollTop：返回被卷去的上侧距离
element.scrollLeft：返回被卷去的左侧距离
element.scrollWidth：返回自身实际内容的宽度、不带单位
element.scrollHeight：返回自身实际内容 的高度、不带单位
scroll：滚动事件
window.pageYOffset：获得页面被卷去的距离
window.pageXOffset：获得页面左侧被卷去的距离
mouseenter与mouseover区别：mouseover会冒泡
动画函数封装
原理：通过定时器setInterval()不断移动盒子位置
参数：动画对象和移动到的距离
<script>
vardiv=document.querySelector('div');
functionanimate(obj, target) {
clearInterval(obj.timer);
obj.timer=setInterval(function() {
if (obj.offsetLeft>=target) {
clearInterval(obj.timer);
} else {
obj.style.left=obj.offsetLeft+1+'px';
}
}, 1);
};
animate(div, 400);
</script>
当不断点击按钮触发动画时，一直点击会加快速度，创建开启多个定时器，可以先将其他定时器清除，然后再执行代码
速度缓动公式：（目标值-现在的位置）/10 ，每次的步长
停止条件：让当前盒子位置等于目标位置就停止
动画函数添加回调函数：函数可以作为一个参数，将这个参数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去这个函数，这个过程就叫回调，位置写在定时器结束的位置
节流阀：当上一个函数动画内容执行完毕之后，再执行下一个，让事件无法连续触发 思路：利用回调函数，添加变量，执行之前取反操作，锁住函数和解锁函数
window.scroll(x,y):滚动窗口至文档中特定位置,不需要单位
7、移动端
触屏事件
touchstart：手指触摸到一个DOM元素时触发
touchmove：手指移动事件
touchend：结束事件，
触摸事件对象
e.touches:正在触摸屏幕的所有手指的一个列表
e.targetTouches:正在触摸当前DOM元素上的手指的一个列表，e.targetTouches[0].pageX手指的初始坐标，设置时最好阻止拖动默认行为
e.changedTouches：手指状态发生改变了的列表，从无到有，从有到无变化
transitionend监听过渡完成事件
classList属性：返回元素的类名，ie10以上
element.classList.add('')为元素添加类名
element.classList.remove('')为元素删除类名
element.classList.toggle('')为元素切换类名
移动端click事件会有300ms的延时，原 因是移动端双击屏幕会有缩放页面的效果
<meta name="viewport" content="user-scalable=no">
js插件：移动端要求快速开发，所以经常会借助一些插件。插件就是js文件，遵循一定规范，具有特定的功能且方便调用，如轮播图和瀑布流插件，特点就是为了解决某个问题而专门存在，功能单一，比较小
fasticlick插件：解决300ms延迟，引入js文件后，添加以下代码
if ('addEventListener' in document) {
• document.addEventListener('DCMContentLoaded', function() {
• FastClick.attach(document.body)
• },false)
• }
superslide、incroll、swiper插件都可以做轮播
zy.media.js视频插件，统一视频风格
框架：一套架构，基于自身特点向用户提供一套较为完整的解决方案，框架的控制权再框架本身，使用者要按照框架所规定的某种规范进行开发
插件：一般为了解决某个问题而专门存在，功能单一，比较小
8、本地存储
本地存储特性①数据存储再用户浏览器中
②设置、读取方便，甚至页面刷新都不丢失数据
③容量比较大，sessionStorage约5M、localStroage约20M
④只能存储字符串，可以将对象JSOM.string()编码后存储
window.sessionStorage
1、生命周期为关闭浏览器窗口
2、同一个窗口、页面下数据可以共享
3、以键值对形式存储
存储数据：sessionStorage.setItem(key,value)
获取数据：sessionStorage.getItem(key)
删除数据：sessionStorage.removeItem(key)
删除所有数据：sessionStorage.clear()
window.localStroage
1、生命周期永久有效，除非手动删除，否则关闭页面也会存在
2、可以多窗口、页面下数据可以共享（同一浏览器共享数据）
3、以键值对形式存储
存储数据：localStroage.setItem(key,value)
获取数据：localStroage.getItem(key)
删除数据：localStroage.removeItem(key)
删除所有数据：localStroage.clear()
复选框改变事件change
9、jquery
js库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，获取元素等，简单来说就是一个js文件，里面是我们对原生js代码进行了封装，快速高效的使用这些好的功能
jquery是一个快速、简洁的js库，封装了js常用的功能代码，优化了DOM操作、事件处理、动画设计和AJax交互
$是jquery的顶级对象，是jQuery的别称，可以使用jQuery代替
jQuery对象：使用jQuery方法获取的元素就是jQuery对象，本质是$对DOM对象包装后产生的对象（伪数组形式）
DOM对象：用原生js获取来的对象就是DOM对象
各自的方法不能混用
DOM对象转为jQuery：$(document.querySelector('video'))
jQuery对象转为DOM对象：$('div')[0]或者$('div').get(0 )
9.1 jqueryAPI
隐式迭代:遍历内部DOM元素（伪数组形式）的过程叫隐式迭代，也就是给匹配到的所有元素进行循环遍历，执行相应的方法，而不是我们再进行循环
选择器
$('').css('background','pink)
li:first，li:last，，li:eq(index)，li:odd，li:even
son.parents()，children(亲儿子)，find(后代)，siblings(其余兄弟)，
nextAll(当前元素之后的同辈)，prevtAll(当前元素之前的同辈)
hasClass(是否包含某个类)，eq(索引)
$(this).index()当前元素的索引号
链式编程
$(this).css('color','red').siblings().css('color','')
操作css方法
$(div).css('color‘)修改，
$(div).css('color','red')设置，
$(div).css('fontSize',18)值为数字可以不用引号和单位
$(div).css({width:30,heigth:50})对象方式可以不加引号，复合属性驼峰命名
$('div').addClass()，$('div').removeClass()，$('div').toggleClass()
jquery效果
show([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing，linear
fn:回调函数
hide([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing，linear
fn:回调函数,每个元素执行一次
toggle([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing，linear
fn:回调函数,每个元素执行一次
slideDown([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing，linear
fn:回调函数,每个元素执行一次
slideUp([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing，linear
fn:回调函数,每个元素执行一次
slideToggle([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing，linear
fn:回调函数,每个元素执行一次
事件切换
$('div').hover(鼠标经过函数,鼠标离开函数)，只写一个经过离开都会触发
动画或效果队列及其停止
动画或效果一旦触发就会执行，如果多次触发，就会造成多个动画或效果排队执行
stop()用于停止动画或效果，写在动画或效果前，相当于停止结束上一次的动画
淡入淡出
fadeIn([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing，linear
fn:回调函数,每个元素执行一次
fadeToggle([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing，linear
fn:回调函数,每个元素执行一次
fadeOut([speed,[easing],[fn]])
speed:slow,normal,fast或者毫秒数值
easing:swing，linear
fn:回调函数,每个元素执行一次
fadeTo(speed,opacity,[easing],[fn])
opacity:透明度必须写，0-1之间
speed:slow,normal,fast或者毫秒数值，必须写
easing:swing，linear
fn:回调函数,每个元素执行一次
自定义动画
animate(params,[speed],[easing],[fn]]):只有元素才能做动画
params:想要更改的样式属性，以对象形式传递，必须写，属性名可以不用引号，符合属性驼峰
speed:slow,normal,fast或者毫秒数值
easing:swing，linear
fn:回调函数,每个元素执行一次
$('div').animate({left:0})
设置或获取元素固有属性值prop()
$('a').prop('title','我是提示')：设置
$('a').prop('title')：获取
设置或获取元素自定义属性attr()
$('a').attr('index','1')：设置
$('a').attr('index')：获取
数据缓存data():数据存放在元素的内存中，页面无法看到，存在元素里面，当作变量，也可以获取data类自定义属性，不用加data，返回数值型
$('a').data('uname','1')：设置
$('a').data('uname')：获取
:checked：表单选择器
内容获取
$('div').html()：获取设置元素内容
$('div').text()：获取设置元素文本内容
$('div').val()：获取设置表单值
each()方法遍历DOM元素
$('div').each(function(index,domEle){xxx;})
index:每个元素的索引号
domEle：每个DOM元素，不是jquery对象
需要使用jquery方法，需要转换对象
$.each()遍历对象
可以用于遍历任何对象，主要用于遍历数据，处理数据，比如数组、对象
$.each(obj,function(index,element){xxx;})
创建元素
$('<li></li>')
添加元素
内部添加：$('ul').append(li),放在最后面
$('ul').prepend(li),放在最前面
外部添加：$('ul').after(li),放在目标元素后面
$('ul').before(li),放在目标元素前面
删除元素
$('ul').remove()：删除元素本身
$('ul').empty()：删除匹配的元素集合中所有子节点
$('ul').html('')：请空匹配元素的元素内容
尺寸操作
width()/heigth()：返回元素宽度高度，不包含其他
innerWidth()/innerHeight()：返回元素宽度高度，包含padding
outerWidth()/outerHeight()：返回元素宽度高度，包含padding,border
outerWidth(true)/outerHeight(true)：返回元素宽度高度，包含padding,border,margin
位置操作
offset().top/left：返回元素距离文档的距离
offset({top:200,left:300})：设置元素距离文档的距离
position():返回元素相对于带有定位的父级元素的偏移，position只能获取
scrollTop()/scrollLeft()：元素被卷去头部 和左侧
单个事件
element.click(function(){})：单个事件注册
事件处理on：绑定多个事件，多个处理程序,还可进行事件委托，可给动态创建的元素进行绑定事件，单个事件注册方式不能处理动态元素
$('div').on(event,[selector],fn)，$('div').on(event1 event2,[selector],fn)
event:一个或多个空格隔开的事件类型
selector:元素的子元素选择器
off()方法移除on()方法添加的事件处理程序
$('ul').off('click','li')解除事件委托
one()只触发一次事件
自动触发事件
$('div').click()会自动触发已经写好的点击事件
$('div').trigger('click')
$('div').triggerHanler('click')：不出发元素默认行为
事件对象
event.preventDefault()或者return false:阻止默认行为
event.stopPropagation()：阻止冒泡
拷贝对象
$.extend([deep],target,object1,[objectN])
deep：true为深拷贝，默认浅拷贝（保存了原对象中的复杂类型的地址）
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象，被拷贝的 ，多个合并覆盖
多库共存
使用就jQuery代替$符号，就可以jQuery与其余js库共存不冲突
使用自定义的符号代替$和jQuery
var s=$.noConflict()
图片懒加载
只加载用户看到的图片，滑动到可视区域才加载，减轻服务器负载
easyLazyload.js插件
全屏滚动插件
Json字符串转换
JSON.stringify()
获取索引号时，只有亲兄弟才能顺序获取
10、类与对象
继承
子类再构造函数中使用super，必须放到this前面
元素插入：insertAdjacentHTML（）
dbclick双击事件
.select()文本框文字选定
构造函数和原型
当构造函数中有方法时，每次实例化一个对象，都会去内存开辟一个空间存放一个相同的方法，但是内存地址是不一样的，所以费时费地
构造函数原型prototype
构造函数通过原型分配的函数是所有对象共享的
js中每一个构造函数都有一个prototype属性，指向另一个对象，这个prototype本身就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有
把那些不变的方法，直接定义再prototype对象上，这样所有构造函数的实例对象就可以共享这些方法，而且不同的实例对象调用的相同名字的方法，指向内存地址也一样，节约内存资源
一般，公共属性定义在构造函数里面，公共方法定义在原型对象里面
对象原型_proto__
对象自身都会有一个属性proto指向构造函数的protoytpe原型对象，之所以对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__
对象身上的对象原型proto __和原型对象prototype是等价的（===）
对象原型_proto__的意义就在于为对象的查找机制提供一个方向，或者说一条线，但是是一个非标准属性，因此实际开发中不能使用这个属性，他只是内部指向prototype原型对象
方法的查找规则：首先查找对象自身是否有这个方法，如果没有，由于每个对象身上proto属性的存在，就去构造函数原型对象prototype身上找这个方法
constructor构造函数
对象原型和构造函数原型对象里面都有一个contructor属性，称为构造函数，因为它指回构造函数本身
contructor主要用于记录该对象引用于哪个构造函数，他可以让原型对象指向原来的构造函数
构造函数、实例对象、原型对象的关系
原型链
对象成员查找机制
就近原则
原型对象this指向
原型对象扩展内置对象
apply():调用这个函数，并且求改函数运行时的this指向，参数只能是是一个数组形式，打印是字符串
bind():不会调用函数，只是你能改变函数内部的this指向
call():调用这个函数，并且求改函数运行时的this指向
fun.call(thisArg,arg1,arg2,......)
thisArg:当前调用函数this的指向对象
arg:传递的其他参数
call、apply、bind异同点
继承
可以通过构造函数+原型对象模拟实现继承，称为组合继承
①构造函数继承属性
②原型对象设置继承方法
类的本质
类的本质还是一个函数，也就是构造函数的另一种写法
语法糖：便捷写法
新增数组方法
①forEach()，map类似
②filter()
③some()，every类似
forEah和some区别
新增字符串方法
①trim()
对象新增方法
①Object.defineProperty()定义对象中新属性或修改原有的属性，不能被枚举就是不能被遍历
函数进阶
1、函数定义
严格模式
为脚本开启严格模式
为整个脚本开启严格模式，在所有的语句之前放一个特定的语句"use strict"或'use strict'
为函数开启严格模式
严格模式的变化
变量问题
this指向问题
函数变化
高阶函数
就是对其他函数进行操作的函数，接收函数作为参数或者将函数作为返回值输出
闭包
闭包指有权访问另一个作用域中的变量的函数，简单来说就是，一个作用域可以访问到另一个作用域的局部变量
闭包的主要作用就是延伸了变量的作用范围
匿名函数this是window
递归函数
浅拷贝和深拷贝
1、浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用
2、深拷贝拷贝多层，每一级别的数据都会拷贝
3、Object.assign(targetm...sources),es6新增方法可以浅拷贝
正则表达式
正则表达式是用于匹配字符串中字符组合的模式，在js中正则表达式也是对象
通常被用来检索、替换那些符合某个模式的文本、过滤页面内容中的敏感词、或者从字符串中获取我们想要的特定部分
1、利用RegExp构造函数创建
2、利用字面量创建
3、测试正则表达式test
test()正则对象方法，用于检测字符串是否符合该规则，返回布尔值，参数为测试字符串
量词符号
正则替换
replace:只能替换第一次
正则表达式参数
1494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
