目录
#简介
Web APIs 和 JS基础的关联性
JS基础阶段
- ECMAscript标准规定的基本语法
- 要求掌握JS基础语法
- 只学习基本语法,做不了常用的网页交互效果
- 目的是为了Js后面的课程打基础、做铺垫
Web APIs阶段
- web APIs 是w3c组织的标准
- web APIs 我们主要学习DOM和BOM
- web APIS 是我们Js 所独有的部分
- 主要学习页面交互功能
- 需要使用Js基础的课程内容做基础
API 和 Web API
API( Application Programming Interface,应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
API是给程序员提供的一种工具，以便能轻松实现想要完成的功能
Web API 是浏览器提供的一套操作浏览器功能和页面元素的API（BOM 和 DOM）
比如alert弹出警示框
Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）
#DOM
DOM简介
文档对象模型(Document Object Model，简称DOM )，是W3C组织推荐的处理可扩展标记语言（HTML或者XML)的标准编程接口。
DOM树
文档：一个页面就是一个文档，DOM中用documen表示
元素：页面中的所有标签都是元素，DOM中用element表示
节点：网页中所有的内容都是节点（标签、属性、文本、注释等），DOM中用node表示
DOM把以上内容都看作是对象
获取元素
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增方法获取
- 特殊元素获取
1.根据ID获取
使用getElementById()方法获取带有ID的元素对象
<div id="time">2021-11-20<div>
<script>
//因为文档页面从上往下加载，所以将script写到标签下面
var timer = document.getElementById('time'); //参数要是字符串
</script>文档页面从上往下加载，所有script要写到标签下边；参数id是大小写敏感的字符串；返回的是一个元素对象
console.dir(timer)
console.dir 打印返回的元素对象，更好的查看里面的属性和方法
2.根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
返回的是获取过来元素对象的集合，以伪数组的形式存储；想要以此打印元素对象，可以采用遍历（for等）的方式；得到元素对象是动态的，内容变化会跟着一起变；如果页面中只有一个li，返回的还是伪数组的形式；如果页面中没有这个元素，返回的是空的伪数组。
还可以使用element.getElementByTagName('标签名')；获取某个元素（父元素）内部所有指定标签名的子元素，其中父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己。
var ol = document.getElementsByTagName('ol'); //[ol]
cosole.log(ol[0].getElementsByTagName('li'));3.通过HTML5新增的方法获取
document.getElementsByClassName('类名')； //根据类名返回元素对象集合
document.querySelector('选择器')； //根据指定选择器返回第一个元素对象
切记里面的选择器需要加符号 . #
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);document.querySelectorAll('选择器')； //根据指定选择器返回所有对象
4.获取特殊元素
获取body元素
document.body
var bodyEle = document.body;
获取html元素
document.documentElement
var htmlEle = document.documentElement;事件基础
事件是可以被JS侦测到的行为
触发 -- 响应机制
事件的三部分（三要素）
事件源：事件被触发的对象（也就是说是谁被触发了，//按钮）
<button id="btn">123</button>
<script>
var btn = document.getElementById('btn');//事件源
btn.onclick = function() {
alert('456');
}
</script>事件类型：如何触发、什么事件。比如鼠标点击（onclick）或者鼠标经过
事件处理程序：通过函数赋值的方式完成
执行事件的步骤
1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采用函数赋值形式）
操作元素
以下都是属性
改变元素内容
element.innerText ：从起始位置到终止位置的内容，但是它去除HTML标签，同时空格和换行也会去掉
element.innerHTML（标准） ：从起始位置到终止位置的内容，包括HTML标签，同时保留空格和换行
这两个属性是可读写的 可以获取元素里面的内容
区别：innerText不识别html标签，innerHTML识别html标签。
常用元素的属性操作
修改元素属性 src
1.获取元素
2.注册事件 处理程序
表单元素的属性操作
利用DOM可以操作如下表单元素的属性
type、value、checked、selected、disabled
表单的文字内容是通过value更改的
样式属性操作
element.style； 行内样式操作
JS修改样式操作产生的是行内样式，CSS权重比较高
element.className； 类名样式操作（样式采取驼峰命名法）
className会直接更改元素的类名，会覆盖之前的类名
如果想要保留之前的类名，则可以使用多类名选择器
this.className = 'first change'；
排他思想
var btn = document.getElementsByTagName('button');
//btns得到的是伪数组 里面的每一个元素btns[i]
for(var i = 0;i<btns.length; i++){
btns[i].onclick = function() {
//先去掉所有按钮的背景颜色
for(var i = 0 ;i<btns.length;i++){
btns[i].style.backgroundColor = '';
}
//再给当前的按钮改变颜色
this.style.backgroundColor = 'pink';
}
}如果有同一组元素，想要某一个元素实现某种样式，需要用循环的排他思想算法
1.所有元素全部清除样式（排除其他人）
2.给当前元素设置样式（设置自己的样式）
3.注意顺序不能颠倒
鼠标事件
鼠标经过 onmouseover
鼠标离开 onmouseout
自定义属性的操作
1.获取属性值
element.属性 获取属性值
element.getAttribute(‘属性’)；
二者区别：前者获取的是内置属性，后者主要可以获取自定义属性
2.设置属性值
element.属性 = ‘值’ 设置内置属性值
element.setAttribute('属性','值')； 主要针对于自定义属性
3.移出属性
removeAttribute(属性)
H5自定义属性
为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中
自定义属性通过getAttribute(‘属性’) 获取
但是有些自定义属性容易引起歧义，不易判断是元素的内置属性还是自定义属性
H5新增了自定义属性：H5规定自定义属性data-开头作为属性名并且赋值
获取H5自定义属性：element.getAttribute('data-index');或者H5新增 element.dataset.属性/element.dataset['属性']； ie11才开始兼容
dataset是一个集合，里面存放了所有以data开头的自定义属性，所以她只能获取以date-开头的
如果自定义属性里面有多个-链接的单词，我们获取的时候采用驼峰命名法
节点操作
节点概述
一般节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性
- 元素节点 nodeType 为1
- 属性节点 nodeType 为2
- 文本节点 nodeType 为3 （包含文字、空格、换行等）
在实际开发中主要操作的是元素节点
节点层级
父级节点：node.parentNode
子节点
1. parentNode.childNodes（标准）
返回值里包含了所有的子节点，包括元素节点、文本节点等
如果只想要获得里面的元素节点需要专门处理，所以我们一般不提倡使用childNodes
var ul = document.querySelector('ul');
for(var i=0;i<ul.childNodes.length;i++) {
if(ul.childNodes[i].nodeType == 1){
//ul.childNodes[i]是元素节点
console.log(ul.childNodes[i]);
}
}
2. parentNode.children （非标准）
是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回
3. parentNode.firstChild
4. parentNode.firstElementChild 返回第一个子元素节点，有兼容性
5. parentNode.lastChild
6. parentNode.lastElementChild 返回最后一个子元素节点，有兼容性
实际开发写法，既没有兼容性又返回第一个子元素
var ol = document.querySelector('ol');
console.log(ol.children[0]); //返回第一个子元素
console.log(ol.children[3]); //返回最后一个子元素
console.log(ol.children[ol.children.length - 1]); //返回最后一个子元素兄弟节点
node.nextSibling 下一个兄弟节点 包含元素节点或者文本节点
node.previousSibling 上一个兄弟节点 包含元素节点或文本节点
node.nextElementSibling 下一个兄弟元素节点，有兼容问题
node.previousElementSibling 上一个兄弟元素节点，有兼容问题
创建节点
document.createElement(‘tagName’)
该方法创建由tagName指定的HTML元素。因为这些元素原来不存在，是根据需求动态生成的，所以也成为动态创建元素节点
添加节点
node.appendChild(child) 将一个节点添加到指定父节点（node）的子节点列表末尾，类似css里面的after伪元素
var li = document.createElement('li');
var ul = document.querySelector('ul');
ul.appendChild(li);node.insertBefore(child,指定元素) 将一个节点添加到指定元素的子节点列表前面
var = lili document.createElement('li');
ul.insertBefore(lili,ul.children[0]);想要页面添加一个新的元素：1.创建元素 2.添加元素
简单版留言板
删除节点
node.removeChild(child) 方法从DOM中删除一个子节点，返回删除的节点；node是父节点
复制节点（克隆节点）
node.cloneNode() 返回调用该方法的节点的一个副本
如果括号参数为空或者false，则是浅拷贝，只复制标签不复制内容；为true，则是深拷贝，复制标签复制内容。
三种动态创建元素区别
document.write() 直接将内容写入页面的内容流。如果文档流执行完毕，它会导致页面全部重绘（重绘了一个新的HTML页面）
element.innerHTML 将内容写进某个DOM节点，不会导致页面全部重绘。创建多个元素的效率更高（不要拼接字符串，采取数组形式拼读），结构稍微复杂
document.createElement() 创建多个元素效率稍低一点点，但是结构更清晰
不同浏览器下，innerHTML（数组形式）效率比createElement高
二者创建新标签时，当标签基数过大最好选择createElement()，直接创建元素；innerHTML添加的方法为拼接字符串，占用内存资源，时间过慢
此时可以新建数组，再使用innerHTML，节省时间，比create快
DOM重点核心
创建
document.write
element.innerHTML
document.createElement
增
父节点.appendChild
父节点.insertBefore
删
父节点.removeChild
改
修改dom元素属性，dom元素的内容、属性、表单的值等
1.修改元素属性：src、href、title等
2.修改普通元素内容：innerHTML、innerText
3.修改表单元素：value、type、disabled
4.修改元素样式：style、className
查
主要获取查询dom元素
1.DOM提供的API方法：getElementById、getElementsByTagName（古老方法不太推荐）
2.H5提供的新方法：querySelector、querySelectorAll
3.利用节点操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）提倡
属性操作
1.setAttribute：设置dom属性
2.getAttribute：得到dom属性
3.removeAttribute：移出属性
事件操作
给元素注册事件，采取 事件源.事件类型 = 事件处理程序
#事件高级
注册事件（绑定事件）
给元素添加事件称为注册事件
注册事件有两种方式：传统方式和方法监听注册方式
传统注册方式
利用on开头的事件 onclick ；特点：唯一性：同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式
addEventListener() 它是一个方法，IE9之前不支持此方法可使用attachEvent()代替 特点：同一个元素同一个时间可以添加多个监听器，按注册事件依次执行。
eventTarget.addEventListener(type,listner[,useCapture])
eventTarget.addEventListener() 方法将执行的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数
该方法接收的三个参数：
- type：事件类型字符串，比如click、mouseover。这里不用带on，加引号
- listener：事件处理函数，事件发生时，会调用该监听函数
- useCapture：可选参数，是一个布尔值，默认false。
EventTarget事件监听方式（不推荐）
eventTarget.attachEvent(eventNameWithOn,callback)
该方法接收两个参数：
- eventNameWithOn：事件类型字符串，比如onclick、onmouseover，这里要带on
- callback：事件处理函数，当目标触发事件时回调函数被调用
注册事件兼容性解决方案
删除事件（解绑事件）
传统注册方式
eventTarget.onclick = null；
方法监听注册方式
1.eventTarget.removeEventListener(type，listener[，useCapture])；
2.eventTarget.detachEvent(eventNameWithOn,callback);
删除事件兼容性解决方案
DOM事件流
事件流是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，传播过程即DOM事件流
DOM事件流分为3个阶段：捕获阶段、当前目标阶段、冒泡阶段
代码实现
注意：JS代码中只能执行捕获或者冒泡其中一个阶段；onclick和attachEvent只能得到冒泡阶段；addEventListener（type，listener[，useCapture]）第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false，表示在事件冒泡阶段调用事件处理程序；实际开发中很少使用事件捕获，更关注事件冒泡；有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave；事件冒泡有时候会有麻烦，有时候又会帮助很巧妙的做某些事情。
捕获阶段
先弹出father，再弹出son
冒泡阶段
先弹出son，再弹出father
事件对象
div.onclick = function(event) {} //event就是一个事件对象，写到侦听函数的小括号里当形参看
事件对象有了事件（onclick）才会存在，它是系统给我们自动创建的，不需要我们传递参数
事件对象是我们事件的一系列相关数据的集合，跟事件相关的。比如鼠标点击里面就包含了鼠标的相关信息（鼠标坐标等）
事件对象可以自己命名，比如event、evt、e
事件对象也有兼容性问题 ie678 通过window.event
e = e || window.event；
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里，这个对象就是事件对象event，他有很多的属性和方法
event是个形参，系统帮我们设定为事件对象，不需要传递实参；当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）
事件对象的常见属性和方法
e.target 指向我们点击的对象，就是触发事件的元素，与this不同。（e.target点击谁就是谁；this绑定谁就是谁）
current.target 与this相似，但是有兼容性问题。
e.preventDefault() 阻止默认行为（事件）让链接不跳转或者让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click',function(e){
e.preventFefault(); //dom标准写法
})return false 我们可以利用return false 也能阻止默认行为，没有兼容性问题。特点就是return后面的代码不执行，而且只限于传统的注册方式
※阻止事件冒泡
事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点
e.stopPropagation()；
ie678采用 e.cancelBubble = true；
兼容性解决方案
事件委托（代理、委派）
※事件委托原理
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
<ul><li></li><li></li><li></li><li></li><li></li></ul>，此案例给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li事件会冒泡到ul上，ul有注册事件，就会触发事件监听器
事件委托的作用
只操作一次DOM，提高程序性能
常用的鼠标事件
禁止鼠标右键菜单
contextmenu 主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListerner('contextmenu',cuntion(e) {
e.preventDefault();
})禁止鼠标选中
selectstart 开始选中
document.addEventListerner('selectstart',cuntion(e) {
e.preventDefault();
})鼠标事件对象
client 鼠标在可视区的坐标
page 鼠标在文档页面的坐标
screen 鼠标在电脑屏幕的坐标
常用的键盘事件
onkeypress不识别功能键
三个事件执行顺序：keydown -> keypress -> keyup
键盘事件对象
键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
keyup和keydown事件不区分字母大小写 A和a得到的都是65
keypress区分大小写
#BOM
BOM概述
BOM ( Browser Object Model )即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
DOM与BOM
DOM
- 文档对象模型
- DOM就是把文档当做一个对象看待
- DOM的顶级对象是document
- DOM主要学习的是操作页面元素
- DOM是W3C标准规范
BOM
- 浏览器对象模型
- 把浏览器当做一个对象来看待
- BOM的顶级对象是window
- BOM学习的是浏览器窗口交互的一些对象
- BOM是浏览器厂商在各自浏览器上定义的，兼容性较差
BOM比DOM更大，BOM包括DOM
window对象是浏览器的顶级对象
- 它是JS访问浏览器窗口的一个接口
- 它是一个全局对象。定义在全局作用域中的变量，函数都会变成window对象的属性和方法
window对象的常见事件
窗口加载事件
window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等）就调用的处理函数
1.有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
2. window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
3.如果使用addEventListener则没有限制
document.addEventListener('DOMContentLoaded',function(){}) DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表、图片、flash等。ie9以上支持
如果页面图片很多，从用户访问到onload触发可能要很久，交互效果不能实现，影响用户体验，此时用DOMContent比较合适
调整窗口大小事件
window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数
1.只要窗口大小发生像素变化，就会触发这个事件。
⒉.我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度
定时器
setTimeout()
window.setTimeout(调用函数，[延迟的毫秒数])； 用于设置一个定时器，该定时器在定时器到期后执行调用函数
window在调用时可以省略；延时时间单位是毫秒，如果省略默认是0；这个调用函数可以直接写函数，还可以写函数名；页面中可能有很多的定时器，我们经常会加标识符（名字）
setTimeout() 这个调用函数也称为回调函数callback
普通函数的按照代码顺序直接调用，这个函数需要等待时间，时间到了再调用这个函数。
停止setTimeout() 定时器
window.clearTimeout(timeoutID) 该方法取消了先前通过调用setTimeout()建立的定时器
window可以省略
里面的参数就是定时器的标识符
setInterval()
window.setInterval(回调函数，[间隔的毫秒数])； 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
停止setInterval()定时器
window.clearInterval(intervalID) 方法取消了先前通过调用setInterval()建立的定时器
window可以省略
里面的参数就是定时器的标识符
this
this的指向在函数定义的时候确定不了，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象
1.全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
2.方法调用中谁调用this指向谁
3.构造函数中this指向构造函数的实例
JS执行机制
JavaScript语言的一大特点就是单线程，也就是说同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。
单线程就意味着所有任务需要排队，执行完一个任务才能执行下一个。为了解决这个问题，利用多核CPU的计算能力，HTML5提出标准，允许JavaScript脚本创建多个线程
同步和异步
同步：执行完一个才能执行第二个，程序的执行顺序与任务的排列顺序是一致的。
异步：在做这件事情的同时还可以去处理其他事情。
本质区别：在这条流水线上各个流程的执行顺序不同
同步任务：同步任务都在主线程上执行，形成一个执行栈
异步任务：JS的异步是通过回调函数实现的
一般而言，异步任务有以下三种类型
- 普通事件，如click、resize等
- 资源加载，如load，error等
- 定时器，包括setInterval、setTimeout等
异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）
JS执行机制
1.先执行执行栈中的同步任务
2.异步任务（回调函数）放到任务队列中
3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
由于主线程不断的重复获取任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环
location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=17#link
location对象属性
location对象方法
assign() 可以记录历史，能实现后退功能
navigator对象
navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。
下面前端代码可以判断用户那个终端打开页面，实现跳转
history对象
window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中)访问过的URL。
history对象方法
#PC端网页特效
元素偏移量offset系列
动态的得到该元素的位置（偏移）、大小等。
offset常用属性
offset和style区别
offset
- offset可以得到任意样式表中的样式值
- offset系列获得的数值是没有单位的
- offsetWidth包含padding+ border+ width
- offsetWidth等属性是只读属性，只能获取不能赋值
- 所以，我们想要获取元素大小位置，用offset更合适
style
- style 只能得到行内样式表中的样式值
- style.width获得的是带有单位的字符串
- style.width获得不包含padding和border的值
- style.width是可读写属性，可以获取也可以赋值
- 所以，我们想要给元素更改值，则需要用style改变
元素可视区client系列
获取元素可视区的相关信息
client系列属性
立即执行函数 (function(){}){}
主要作用：创建一个独立的作用域，避免命名冲突情况
写法
(function() {})()
(function(){}()) //第二个小括号可以看做是调用函数
不需要调用，立马能执行
元素滚动scroll系列
动态的得到该元素的大小、滚动距离等
scroll是真正内容的高度大小（超出部分也算）
页面被卷去的头部用window.pageYOffset获得，如果被卷去的左侧window.pageXOffset
元素被卷去的头部是element.scrollTop
三大系列总结
1. offset系列经常用于获得元素位置offsetLeft offsetTop
2. client经常用于获取元素大小clientwidth clientHeight
3. scroll经常用于获取滚动距离scrollTop scrollLeft
4.页面的滚动距离通过window.pageXOffset获得
※mouseenter和mouseover的区别
鼠标移动到元素上时就会触发mouseenter事件
mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发
原因：mouseover不会冒泡
跟mouseenter搭配鼠标离开mouseleave同样不会冒泡
动画函数封装
核心原理：通过定时器setInterval() 不断移动盒子位置
注意函数需要传递2个参数，动画对象和移动到的距离
动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数，每次都要var声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器)。
核心原理：利用Js是一门动态语言，可以很方便的给当前对象添加属性。
缓动效果原理
让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
1.让盒子每次移动的距离慢慢减小
2.核心算法：（目标值 - 现在位置）/ 10
3.停止的条件是：让当前盒子位置等于目标位置就停止定时器
4.步长值需要取整
匀速动画就是盒子当前位置+固定值
缓动动画就是盒子当前位置+变化的值
动画函数添加回调函数
回调函数原理∶函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
回调函数写的位置：定时器结束的位置
节流阀
防止轮播图按钮连续点击造成播放过快。
节流阀目的:当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。核心实现思路∶利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
#移动端网页特效
触屏事件
移动端不用考虑JS兼容性问题
触摸事件对象
一般都是触摸元素，所以最经常用的是 targetTouches
拖动元素
拖动元素三步曲:
(1）触摸元素touchstart:获取手指初始坐标，同时获得盒子原来的位置
(2）移动手指touchmove :计算手指的滑动距离，并且移动盒子
(3）离开手指touchend:
注意：手指移动也会触发滚动屏幕，所有这里要阻止默认的屏幕滚动e.preventDefault()；
移动端常见特效
监听过渡完成的事件 transitionend
classList属性
H5新增属性 ie10以上支持
添加类：element.classList.add('类名') 是在后面添加类名，不会覆盖之前的类名；类名不用加点.
移除类：element.classList.remove('类名')
切换类：element.classList.toggle('类名') 开关灯效果
click延时解决方案
移动端click事件会有300ms的延时，原因是移动端屏幕双击会缩放(double tap to zoom)页面。
解决方案
1.禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟
<meta name="viewport" content="user-scalable=no">
2.利用touch事件自己封装这个事件解决300ms延迟
原理︰当我们手指触摸屏幕，记录当前触摸时间；当我们手指离开屏幕，用离开的时间减去触摸的时间；如果时间小于150ms ,并且没有滑动过屏幕，那么我们就定义为点击
3.使用插件，fastclick插件解决300ms延迟
移动端常见开发插件
fastclick 解决300ms延迟
swiper 轮播图
superslide
iscroll
zy.media.js 解决各个浏览器video样式不同的问题
移动端常用开发框架
框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。
插件一般是为了解决某个问题而专门存在，功能单一，并且比较小
前端常用的框架有Bootstrap.Vue、Angular、React等。既能开发PC端，也能开发移动端
前端常用的移动端插件有swiper、superslide、iscroll等。
#本地存储
本地存储特性
1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容呈较大，sessionStorage约5M、localStorage约20M
4、只能存储字符串，可以将对象JSON.stringify()编码后存储
window.sessionStorage
生命周期为关闭浏览器窗口
在同一个窗口（页面）下数据可以共享
以键值对的形式存储使用
存储数据
sessionStorage.settleItem(key，value)
获取数据
sessionStorage.getItem(key)
删除数据
sessionStorage.removeItem(key)
删除所有数据（慎用）
sessionStorage.clear()
window.localStorage
生命周期永久生效，除非手动删除，关闭页面也会存在
可以多窗口共享（同一浏览器可以共享）
存储数据
localStorage.settleItem(key，value)
获取数据
localStorage.getItem(key)
删除数据
localStorage.removeItem(key)
删除所有数据（慎用）
localStorage.clear()
1887 + 186 = 2073 / 2885
900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
