JavaScript系列：
JavaScript核心基础ECMAScript
JavaScript基础语法-DOM，前端小白必知必会
JavaScript事件高级，前端小白必知必会
一文搞定JavaScript-BOM，前端小白必知必会
文章目录
classList 属性
classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。该属性用于在元素中添加，移除及切换 CSS 类。
1.添加类：element.classList.add（’类名’）；
2.移除类：element.classList.remove（’类名’）;
3.切换类：element.classList.toggle（’类名’）；（如果有这个类就删除，如果没有这个类就添加，可用于切换深色背景）
本地存储
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大，sessionStorage约5M、localStorage约20M
4、只能存储字符串，可以将对象JSON.stringify() 编码后存储
window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
3、以键值对的形式存储使用
存储数据：sessionStorage.setItem(key, value)
获取数据：sessionStorage.getItem(key)
删除数据：sessionStorage.removeItem(key)
删除所有数据：sessionStorage.clear()
window.localStorage
1、生命周期永久生效，除非手动删除 否则关闭页面也会存在
2、可以多窗口（页面）共享（同一浏览器可以共享）
3、 以键值对的形式存储使用
方法和sessionStorage一样也是4个
元素偏移量offset
offerTop和offerLeft以带有定位的父亲为准，如果没有父亲或者父亲没有定位则以body为准；宽度和高度是包含padding、boder和width的。
offset和style的区别
元素可视区client
clientWidth和offsetWidth 最大的区别就是 不包含边框。
元素滚动scroll
offset、client、scroll的对比
- offset系列 经常用于获得元素位置 offsetLeft offsetTop
- client 经常用于获取元素大小 clientWidth clientHeight
- scroll 经常用于获取滚动距离 scrollTop scrollLeft
- 注意页面滚动的距离通过 window.pageXOffset 获得
mouseenter 鼠标事件
当鼠标移动到元素上时就会触发 mouseenter 事件，类似 mouseover，它们两者之间的差别是：
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发；mouseenter 只会经过自身盒子触发
之所以这样，就是因为mouseenter不会冒泡。
跟mouseenter搭配，鼠标离开 mouseleave 同样不会冒泡。
立即执行函数
不需要调用，立马能够自己执行的函数。立即执行函数最大的作用就是独立创建了一个作用域, 里面所有的变量都是局部变量,不会有命名冲突的情况。
写法：
1.(function() {})() 或者 2. (function(){}());
函数名可有可无，第二个小括号可以看做是调用函数，其中参数可写可不写。
(function asd(a, b) {
console.log(a + b);
var num = 10;
})(1, 2);
(function sum(a, b) {
console.log(a + b);
var num = 10; // 局部变量
}(2, 3));