WebAPI
一、DOM
1. 获取元素
①根据标签名：document.getElementsByTagName ( ‘ ‘) //返回伪数组形式的对象集合，若想得到里面的元素需要遍历，遍历的到的元素是动态的
②根据类名：document.getElementsByClassName ( ‘ ‘) // 返回伪数组形式的对象集合(里面的class名不用加 . )
注：①与②获取的元素不能直接绑定事件
③根据ID获取：document.getElementById ( ‘ ‘) //带有ID的元素（里面的id名不用加 # ），返回一个元素对象，若无则返回null
④H5方法：document.querySelector ( ‘ ‘)// 返回指定选择器第一个元素（里面要加选择器符号）
document.querySelectorAll ( ‘ ‘) //返回指定选择器所有元素对象集合
⑤获取特殊元素（body、html）：
Body：document.body html：document.documentElement
[if !supportLists]一、[endif]事件基础
[if !supportLists]1. [endif]事件：事件源、事件类型、事件处理程序
var btn = document.getElementById ( ‘btn‘) //事件源
btn.onclick = function ( ) { } //事件类型（点击事件）与事件处理程序（函数）
[if !supportLists]2. [endif]常见的鼠标事件
[if !supportLists]3. [endif]操作元素
① 改变元素内容：element.innerText //（element为获取的元素），获取元素里面的内容，但是去除了html标签，同时空格跟换行也去掉（非标准）
element.innerHTML//这个同上，但包括了html标签，同时保留空格和换行（w3c标准）
修改元素内容，如：box.innerHTML = ’
②元素固有（内置）属性：element.src / href / title / type / value / checked / selected / disable
[if !supportLists]① [endif]样式属性操作：
element.style.backgroundColor = ‘red ‘//行内样式，驼峰命名法
element.className = ‘类名‘ //类名样式，里面不用加. （原有类名会被覆盖）
element.cssText +=’属性1：值；属性2：值’
[if !supportLists]② [endif]排他思想：若有同一组元素我们想要某一元素实现某种样式
[if !supportLists]4. [endif]自定义属性操作（目的是为了保存并使用数据）
[if !supportLists]① [endif]获取属性值：element. 属性 //获取内置属性，元素本身自带的
element.getAttribute ( ‘属性’) //获取自定义属性（标准）
[if !supportLists]② [endif]设定值：element. 属性 = ‘值’// element.getAttribute = ( ‘属性’，’值’)
③移除属性： element.removeAttribute ( ‘属性’)
④ H5规定自定义属性以data - 开头，如：data - index = ‘1 ’ 或者用JS设置element.setAttribute ( ‘data - index ’，1 )
获取H5自定义属性：element.dataset. 属性 或者 element.dataset [ ‘属性‘]
其中dataset 是一个集合，里面存放所有以data开头的自定义属性
[if !supportLists]5. [endif]节点操作
[if !supportLists]① [endif]节点：元素节点nodeType为1，属性节点nodeType为2，文本节点nodeType为3（包括空格、换行、文字）
[if !supportLists]② [endif]节点层级：
11 . 父节点：
子节点.parentNode//返回当前子节点的父节点（包括内容跟元素），无则返回null
22 . 子节点：
父节点.chidNode //返回当前父节点的所有子节点（包含文字、空格等）
父节点.firstChild //返回第一个子节点（first = > last 返回最后一个）
父节点.children //只返回当前父节点中的元素节点
父节点.firstElementChild //返回第一个子元素节点
父节点.children [ 索引 ] // 返回第 n 个子元素节点
[if !supportLists]33. [endif]兄弟节点：
节点.nextSibling// 当前节点的下一个兄弟节点，包含文本节点（next => previous 上一个兄弟节点）
节点.nextElementSibling//当前节点的下一个元素兄弟节点
[if !supportLists]③ [endif]节点的增、删、改、查
[if !supportLists]11. [endif]创建节点（动态创建）：var 变量 = docment.createElement ( ‘元素’)
[if !supportLists]22. [endif]添加节点：父节点.appendChild（变量）//在当前父节点的子节点后面追加子节点
父节点.insertBefore（变量，哪个节点前） // 在哪个子节点前追加
33. 删除节点：父节点.removeChlid ( 父节点.children [ 索引 ] )
[if !supportLists]44. [endif]复制节点：节点.cloneNode ( ) //括号里的参数为空或false为浅拷贝，true为深拷贝
[if !supportLists]6. [endif]事件监听：
目标事件. addEventListener ( ‘事件类型’，function（）{ } ，布尔值 )
其中布尔值true 表示捕获阶段，false表示冒泡阶段，第二个参数可以是函数名，但不用加（）括号
删除事件：目标事件.removeEventListener（‘事件类型’，函数名，布尔值）
注：要移除目标事件监听，目标事件的函数必须要有名字（不能是匿名函数）
[if !supportLists]7. [endif]事件对象
element. 事件类型 = function（e）{
e.target //返回触发事件的对象
e.type //返回事件的类型
e.preventDefault ( ) //阻止事件默认行为（如让链接不跳转）
e.stopPropagation ( ) //阻止冒泡
}
事件委派：将事件监听器设置在父节点上，利用冒泡原理影响子节点
[if !supportLists]8. [endif]鼠标事件对象
e.clientX/Y //返回相对于浏览器可视窗口的X/Y坐标
e.pageX/Y //返回相对于文档页面的X/Y坐标
e.screenX/Y //返回相对于电脑屏幕的X/Y坐标
[if !supportLists]9. [endif]键盘事件： onkeyup //按键松开时触发
onkeydown//按键按下触发（不分大小写）
onkeypress //按键按下触发，但不识别功能键，如：ctrl、shift（分大小写）
keyCode方法：返回该键的ASCII值
事件触发顺序：keydown > keypress > keyup
BOM浏览器对象模型（核心对象window）
[if !supportLists]1. [endif]window对象常见事件
[if !supportLists]① [endif]窗口加载事件：window.onload ( 文档内容全部加载完成触发 )
DOMContentLoaded ( DOM加载完成再执行，不包含图片、css )
[if !supportLists]② [endif]调整窗口大小事件：window.onresize
window.innerWidth //获得当前窗口的宽度
[if !supportLists]2. [endif]定时器
① window.setTimeout（调用函数，延迟的毫秒数） //window可省略
setInterval ( 函数，延迟毫秒数 ) //重复调用，每隔一段时间调用一次
② 停止定时器： clearTimeout ( 定时器名 )
clearInterval ( 定时器名 )
[if !supportLists]3. [endif]location对象
[if !supportLists]① [endif]location对象属性：
location.href //获取或设置整个URL
location.host //返回主机（域名）
location.port //返回端口号，若未写返回空字符串
location.pathname //返回路径
location.search //返回参数
location.hash //返回片段
[if !supportLists]② [endif]location对象的方法
location.assign ( ) //跟href一样，可以跳转页面（重定向页面）
location.replace ( ‘ ‘) //替换当前页面，不记录历史，不能后退
location.reload ( ) //重新加载页面，相当于刷新页面，参数为true强制刷新
[if !supportLists]4. [endif]navigator 对象：
常用userAgent属性，该属性返回由客户端发送服务器的user-agent头部的值（判断用户用手机还是电脑打开页面）
[if !supportLists]5. [endif]history 对象
back ( ) //后退功能
forward ( ) //前进功能
go ( 参数 ) //前进后退功能，参数1前进一个页面，- 1后退一个页面
PC端网页特效
[if !supportLists]1. [endif]元素偏移量offset系列（动态，只读）
element.offsetParent //返回作为该元素带有定位的父级元素，无定位返回body
element.offsetTop/Left //返回元素相对带有定位的父元素上方/左边框的偏移量
element.offsetWidth/Height //返回自身包括padding、内容区、边框的宽度/高度
[if !supportLists]2. [endif]元素可视区client系列（只读）
element.clientTop/Left //返回元素上边框/左边框的大小
Element.clientWidth/Height //返回自身包括padding、内容区的宽度/高度，不含边框
[if !supportLists]3. [endif]元素滚动scroll 系列（只读）
element.scrollTop/Left //返回元素内容被卷去上侧/左侧距离
element.scrollWidth/Height //返回元素自身的实际宽度/高度，不含边框
[if !supportLists]4. [endif]页面被卷去的头部：window.pageYOffset 宽同理（只读）
[if !supportLists]5. [endif]立即执行函数：（function（）{ }）（）或（function（）{ }（））
作用：独立创建一个作用域，变量全为局部变量，不会出现命名冲突
[if !supportLists]6. [endif]动画函数的封装（核心原理：通过定时器，不断移动盒子的位置）
[if !supportLists]① [endif]获得盒子当前的位置
[if !supportLists]② [endif]让盒子再当前位置加上1 移动距离
[if !supportLists]③ [endif]利用定时器不断重复这个操作
[if !supportLists]④ [endif]加上一个结束定时器的条件
注：元素要加定位才能使用element.style.left，函数需要传递两个参数，动画对象和移动到的距离
[if !supportLists]7. [endif]缓动效果原理
[if !supportLists]① [endif]让盒子每次移动距离慢慢变小
[if !supportLists]② [endif]核心算法：（目标值- 现在的位置）/ 分几步
[if !supportLists]③ [endif]停止条件：让盒子当前位置等于目标位置就停止定时器
[if !supportLists]④ [endif]步长写在定时器里面，步长值为整数，往大取整，负值往小取
[if !supportLists]8. [endif]无缝滚动原理
[if !supportLists]① [endif]把ul里的第一li复制一份，并放在ul最后
[if !supportLists]② [endif]当图片滚动到克隆的最后一张图片时，让ul不做动画的跳到最左侧
[if !supportLists]③ [endif]同时num赋值为0
[if !supportLists]9. [endif]节流阀
目的：当上一个函数动画内容执行完毕再去执行下一个函数动画，让事件无法连续触发。
核心思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
移动端网页特效
[if !supportLists]1. [endif]触屏事件touch
touchstart //手指触摸到一个DOM元素触发
touchmove //手指在一个DOM元素上滑动触发
touchend // 手指在一个DOM元素上移开触发
[if !supportLists]2. [endif]触摸事件对象touchEvent
touches //正在触摸屏幕的所有手指列表
targetTouches //正在触摸当前DOM元素上的手指的一个列表
changedTouches //手指状态发生变化的列表，从无=>有，从有=>无变化
[if !supportLists]3. [endif]移动端click事件会有300ms的延时，原因市双击会缩放页面
解决方案：① 禁用缩放并且去掉300ms的延时点击
② 利用touch事件封装：当我们手指触屏/离开屏幕，记录当前时间，用离开时间减去触摸时间，如果小于150ms且无滑动屏幕，那就定义点击。
[if !supportLists]④ [endif]使用fastclick插件解决
[if !supportLists]4. [endif]本地存储
特性：数据存储在用户浏览器中，设置读取方便，页面刷新不丢失数据，容量大，只能存储字符串，可以将对象JSON.stringify（）编码后存储
window.sessionStorage：生命周期为关闭浏览器窗口，同一窗口下数据可共享，以键值对的形式存储。用法：
存储：sessionStorage.setItem ( ‘名’，值)
获取：sessionStorage.getItem ( ‘名’)
删除：sessionStorage.removeItem ( ‘名’)
删除全部：sessionStorage.clear（）
wondow.localStorage：生命周期永久生效，可以多窗口共存，以键值对形式存储（用法同上）
JQuery快速开发
[if !supportLists]1. [endif]入口函数：等DOM加载完 $ ( document ).ready ( function ( ) { } )
或者$ ( function ( ) { } )
[if !supportLists]2. [endif]JQuery与DOM对象的相互转换
D => J：$（DOM对象） 如：$（btn）
J => D：$（‘button ’）[ 索引 ] 或 $（‘button ’）.get [ 索引 ]
[if !supportLists]3. [endif]JQuery选择器
$（‘选择器’）/ 设置样式（有隐式迭代） $（‘div ’）.css ( ‘属性‘，’值’)
[if !supportLists]① [endif]筛选选择器：
$ ( ‘元素：first / last’) //第一个/最后一个当前的元素
$ ( ‘元素：eq（n）’) //索引号为n的当前元素
$ ( ‘元素：odd’) //索引号为奇数的当前元素
$ ( ‘元素：even ’) //索引号为偶数的当前元素
②筛选方法：
$ ( ‘元素’).parent ( )//查找当前元素的父级
$ ( ‘元素’).children (‘子元素‘) //查找当前元素的最近一级的子元素，相当于$ (‘ul>li ’)
$ ( ‘元素’).find (‘子元素’) //查找当前元素的后代子元素，相当于$ (‘ul li ’)
$ ( ‘元素’).sibling (‘兄弟元素’) //查找当前元素的兄弟元素（不包括本身）
$ ( ‘元素’).nextAll ( ) //查找当前元素后所有的同辈元素
$ ( ‘元素’).prevAll ( ) //查找当前元素前所有的同辈元素
$ ( ‘元素’).hasClass (‘类名’) //当前元素是否含有特定类，有返回true
$ ( ‘元素’).eq ( n ) //相当于$ ( ‘元素：eq（n）’)
[if !supportLists]4. [endif]常见的JQuery效果（API的相互切换）
[if !supportLists]① [endif]显示、隐藏、切换show( speed，easing，fn ) / hide( ) / toggle( )
[if !supportLists]② [endif]滑下、滑上、切换slideDown ( ) / slideUp ( ) / slideToggle ( )
[if !supportLists]③ [endif]淡入、淡出、切换、透明度fadeIn ( ) / fadeOut ( ) / fadeToggle ( ) / fadeTo ( )
[if !supportLists]④ [endif]自定义动画animate ( { params }，speed，fn )
[if !supportLists]5. [endif]JQuery获取固有、自定义属性
固有：$（‘元素’）.prop ( ‘属性’，’值’)
自定义：$（‘元素’）.attr（‘属性’，’值’）
数据存储data：$ ( ‘元素’).data ( ‘属性’，’值’)
[if !supportLists]6. [endif]JQuery获取内容文本
$ ( ‘元素’).html（） //相当于innerHTML
$ ( ‘元素’).text（） //相当于innerText
$ ( ‘元素’).val（） //相当于原生val（）
[if !supportLists]7. [endif]JQuery元素操作
[if !supportLists]① [endif]遍历：$ ( ‘元素’).each ( function ( i，ele ) { } ) 或者
$. each（$ ( ‘元素’)，function ( i，ele ) { }）//主要用于遍历数据、处理数据
[if !supportLists]② [endif]创、添、删操作：
[if !supportLists]8. [endif]JQuery事件注册、与解除
[if !supportLists]9. [endif]JQuery对象拷贝
$. extend ( deep，target，object1，objectN )
deep：设为true为深拷贝，false为浅拷贝（拷贝地址）
target：拷贝到的目标对象（给谁）
object1~N：带拷贝的1~N个对象
[if !supportLists]10. [endif]多库共存
[if !supportLists]① [endif]把$ 改成 jQuery ② JQuery规定新命名方法：var 名= $.noConflict ( )
[if !supportLists]11. [endif]JQuery尺寸
[if !supportLists]① [endif]width ( ) / height ( ) //匹配元素的宽 / 高，只算width / height
[if !supportLists]② [endif]innerWidth ( )/Height ( ) //匹配元素的宽 / 高，包含padding
[if !supportLists]③ [endif]outerWidth ( )/Height ( ) //匹配元素的宽 / 高，包含padding、border
[if !supportLists]④ [endif]outerWidth (true )/Height (true ) //匹配元素的宽 / 高，包含p~、b~、m~
[if !supportLists]12. [endif]JQuery位置
JS高级
[if !supportLists]1. [endif]ES6中的类跟对象
类：抽象了对象的公共部分，泛指一大类
对象：特指某一个，通过类实例化的一个具体的对象
[if !supportLists]2. [endif]创建类
注意点：①构造函数中this指向实例对象，方法里的this指向方法的调用者
②类里面的共有属性跟方法一定要加this使用
③ES6中无变量提升，要先定义类再实例化
[if !supportLists]3. [endif]类的继承
[if !supportLists]4. [endif]改变this指向call（）、bind（）、apply（）
主要区别：apply方法参数为数组形式，bind方法不调用函数，返回改变this指向的新函数
[if !supportLists]5. [endif]ES5新增方法
① 数组方法~遍历：forEach（）与filter（）
[if !supportLists]② [endif]字符串方法：trim（） //去除字符串两端的空格，返回新字符串
[if !supportLists]③ [endif]对象方法：Object.keys（） //获取对象所有属性名
Object.defineProperty（） //定义对象新属性或修改原属性
[if !supportLists]6. [endif]函数进阶
let fn = new Function（‘参1’，’参2 ’，’函数体’）//所有函数都是Function的实例
[if !supportLists]7. [endif]严格模式
严格模式是采用具有限制性JavaScript变体的一种方式，从而使代码隐式地脱离“马虎模式/稀松模式/懒散模式“（sloppy）模式。
开启后全局作用域中的this指向undefined
[if !supportLists]① [endif]为脚本开启
[if !supportLists]② [endif]为函数开启
[if !supportLists]8. [endif]闭包：指有权访问另外一个函数作用域中变量的函数，延申了变量的作用范围。
[if !supportLists]9. [endif]递归：一个函数再内部可以调用其本身（要加return 返回）
[if !supportLists]10. [endif]浅拷贝：Object.assign（a，b）//将b拷贝给a
[if !supportLists]11. [endif]正则表达式（Regular Expression）：
① 创建、检测、替换
② 特殊字符（元字符）~边界符（位置符）：
③ 特殊字符~字符类：（只要匹配其中一个就行，或者关系）
④ 特殊字符~量词符：
⑤ 预定义类（常见模式的简写方式）
[if !supportLists]12. [endif]ES6
[if !supportLists]① [endif]声明变量的关键字let：let声明的变量具有块级作用域，不存在变量提升，具有暂时性死区。
[if !supportLists]② [endif]声明常量的关键字const：常量就是值（内存地址不可更改），具有块级作用域，声明常量必须赋值，复杂数据类型可更改内存值
[if !supportLists]③ [endif]箭头函数：（）=> { } //不绑定this，里面this指向函数定义位置的上下文
[if !supportLists]④ [endif]解构赋值
数组
对象
[if !supportLists]⑤ [endif]模板字符串：` ` (反引号)
[if !supportLists]13. [endif]set数据结构（成员值是唯一的，没有重复的值）