JavaScript+jQuery（PC端+移动端）

一、JavaScript

1）JS组成

• JS编程语法和基础核心知识：ECMAScript

• DOM（Document Object Model）文档对象模型：W3C组织推荐的处理可扩展标记语言的标准编程接口。

  通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

• BOM（Browser Object Model）浏览器对象模型：提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

  通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

2）JS引入方式

（一个HTML文件中既可以有行内式js、又可以有内嵌式js、还可以有外部js）

• 行内式

• 内嵌式

• 外部js双标签

3）JS注释

• 单行注释//：Ctrl+/
• 多行注释/* */：默认Shift+Alt+A，通常修改为Ctrl+Shift+/（vscode左下角管理 -> 键盘快捷方式 -> …）

4）JS输入输出语句

• alert(msg)：浏览器弹出警示框

• console.log(msg)：浏览器控制台打印输出信息

• console.dir(obj)：打印元素对象，更好的查看里面的属性和方法

• prompt(info)：浏览器弹出输入框，用户可以输入，info是提示信息

5）JS变量

• 变量声明

  • 声明多个变量：var age = 18, address = ‘火影村’, salary = 2000;
  • var a=b=c=9; 相当于var a=9; b=9; c=9; 与声明多个变量不一样，如果这是在函数内，b和c直接赋值没有var声明，则当全局变量看

• 变量命名规范

  • 由大小写字母，数字，下划线，美元符号组成
  • 严格区分大小写字母
  • 不能以数字开头
  • 不能是关键字、保留字
  • 变量名必须有意义
  • 遵守驼峰命名法

6）数据类型

• 简单数据类型

  • Number：数字型，包括整形和浮点型，默认值0

    • 浮点型运算时会有精度问题如0.07*100结果不是7，而是7.000000000000001
    • 因为浮点型数值的精度问题，所以不要直接判断两个浮点数是否相等
    • 八进制：程序里数字前面加0表示八进制
    • 十六进制：程序里数字前面加0x表示十六进制
    • console.log(num)和alert(num)：会自动将八进制或十六进制数自动转换为十进制数输出
    • Number.MAX_VALUE：JavaScrip中数值的最大值
    • Number.MIN_VALUE：JavaScrip中数值的最小值
    • Infinity：代表无穷大
    • NaN：代表一个非数值
    • isNaN()：此方法判断是不是数字，如果是返回false，如果不是返回true

  • String：字符串类型，必须用引号括起来，默认值‘’“

    • 因为HTML标签里属性使用的是双引号，所以JS推荐使用单引号

    • JS可以用单引号嵌套双引号，也可以用双引号嵌套单引号（外双内单，外单内双）

    • 字符串转义符：\n换行符，\\斜杠，\'单引号，\"双引号，\t缩进，\b空格

    • 检测字符串长度：’字符串‘.length

    • 字符串拼接：字符串和其他类型拼接结果是字符串类型

    • prompt采集到的数据是string类型的

  • Boolean：布尔型，true、false等价于1、0，默认值false

  • Undefined：声明了变量但是没有给值，则此时变量值为undefined

    • undefined和数字相加结果是NaN
    • undefined和boolean类型的值相加结果是NaN

  • Null：空值，属于object类型

    • null值和数字相加结果是数字本身
    • null值和boolean类型的值相加结果是boolean类型的值对应的数字，true对应1，false对应0
    • 如果有个变量我们以后打算存储为对象，暂时没想好放啥，这时候就给null

• 复杂数据类型（引用类型）：对象，如Object、Array、Date等

7）数据类型转换

• 转换为字符串

  • toString()：转成字符串

    var num=1;
    alert(num.toString());
    

  • String()：强制转成字符串

    var num=1;
    alert(String(num));
    

  • 加号拼接转成字符串：隐式转换，更推荐

    var num=1;
    alert(num+'');
    

• 转换为数字型

  • parseInt(string)：将string类型转换成整数型
    • 如果是小数，直接舍弃小数点后面的数
    • 如果有单位，自动去掉单位
    • 如果没法转换，得到结果为NaN
  • parseFloat(string)：将string类型转换成浮点型
    • 如果有单位，自动去掉单位
    • 如果没法转换，得到结果为NaN
  • Numberstring()：将string型强制转换为数值型
  • js隐式转换（- * /）：利用算术运算隐式转换为数值型（如‘12’-0），在我们进行算术运算的时候，JS自动转换了数据类型

• 转换为布尔型

  • Boolean()函数：将其他类型转换为布尔型，如Boolean(‘true’)；
  • 代表空、否的值会被转换为false，如‘’、0、NaN、null、undefined，其他的为true

8）标识符、关键字、保留字

• 标识符：指开发人员为变量、属性、函数、参数取的名字，标识符不能是关键字和保留字
• 关键字：指JS本身已经使用了的字，不能再用它充当变量名、方法名，包括break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with等
• 保留字：JS预留的关键字，不能用来充当变量名或方法名，包括boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile等

9）运算符使用注意事项

• ==默认有数据类型转换，===要求数据和数据类型都相等

• 短路运算现象：当有多个表达式（值），左边表达式值可以确定结果时，就不再继续运算右边的表达式的值

  console.log(123 && 456);// 456
  

10）流程控制语句使用注意事项

• switch-case语句

  switch(2) {
  	case 1:
  		console.log('这是1');
  		break;
  	case 2:
  		console.log('这是2');
  		break;
  	case 3:
  		console.log('这是3');
  		break;
  	default:
  		console.log('没有匹配结果');
  }
  //如果没有break，则不会退出switch，继续执行下面的case，直至遇到break
  

• 当分支较少时，if…else语句执行效率比switch语句高

• 当分支较多时，switch语句执行效率比if…else语句高，且结构更清晰

11）数组

• 创建数组

  • var arr = new Array(); // 创建空数组
  • var arr = []; // 创建空数组
  • var arr = [1, 2, ‘三’]; // 创建数组

• 获取数组元素

  • 索引号从0开始
  • 没有的数组元素是undefined，如数组有三个元素，arr[3]是undefined

• 新增数组元素

  • 通过修改length长度实现数组扩容，length属性是可读写的，修改length属性之后未赋值的元素是undefined
  • 追加数组元素：arr[arr.length] = ‘pink’;
  • 不要直接给数组名赋值，否则里面的数组元素都没有了

12）函数

• 函数

  • function sayHi() { 函数体 }
  • function sayHi(形参1, 形参2…) { 函数体 }
  • var fun = function() { 函数体 };
  • var fun = function(形参1, 形参2…) { 函数体 };

• 函数调用

  • 如果实参个数和形参个数一致，则正常输出结果（建议）
  • 如果实参个数多于形参个数，会取到形参的个数
  • 如果实参个数小于形参个数，多余的形参定义为undefined

• 函数返回值

  • 函数都是有返回值的，如果有return则返回return后面的值，如果没有则返回undefined
  • return只能返回一个值，如果return后面有多个值，则返回最后一个值，如return num1, num2;
  • return可以退出循环，同时可以结束当前函数体内的代码

• arguments

  • 所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参
  • arguments展示形式是一个伪数组，具有length属性，按索引存储数据，可以进行遍历等操作，但是不具有数组的push，pop方法
  • 取参：如arguments[0]

• 立即执行函数

  • 最大的作用是独立创建了一个作用域，里面所有的变量都是局部变量，不会有命名冲突的情况

  • 写法一：

    (function(a,b) { // 也可以加函数名
    console.log(a + b);
    })(1,2);
    

  • 写法二：

    (function(a,b) { // 也可以加函数名
    console.log(a + b);
    }(1,2));
    

12）变量的作用域

• 变量的作用域
  • 全局变量：script标签中或js文件中直接定义的变量，只有在浏览器关闭的时候才会销毁，比较占内存
  • 块级变量：块级作用域{}中的变量，如if分支结构中，for循环结构中，是es6新增的
  • 局部变量：函数内部的变量，程序执行完就销毁，比较节约内存
• 作用域链
  • 内部函数可以访问外部函数变量
  • 链式查找哪些数据能被内部函数访问，决定哪个数据将被访问

13）JS预解析

• 预解析步骤

  • js引擎会将js中所有var还有function提升到当前作用域的最前面
  • 再结合代码书写顺序从上往下执行

• 预解析作用范围

  • 变量提升：把所有变量声明提升到当前作用域的最前面，不提升赋值操作
  • 函数提升：把所有函数声明提升到当前作用域的最前面，不调用函数

14）对象

• 创建对象

  • 利用对象字面量创建对象

    var obj = {
    	uname: 'zsf',
    	age: 18,
    	sex: 'nan'
    	sayHi: function() {
    		console.log('Hi');
    	}
    }
    

  • 利用new Object创建对象

    var obj = new Object();
    obj.uname = 'zsf';
    obj.age = 18;
    obj.sex = 'nan';
    obj.sayHi = function() {
    	console.log('Hi');
    }
    

  • 利用构造函数创建对象：构造函数中封装对象，就是把对象里面一些相同的属性和方法抽象出来封装到函数里

    function Star(uname, age, sex) {
    	this.uname = uname;
    	this.age = age;
    	this.sex = sex;
    	this.sing = function(sang) {
    		console.log(song);
    	}
    }
    var obj = new Star('ldh', 18, 'nan');
    

• new关键字的执行过程

  • 首先在内存中创建一个空对象
  • this会指向刚刚创建的空对象
  • 执行构造函数里的代码给这个空对象添加属性和方法
  • 返回这个对象

• 调用属性

  • 对象名.属性名
  • 对象名[‘属性名’]

• 调用方法：对象名.函数名()

• 遍历对象

  for (var k in obj) {
  	console.log(k); // 变量名
  	console.log(obj[k]); // 属性值
  }
  

15）内置对象

• 查阅MDN文档：https://developer.mozilla.org/zh-CN/

• Math对象

  • abs(num)方法：求绝对值，如果传入的参数是字符串型，存在隐式转换
  • max(num1, num2, …)方法：求最大值
  • min(num1, num2, …)方法：求最小值
  • PI属性：圆周率
  • floor(num)方法：向下取整
  • ceil(num)方法：向下取整
  • round(num)方法：四舍五入取整，其他数字都是四舍五入，但是.5特殊，它往大了取
  • random()方法：返回[0,1)之间的随机小数

• Date() 构造函数new对象

  • var date1 = new Date(); //创建系统当前时间对象
  • var date2 = new Date(2019, 10, 1); //创建指定时间对象
  • var date3 = new Date(‘2019-10-1’); //创建指定时间对象
  • getFullYear()方法：获取当年
  • getMonth()方法：获取当月（0-11）
  • getDate()方法：获取当天日期
  • getDay()方法：获取星期几（周0-周6）
  • getHours()方法：获取当前小时
  • getMinutes()方法：获取当前分钟
  • getSeconds()方法：获取当前秒钟
  • valueOf()方法：获取毫秒数，即时间戳
  • var date1 = +new Date(); //直接返回总毫秒数
  • now()方法：H5新增的获取总毫秒数的方法

• Array() 构造函数new对象

  • var arr1 = new Array(); //创建了一个空数组

  • var arr2 = new Array(2); //创建了一个长度为2的里面有2个空元素的数组

  • var arr2 = new Array(2, 3); //创建了一个数组元素为2和3

  • Array.isArray(arr)方法：H5新增判断是否为数组的方法，与arr instanceof Array相同

  • push(num1, num2, …)方法：数组尾追加一个或多个新元素，返回新数组长度，原数组也会发生变化

  • unshift(num1, num2, …)方法：数组头追加一个或多个新元素，返回新数组长度，原数组也会发生变化

  • pop()方法：数组尾删除一个元素，返回删除的元素，原数组也会发生变化

  • shift()方法：数组头删除一个元素，返回删除的元素，原数组也会发生变化

  • reverse()方法：翻转数组

  • sort()方法：排序，只能个位数

  • 多位数排序：

    arr.sort(function(a, b) {
    	return b-a; //降序排序，升序是a-b
    });
    

  • indexOf(num)方法：返回第一个num元素在数组中的位置，找不到返回-1

  • lastIndexOf(num)方法：返回第一个num元素在数组中的位置，找不到返回-1

  • toString()方法：将数组转换为字符串，以默认的逗号连接

  • join()方法：数组转换为字符串，以默认的逗号连接

  • join(‘-’)方法：数组转换为字符串，以指定的字符连接

  • concat(arr1[], arr2[], …)方法：连接两个或多个数组，不影响原数组

  • slice(begin, end)方法：返回被截取出来的新数组，不影响原数组

  • splice(begin, count)方法：从第几个开始删除几个，返回删除后得到的新数组，影响原数组

• 基本包装类型之String

  • 基本包装类型为：String、Number、Boolean
  • var str = ‘andy’; 相当于做了这三步：var temp = new String(‘andy’); str = temp; temp = null;
  • 字符串是不可变的，字符串所有的方法都不会修改字符串本身，操作完成后会返回一个新的字符串
  • indexOf(‘要查找的字符’, 开始的位置)方法：从前往后查找，返回第一个字符在字符串中的位置，找不到返回-1
  • lastIndexOf(‘要查找的字符’, 开始的位置)方法：从后往前查找，返回第一个字符在字符串中的位置，找不到返回-1
  • charAt(index)方法：返回指定位置的字符
  • charCodeAt(index)方法：返回指定位置处字符的ASCII码
  • str[index]：获取指定位置处字符，H5新增功能，与charAt(index)等效
  • concat(str1, str2, str3, …)方法：用于连接两个或多个字符串，等效于+
  • substr(start)方法：从start位置开始截取到字符串结尾
  • substr(start, length)方法：从start位置开始截取length长度的子串
  • slice(start, end)方法：从start开始截取到end位置的子串，end取不到
  • substring(start, end)方法：从start开始截取到end位置的子串，end取不到，基本和slice相同，但不接受负值
  • replace(‘被替换字符’, ‘替换字符’)方法：只替换第一个字符
  • split(‘,’)方法：以指定字符分割字符串，转换为数组
  • toUpperCase()方法：转换为大写
  • toLowerCase()方法：转换为小写

二、DOM、BOM

1）API

• API（Application Programming Interface，应用程序编程接口）：一些预先定义的函数
• MDN详细API：https://developer.mozilla.org/zh-CN/docs/Web/API
• Web API：浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

2）DOM

• DOM（Document Object Model，文档对象模型）：处理可扩展标记语言（HTML或XML）的标准编程接口，DOM使得html形成一棵DOM树，包含文档、元素、结点
  • 文档：一个页面就是一个文档（document）
  • 元素：页面中所有标签都是元素（element），根元素是html标签
  • 节点：网页中所有内容（标签、属性、文本、注释等）都是节点（node）

3）获取元素（查）

（因为文档页面从上往下加载，所以script标签要写在要获取的网页元素的下面）

• 根据ID获取：document.getElementById(‘time’); 返回document下符合条件的一个元素对象，document可以换成其他标签元素
• 根据标签名获取：document.getElementByTagName(‘li’); 返回获取到的元素对象的集合，以伪数组的形式存储，如果只有一个元素，也是以伪数组的形式返回，如果没有获取到，则返回空的伪数组
• 通过HTML5新增方法获取
  • element.getElementsByClassName(‘box’); 根据类名获得某些元素集合
  • element.querySelector(‘.box’); 按照类名查询元素对象，返回第一个符合的，推荐（ol.querySelector(‘li.current’); // 这样写也行）
  • element.querySelectorAll(‘.box’); 按照类名查询元素对象，返回所有符合的，推荐
  • element.querySelector(‘#nav’); 按照ID查询元素对象，返回第一个符合的，推荐
  • element.querySelectorAll(‘#nav’); 按照ID查询元素对象，返回所有符合的，推荐
  • element.querySelector(‘li’); 按照标签名查询元素对象，返回第一个符合的，推荐
  • element.querySelectorAll(‘li’); 按照标签名查询元素对象，返回所有符合的，推荐
• 特殊元素获取
  • 获取body元素：document.body
  • 获取html元素：document.documentElement

4）操作元素（改）

• 操作元素内容（如果操作的是当前元素，则element可以换成this）

  • element.innerText：获取或设置从起始位置到终止位置的内容，不识别html标签、空格和换行，非标准
  • element.innerHTML：获取或设置从起始位置到终止位置的内容，识别html标签、空格和换行，W3C标准

• 操作元素属性（如果操作的是当前元素，则element可以换成this）

  • element.src：获取或设置图片src属性，只针对内置属性值（元素本身自带属性值）
  • element.title：获取或设置图片title属性，只针对内置属性值（元素本身自带属性值）
  • element.getAttribute(‘属性名’)：获取属性值，主要针对自定义的属性
  • element.setAttribute(‘属性名’, ‘属性值’)：修改或设置属性值，主要针对自定义的属性
  • element.removeAttribute(‘属性名’)：移除属性
  • H5自定义属性：属性名格式如data-index
    • element.setAttribute(‘data-index’, ‘1’)：设置H5自定义属性
    • element.getAttribute(‘data-index’)：兼容性获取H5自定义属性值
    • element.dataset.index或element.dataset[‘index’]：获取H5自定义属性值，ie11才开始支持
  • H5自定义属性：属性名格式如data-list-name
    • element.setAttribute(‘data-list-name’, ‘啊’)：设置H5自定义属性
    • element.getAttribute(‘data-list-name’)：兼容性获取H5自定义属性值
    • element.dataset.listName或element.dataset[‘listName’]：获取H5自定义属性值，ie11才开始支持，如果自定义属性里有多个-连接的单词，获取时采取驼峰命名法

• 操作表单属性（如果操作的是当前元素，则element可以换成this）

  • element.value = ‘hello’; 获取或设置input标签里的内容
  • element.disabled = ‘false’; 获取或设置input标签的disabled属性
  • element.type = ‘text’; //获取或设置input标签的样式属性
  • element.type = ‘password’; //获取或设置input标签的样式属性

• 操作元素样式属性

  • element.style.backgroundColor = ‘pink’; 通过修改style属性修改元素的样式，产生的是行内样式，css权重比较高，驼峰命名法
  • element.style.fontSize = ‘12px’; 通过修改style属性修改元素的样式，产生的是行内样式，css权重比较高，驼峰命名法
  • element.style.display = ‘none’; 隐藏元素
  • element.className = ‘change’; 通过修改元素类名修改元素的样式
  • element.className = ‘first change’; 通过追加元素类名修改元素的样式

• 阻止链接跳转

  • 添加不跳转的a链接：li.innerHTML = text.value + “删除”
  • 添加不跳转的a链接：li.innerHTML = text.value + “删除”

5）创建元素（增）

• document.write(‘

  123
  ’); 添加元素，如果页面文档流加载完毕再调用这句话会导致页面重绘，以前的就没有了

  document.write('
  123
  ');
  

• element.innerHTML(‘

  123
  ’); 添加元素，不会导致页面重绘，效率高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

  var inner = document.querySelector('.inner');
  var arr = [];
  for (var i = 0; i <= 100; i++) {
  	arr.push('
  123
  ');
  }
  inner.innerHTML = arr.join(' ');
  

• document.createElement(‘div’); 添加元素，不会导致页面重绘，效率低一点，结构清晰

  var create = document.querySelector('.create');
  for (var i = 0; i <= 100; i++) {
  	var d = document.createElement('div');
  	create.appendChild(d);
  }
  

6）结点（增、删、查）

• 结点：一般结点至少拥有nodeType（结点类型）、nodeName（结点名称）和nodeValue（结点值）这三个基本属性

  • 元素结点nodeType为1
  • 属性结点nodeType为2
  • 文本结点nodeType为3（包括文字、空格、换行等）

• 获取父节点：

  • element.parentNode：得到最近一级父节点，找不到返回null

• 子节点：

  • 获取所有子节点，包括元素结点、文本节点等所有节点

    • element.childNode：返回包含指定节点的子节点的集合，如果只需要元素结点，要做专门处理，一般不用
    • element.firstChild：返回第一个子节点，找不到返回null
    • element.lastChild：返回最后一个子节点，找不到返回null

  • 获取所有子元素节点

    • element.children：只读属性，返回所有子元素结点的集合
    • element.children[0]：返回第一个子元素节点
    • element.children[element.children.length - 1]：返回最后一个子元素节点
    • element.firstElementChild：返回第一个子元素节点，找不到返回null，IE9以上才支持
    • element.lastElementChild：返回最后一个子元素节点，找不到返回null，IE9以上才支持

  • 添加子元素结点

    • ducument.createElement(‘标签名’)：创建元素结点
    • element.appendChild(element1)：将一个结点（element1）添加到指定父节点（element）的子节点列表末尾
    • element.insertBefore(element1, element2)：将一个结点（element1）添加到指定父节点的指定子节点（element2）前面

  • 删除子元素结点

    • element.removeChild(element.children[0])：删除element的第一个子元素，返回删除的结点

• 获取兄弟结点

  • element.nextSibling：返回当前元素的后面的兄弟结点，包括元素结点、文本节点等所有节点，找不到返回null，如果只需要元素结点，要做专门处理，一般不用
  • element.previousSibling：返回当前元素的前面的兄弟结点，包括元素结点、文本节点等所有节点，找不到返回null，如果只需要元素结点，要做专门处理，一般不用
  • element.nextElementSibling：返回当前元素的后面的兄弟元素结点，找不到返回null，IE9以上才支持
  • element.previousElementSibling：返回当前元素的前面的兄弟元素结点，找不到返回null，IE9以上才支持

• 克隆结点

  • element.cloneNode(); 浅拷贝，返回调用该方法的结点的一个副本，只复制element标签元素结点不复制里面内容，不复制里面的子节点
  • element.cloneNode(false); 浅拷贝，返回调用该方法的结点的一个副本，只复制element标签元素结点不复制里面内容，不复制里面的子节点
  • element.cloneNode(true); 深拷贝，返回调用该方法的结点的一个副本，复制element标签元素结点并且复制里面内容，包括里面所有子节点

7）事件

• 示例

  //获取事件源
  var btn = document.getElementById('btn');
  //注册事件，添加事件处理程序
  btn.onclick = function() { 
  alert('点秋香') 
  }
  

• 注册事件

  • 传统注册方式（注册事件唯一性）

    • // 只能得到冒泡阶段
    • btn.onclick = function() { alert(‘hi’); } // 只能得到冒泡阶段

  • 方法监听注册方式（同一元素同一事件可以注册多个监听器）

    • element.addEventListener(‘click’, function() { alert(‘hi’); }); // 在事件冒泡阶段调用事件处理程序
    • element.addEventListener(‘click’, function() { alert(‘hi’); }, false); // 在事件冒泡阶段调用事件处理程序
    • element.addEventListener(‘click’, function() { alert(‘hi’); }, true); // 在事件捕获阶段调用事件处理程序
    • element.attachEvent(‘onclick’, function() { alert(‘hi’); }); // IE9以前版本支持，只能得到冒泡阶段

  • 注册事件兼容性解决方案

    function addEventListener(element, eventName, fn) {
    	//判断当前浏览器是否支持addEventListener方法
    	if (element.addEventListener) {
    		element.addEventListener(eventName, fn);
    	}else if (element.attachEvent) {
    		element.attachEvent('on' + eventName, fn);
    	}else {
    		element['on' + eventName] = fn;
    	}
    }
    

• 删除事件

  • 传统方式：eventTarget.onclick = null;

  • 方法监听注册方式

    • element.removeEventListener(‘click’, fn); // fn不能采用匿名函数是方式

      var btn = document.getElementById('btn');
      btn.addEventListener('click', fn);
      function fn() {
      	alert(22);
      	btn.removeEventListener('click', fn);
      }
      

    • element.detachEvent(‘onclick’, fn); // fn不能采用匿名函数是方式

      var btn = document.getElementById('btn');
      btn.attachEvent('click', fn);
      function fn() {
      	alert(33);
      	btn.detachEvent('click', fn);
      }
      

  • 删除事件兼容性解决方案

    function removeEventListener(element, eventName, fn) {
    	//判断当前浏览器是否支持removeEventListener方法
    	if (element.removeEventListener) {
    		element.removeEventListener(eventName, fn);
    	}else if (element.detachEvent) {
    		element.detachEvent('on' + eventName, fn);
    	}else {
    		element['on' + eventName] = full;
    	}
    }
    

• 常见鼠标事件

  1. onclick：鼠标点击左键触发

  2. onmouseover：鼠标经过自身盒子触发，经过它的子盒子也会因为冒泡现象触发

  3. onmouseseenter：鼠标只有经过自身盒子才触发，不会冒泡

  4. onmouseout：鼠标离开自身盒子触发，离开它的子盒子也会因为冒泡现象触发

  5. onmouseleave：鼠标只有离开自身盒子才触发，不会冒泡

  6. onfocus：获取鼠标焦点触发

  7. onblur：失去鼠标焦点触发

  8. onmousemove：鼠标移动触发

  9. onmouseup：鼠标弹起触发

  10. onmousedown：鼠标按下触发

  11. 禁止鼠标右键菜单

      document.addEventListener('contextmenu', function(e)) {
      	e.preventDefault();
      }
      

  12. 禁止鼠标选中

      document.addEventListener('selectstart', function(e)) {
      	e.preventDefault();
      }
      

• 常用键盘事件

  1. onkeydown：按下时触发，一直按着一直触发，能识别功能键，执行顺序先

     （与文本框结合使用时，触发时文字还没有落入文本框中）

  2. onkeypress：按下时触发，一直按着一直触发，不能识别功能键，执行顺序中

     （与文本框结合使用时，触发时文字还没有落入文本框中）

  3. onkeyup：弹起时触发，每次弹起触发一次，执行顺序后

     （与文本框结合使用时，触发时文字已落入文本框中，推荐）

8）事件对象

• 使用示例1

  var div = document.querySelector('div');
  div.onclick = function(e) {
  	e = e || window.event; //兼容IE6~8
  	
  	var target = e.target || e.srcElement; //兼容IE6~8
  	console.log(target); //点击哪个元素就返回哪个元素，与this的区别主要体现在冒泡场景中
  	
  	console.log(this); //哪个元素绑定执行了这个事件就返回哪个元素，与e.target的区别主要体现在冒泡场景中
  	console.log(e.currentTarget); //跟this非常相似，IE6~8不认识
  	
  	console.log(e.type); //返回事件类型，不带on
  	
  	e.cancelBubble = true; //阻止冒泡，非标准，IE6~8使用
  	e.stopPropagation(); //阻止冒泡，标准，推荐
  	
  	e.returnValue = false; //阻止默认行为，比如不让链接跳转，非标准，IE6~8使用
  	e.preventDefault(); //阻止默认行为，比如不让链接跳转，标准
  	return false; //阻止默认行为，比如不让链接跳转，没有兼容性问题，return后面的代码将不被执行，仅限于传统注册方式
  }
  

• 使用示例2

  var div = document.querySelector('div');
  div.addEventListener('click', function(e) {
  	e = e || window.event; //兼容IE6~8
  	
  	var target = e.target || e.srcElement; //兼容IE6~8
  	console.log(target); //点击哪个元素就返回哪个元素，与this的区别主要体现在冒泡场景中
  	
  	console.log(this); //哪个元素绑定执行了这个事件就返回哪个元素，与e.target的区别主要体现在冒泡场景中
  	console.log(e.currentTarget); //跟this非常相似，IE6~8不认识
  	
  	console.log(e.type); //返回事件类型，不带on
  	
  	e.cancelBubble = true; //阻止冒泡，非标准，IE6~8使用
  	e.stopPropagation(); //阻止冒泡，标准，推荐
  	
  	e.returnValue = false; //阻止默认行为，比如不让链接跳转，非标准，IE6~8使用
  	e.preventDefault(); //阻止默认行为，比如不让链接跳转，标准
  })
  

• 鼠标事件对象属性

  • e.clientX：返回鼠标相对于浏览器窗口可视区的X坐标，以px为单位，但是不返回单位
  • e.clientY：返回鼠标相对于浏览器窗口可视区的Y坐标，以px为单位，但是不返回单位
  • e.pageX：返回鼠标相对于文档页面的X坐标，以px为单位，但是不返回单位，IE9支持
  • e.pageY：返回鼠标相对于文档页面的Y坐标，以px为单位，但是不返回单位，IE9支持
  • e.screenX：返回鼠标相对于电脑屏幕的X坐标，以px为单位，但是不返回单位
  • e.screenY：返回鼠标相对于电脑屏幕的Y坐标，以px为单位，但是不返回单位

• 键盘事件对象属性

  • e.keyCode：返回按下按键的ASCII码值，keydown和keyup事件不区分大小写，a和A得到的都是65，keypress事件区分大小写，a得到97，A得到65，实际开发中，更多使用keydown和keyup

    var search = document.querySelector('input');
    document.addEventListener('keyup', function(e) {
    	if(e.keyCode === 83) {
    		search.focus(); //搜索框获取焦点
    	}
    })
    

9）DOM事件流

• 事件流三阶段（JS代码中只能执行捕获或冒泡其中的一个阶段）

  • 捕获阶段：由DOM最顶层节点开始，逐级向下传播到最具体元素接收的过程
  • 当前目标阶段
  • 冒泡阶段：时间开始由最具体的元素接收，然后逐级向下传播到最具体的元素接收的过程（没有冒泡阶段的事件：onblur、onfocus、onmouseenter、onmouseleave）

• 事件委托、代理：将事件监听器设置在父节点上，利用冒泡原理和事件对象（下一节介绍）影响子节点，只操作一次DOM，提高程序性能

  var ul = document.querySelector('ul');
  ul.addEventListener('click', function(e) {
  	e.target.style.backgroundColor = 'pink';
  }
  

10）BOM

• BOM（Browser Object Model）：浏览器对象模型，由一系列相关对象构成，每个对象有很多方法和属性，其核心顶级对象是window对象

• window对象：一个全局对象，全局作用域中的变量和函数都会变成window对象的属性和方法，调用时可以省略，其包含的常见属性和方法有

  • name：window对象的一个特殊属性，控制台打印出来是空的，定义全局变量时不要取名为name

  • devicePixelRatio属性：物理像素比

  • document：window对象的一个属性，是一个对象，document文档对象

  • location：window对象的一个属性，是一个对象，获取或设置窗体的URL，解析URL

    • href属性：获取或设置整个URL
    • host属性：返回主机名（域名）
    • port属性：返回端口号，如果未写，返回空字符串
    • pathname属性：返回路径
    • search属性：返回参数，如?uname=Andy
    • hash属性：返回片段，#后面内容常见于链接锚点
    • assign()方法：和href一样，可以跳转页面（也称为重定向页面）
    • replace()方法：替换当前页面，不记录历史，不能后退页面
    • reload()方法：重新加载页面，相当于刷新按钮或f5
    • reload(true)方法：重新加载页面，相当于强制刷新ctrl+f5
    • scroll(x,y)方法：滚到页面指定位置，参数不加单位，直接写数字即可

  • navigator：包含有关浏览器的信息的对象，它有很多属性，常用userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值

    // 判断用户哪个终端打开页面，实现跳转
    if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|WOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    	window.location.href = ""; // 手机端
    } else {
    	window.location.href = ""; // PC端
    }
    

  • history：与浏览器历史记录进行交互的对象，该对象包含用户在浏览器窗口访问过的URL，在实际开发中应用较少，一般在一些OA办公系统中见到

    • back()方法：后退一个页面
    • forward()方法：前进一个页面
    • go(1)方法：前进1个页面，参数是几，就前进几个页面
    • go(-1)方法：后退1个页面，参数是几，就后退几个页面

• window常见事件

  • onload：窗口（页面）加载事件，当文档内容完全加载完成（包括图像、脚本文件、CSS文件等）会触发该事件，调用处理函数，因此可以将JS代码写到页面元素的上方

    window.onload = function() {
    	var btn = document.querySelector('button');
    	btn.addEventListener('click', function() {
    		alert('点击我');
    	})
    }
    

    window.addEventListener('load', function() {
    	var btn = document.querySelector('button');
    	btn.addEventListener('click', function() {
    		alert('点击我');
    	})
    });
    

    • 会触发onload事件的情况：a标签的超链接、F5刷新或Ctrl+F5强制刷新、前进后退按钮（但是火狐浏览器中有前进后退缓存，不仅保存着页面数据，还保存了DOM和JavaScript的状态，实际上把整个页面存在了内存里，此时后退按钮不能刷新页面，不会触发onload事件）

  • onpageshow：这个事件在页面显示时触发，无论页面是否来自缓存。重新加载的页面onpageshow会在onload事件之后触发，根据事件对象中的persisted来判断是否是缓存中的页面触发事件

  • onDOMContentLoaded：窗口（页面）加载事件，仅当DOM加载完成时触发事件，不包括样式表、图片、flash等，增用户体验

    window.onDOMContentLoaded = function() {
    	var btn = document.querySelector('button');
    	btn.addEventListener('click', function() {
    		alert('点击我');
    	})
    }
    

    window.addEventListener('DOMContentLoaded', function() {
    	var btn = document.querySelector('button');
    	btn.addEventListener('click', function() {
    		alert('点击我');
    	})
    });
    

  • onresize：调整窗口大小事件，只要窗口大小发生像素变化，就触发该事件，经常利用这个事件结合window.innerWidth当前屏幕宽度属性完成响应式布局

• window对象常用方法

  • 执行一次的定时器

    • var timer = setTimeout(function() {})：设置一个定时器，马上调用回调函数（匿名函数）
    • var timer = setTimeout(fn)：设置一个定时器，马上调用回调函数fn（fn为预先定义好的函数，函数名为fn）
    • var timer = setTimeout(‘fn()’)：设置一个定时器，0毫秒后调用回调函数fn（fn为预先定义好的函数，函数名为fn），不提倡
    • var timer = setTimeout(function() {}, 3000)：设置一个定时器，3000毫秒后调用回调函数fn（fn匿名函数）
    • var timer = setTimeout(fn, 3000)：设置一个定时器，3000毫秒后调用回调函数fn（fn为预先定义好的函数，函数名为fn）
    • var timer = setTimeout(‘fn()’, 3000)：设置一个定时器，3000毫秒后调用回调函数fn（fn为预先定义好的函数，函数名为fn），不提倡

  • 重复执行的定时器

    • var timer = setInterval(function() {})：设置一个定时器，每隔0毫秒调用一次回调函数（匿名函数）
    • var timer = setInterval(fn)：设置一个定时器，每隔0毫秒调用一次回调函数fn（fn为预先定义好的函数，函数名为fn）
    • var timer = setInterval(‘fn()’)：设置一个定时器，每隔0毫秒调用一次回调函数fn（fn为预先定义好的函数，函数名为fn），不提倡
    • var timer = setInterval(function() {}, 3000)：设置一个定时器，每隔3000毫秒调用一次回调函数（匿名函数）
    • var timer = setInterval(fn, 3000)：设置一个定时器，每隔3000毫秒调用一次回调函数fn（fn为预先定义好的函数，函数名为fn）
    • var timer = setInterval(‘fn()’, 3000)：设置一个定时器，每隔3000毫秒调用一次回调函数fn（fn为预先定义好的函数，函数名为fn），不提倡

  • 清除定时器

    • setTimeout(timer)：清除执行一次的定时器timer（timer为定时器标识符，建议为每个定时器设置一个表示符，即一个变量名，或者一个对象的属性名）
    • clearInterval(timer)：取消重复执行的定时器timer（timer为定时器标识符，建议为每个定时器设置一个表示符，即一个变量名，或者一个对象的属性名）
    • timer = null; // 清除定时器变量

11）JS执行机制

• JS是单线程的

• HTML5允许JavaScript脚本创建多个线程，于是JS中出现了同步和异步

  • 同步任务：在主线程上执行，形成一个执行栈
  • 异步任务：通过回调函数实现，将异步任务相关回调函数添加到任务队列（又称消息队列）中，异步任务一般有三种类型
    • 普通事件，如click、resize等
    • 资源加载，如load、error等
    • 定时器，如setInterval、setTimeout等

• JS执行机制

  • 先执行主线程执行栈中的同步任务
  • 当有异步任务时，提交给对应的异步进程处理，将异步任务（回调函数）放入任务队列中
  • 主线程执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，读入执行栈开始执行，该过程称为事件循环

12）元素偏移量

• offset系列：经常用于获取元素位置，使用offsetLeft、offsetTop属性

  （获得元素距离带有定位父元素的位置，元素自身的大小等）

  （offset系列可以得到任意样式表中的样式值，包含padding+border+width，返回数值不带单位）

  （style只能获取行内样式值，不包含padding和border，返回数值是带单位的字符串）

  （offset系列是只读属性，一般用来获取元素位置大小）

  （style是可读可写属性，可以获取也可以赋值，一般用来改变元素位置大小）

  • element.offsetParent属性：返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
  • element.offsetTop属性：返回元素相对带有定位父元素上方的偏移
  • element.offsetLeft属性：返回元素相对带有定位父元素左边框的偏移
  • element.offsetWidth属性：返回自身包括padding、边框、内容区的宽度
  • element.offsetHeight属性：返回自身包括padding、边框、内容区的高度

13）元素可视区

• client系列：经常用于获取元素大小，使用clientWidth、clientHeight属性

  （获得元素边框大小，元素大小等）

  （返回数值不带单位）

  • element.clientTop属性：返回元素上边框的大小
  • element.clientLeft属性：返回元素上边框的大小
  • element.clientWidth属性：返回自身包括padding、内容区宽度，不含边框
  • element.clientHeight属性：返回自身包括padding、内容区高度，不含边框

14）元素滚动

• scroll系列：经常用于获取滚动距离，使用scrollTop、scrollLeft属性

  （获得元素的大小，滚动距离等）

  （返回数值不带单位）

  • element.scrollTop属性：返回元素被卷上去的上侧距离，不管边框
  • element.scrollLeft属性：返回被卷上去的左侧距离，不管边框
  • element.scrollWidth属性：返回元素自身实际宽度，包括padding、内容区宽度，不含边框
  • element.scrollHeight属性：返回元素自身实际高度，包括padding、内容区高度，不含边框

• onscroll事件：如果浏览器的度或宽度不足以显示整个页面时，会自动出现滚动条，当滚动条滚动时，页面被隐藏的高度或宽度称为页面被卷去的宽度或高度，滚动条在滚动时会触发onscroll事件，页面滚动事件要给document添加onscroll事件

• 页面滚动

  • 声明了DTD（），使用document.documentElement.scrollTop

  • 未声明DTD，使用document.body.scrollTop

  • IE9新方法：页面被卷去的头部用window.pageYOffset获得，页面被卷去的左侧用window.pageXOffset获得

  • 兼容性写法：使用时写getScroll().left

    function getScroll() {
    return {
    left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
    top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    };
    }
    

15）PC端动画

• 匀速动画公式：盒子当前位置+固定的值
• 缓动动画公式：盒子当前位置+(目标值-现在位置)/10
• 自动播放轮播图之调用点击事件：element.click(); // 放在重复执行的定时器里，每隔一定的时间调用一次
• 节流阀：当一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发，利用回调函数，添加一个变量来控制，锁住函数和解锁函数

16）移动端动画

（移动端浏览器兼容性较好，不需要考虑以前JS兼容性问题，可以放心使用原生JS书写效果）

（移动端也有自己独特的地方，比如触屏事件touch，Android和IOS都有，我试了试要用addEventListener方式添加监听）

• 移动端动画常用事件

  • touchstart事件：手指触摸到一个DOM元素时触发
  • touchmove事件：手指在一个DOM元素上滑动时触发，手指移动会触发屏幕滚动，所以通常要阻止默认的屏幕滚动（TouchEvent.preventDefault();）
  • touchend事件：手指从一个DOM元素上移开时触发
  • 过渡完成事件transitionend：过渡完成时触发的事件

• 移动端动画常用事件对象TouchEvent

  （touchstart、touchmove、touchend三个事件都各自有自己的触摸事件对象，其中常用的属性有）

  • touches属性：正在触摸屏幕的所有手指的一个列表，以数组形式存储
  • targetTouches属性：正在触摸当前DOM元素的手指的列表，以数组形式存储，常用
  • changedTouches属性：手指状态发生了改变的列表，从无到有，从有到无变化，以数组形式存储

• 移动端动画常用元素属性

  • classList属性：HTML5新增的一个属性，但是IE10以上才支持，经常使用在移动端，用来返回元素的类名（以数组形式存储，多个类名按索引获取），在元素中添加css类名，移除及切换css类名等
    • 添加类：element.classList.add(‘类名’)；
    • 移除类：element.classList.remove(‘类名’)；
    • 切换类：element.classList.toggle(‘类名’)；

• 移动端click事件延时解决方案

  • 禁用缩放

  • 利用touch事件自己封装这个事件解决300ms延时

    // 定义
    function tap (obj, callback) {
    	var isMove = false;
    	var startTime = 0;
    	obj.addEventListener('touchstart', function (e) {
    		startTime = Date.now();
    	});
    	obj.addEventListener('touchmove', function (e) {
    		isMove = true;
    	});
    	obj.addEventListener('touchend', function (e) {
    		if (!isMove && (Date.now() - startTime) < 150) {
    			callback && callback();
            }
    		isMove = false;
    		startTime = 0;
    	});
    }
    // 调用
    tap(div, function() {
    	alert(111);
    });
    

  • 使用fastclick插件：下载地址

    • 将fastclick.js引入html页面

    • 将下面的代码复制到自己的js文件中

      if ('addEventListener' in document) {
      	document.addEventListener('DOMContentLoaded', function() {
      		FastClick.attach(document.body);
      	},false);
      }
      

    • 就可以直接使用click事件了，如

      var div = document.querySelector('div');
      div.addEventListener('click',function() {
      	alert(111);
      })
      

• 移动端常用插件

  • Swiper动画插件：下载地址

  • superslide动画插件：下载地址

  • iscroll动画插件：下载地址

  • Bootstrap JS动画插件：中文官网

    • 引入相关样式文件

    • 复制HTML结构

    • 按照需求修改相应样式及参数

  • zy.media.js视频插件：实现外观样式、暂停、播放、全屏等功能在各浏览器上的一致性（ // 浏览器默认外观，各浏览器不一致）

17）本地存储

（容量较大，sessionStorage约5M、localStorage约20M）

（只能存储字符串，可以将对象JSON.stringify()编码后存储）

• 对象与字符串相互转换

  • 将对象转换为字符串：如 var data = JSON.stringify([{title: ‘1’, done: false}, {title: ‘2’, done: true}]);
  • 将字符串转换为对象：如 JSON.parse(data);

• window.sessionStorage

  （生命周期为关闭浏览器页面）

  （在同一个页面下数据可以共享）

  （以键值对的形式存储使用）

  • 存储数据：sessionStorage.setItem(key, value);

  • 获取数据：sessionStorage.getItem(key);

  • 删除数据：sessionStorage.removeItem(key);

  • 删除所有数据：sessionStorage.clear();

• window.localStorage

  （生命周期永久有效的，除非手动删除，否则页面关闭也会存在）

  （同一浏览器的不同页面间可以共享）

  （以键值对的形式存储使用）

  • 存储数据：localStorage.setItem(key, value);

  • 获取数据：localStorage.getItem(key);

  • 删除数据：localStorage.removeItem(key);

  • 删除所有数据：localStorage.clear();

三、jQuery

（常见的JavaScript库：jQuery、Prototype、YUI、Dojo、Ext J、移动端的zepto）

1）jQuery各版本

• 1x：兼容IE678等低版本浏览器，官网不再更新
• 2x：不兼容IE678等低版本浏览器，官网不再更新
• 3x：不兼容IE678等低版本浏览器，官网主要更新维护的版本

2）jQuery下载：

• 官网下载（3x）
• 各版本下载（1x、2x、3x）

3）jQuery入口函数

• $(function() {…}); // DOM结构渲染完毕执行函数内部代码，相当于原生js中的DOMContentLoaded（推荐）
• $(document).ready(function() {…}); // DOM结构渲染完毕执行函数内部代码，相当于原生js中的DOMContentLoaded

4）jQuery顶级对象$

• $是jQuery的别称，即 $(function() {…}); 等价于 jQuery(function() {…});

• $是jQuery的顶级对象，相当于原生JavaScript中的window

• 利用$把元素包装成jQuery对象，就可以调用jQuery的方法了

• 1）jQuery对象与DOM对象的转换

  • DOM对象获取：var myDiv1 = document.querySelector(‘div’); // DOM对象只能用原生JavaScript的属性和方法
  • jQuery对象获取：$(‘div’); // jQuery对象只能用jQuery方法
  • jQuery对象 -> DOM对象：$(‘div’)[index]; 或 $(‘div’).get(index); // 伪数组形式存储，如果只有1个，index取0
  • DOM对象 -> jQuery对象：$(myDiv1);

5）jQuery基础选择器

• ID选择器：$(“#id”);
• 全选选择器：$(“*”);
• 类选择器：$(“.class”);
• 标签选择器：$(“div”);
• 并集选择器：$(“div,p,li”);
• 交集选择器：$(“li.current”);

6）jQuery层级选择器

• 子代选择器：$(“ul>li”); // 亲儿子
• 后代选择器：$(“ul li”); // 包括孙子
• 1）jQuery筛选选择器
  • 获取第一个li元素：$(“li:first”);
  • 获取最后一个li元素：$(“li:last”);
  • 获取第二个li元素：$(“li:eq(2)”);
  • 获取奇数个li元素：$(“li:odd”);
  • 获取偶数个li元素：$(“li:even”);
  • 获取被选的元素：$(“.j-checkbox:checked”);

7）jQuery筛选方法

• 获取父元素：$(“.nav”).parent();
• 获取指定祖先元素：$(“.nav”).parents(“.p-num”);
• 获取亲儿子：$(“.nav”).children(“p”);
• 获取后代，包括孙子：$(“.nav”).find(“p”);
• 获取除自己以外的兄弟：$(“.first”).siblings(“li”);
• 获取自己后面的兄弟：$(“.third”).nextAll(“li”);
• 获取自己之前的兄弟：$(“.last”).prevtAll(“li”);
• 检查当前元素是否含有某个类，有返回true：$(“.nav”).hasClass(“protected”);
• 获取指定索引号的元素：$(“li”).eq(“2”); // 比同样效果的筛选选择器更常用

8）jQuery样式设置

• 获取元素属性值：$(“this”).css(“color”);
• 设置元素属性值：$(“this”).css(“color”, “red”);
• 同时设置元素多个属性值：$(“this”).css({“color”:“red”,“font-size”:“20px”});
• 添加类：$(“div”).addClass(“current”);
• 移除类：$(“div”).removeClass(“current”);
• 切换类：$(“div”).toggleClass(“current”);

9）jQuery隐式迭代

• 遍历jQuery对象内部DOM元素（伪数组形式存储）的过程叫做隐式迭代
• 给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作

10）jQuery链式编程

• $(“this”).css(“color”, “red”).sibling().css(“color”, “”);

11）jQuery动画

（显示隐藏、滑动、淡入淡出相关函数speed、easing、fn三个参数均可省略，一般都不加参数）

（speed参数用来指定切换速度，有"slow"、“normal”、“fast”、自定义毫秒值等取值）

（easing参数用来指定切换效果，有"swing"（默认）、"linear"等取值）

（fn回调函数是动画完成时执行的函数，每个元素执行一次）

• 显示隐藏

  • show(speed, easing, fn)：显示
  • hide(speed, easing, fn)：隐藏
  • toggle(speed, easing, fn)：切换

• 滑动

  • slideDown(speed, easing, fn)：下滑
  • slideUp(speed, easing, fn)：上滑
  • slideToggle(speed, easing, fn)：切换

• 淡入淡出

  • fadeIn(speed, easing, fn)：淡入
  • fadeOut(speed, easing, fn)：淡出
  • fadeToggle(speed, easing, fn)：切换
  • fadeTo(speed, opacity, easing, fn)：opacity透明度取值0~1之间，必须写

• 自定义动画

  • animate(param, speed, easing, fn)：param为想要改变元素的样式和属性，以对象形式传递，必须写，属性名可以不带引号，属性值如果不是数字必须加引号，如果是复合属性需要采取驼峰命名法

    // 例：有动画的返回顶部
    $("button").click(function() {
    	// 不能是文档而是html和body元素做动画
    	$("body, html").stop().animate(function() {
    		scrollTop: 0;
    	});
    });
    

• 动画队列

  • 动画队列：动画一旦触发就会执行，如果多次触发，就造成多个动画排队执行
  • 停止排队：stop()写在动画前面，相当于停止上一次动画，如$(this).children(“ul”).stop().slideToggle();

12）jQuery属性操作

• prop()函数：设置或获取元素固有属性值
  • prop(“name”, “value”); // 设置元素固有属性值
  • prop(“name”); // 获取元素固有属性值
• data()函数：在指定元素上存取数据，不会修改DOM元素结构，一旦页面刷新，之前存放的数据将被移除
  • data(“name”, “value”); // 向被选元素附加数据
  • data(“name”); // 向被选元素获取数据
  • data(“index”); // 获取H5自定义属性data-index，得到数字型
• attr()函数：设置或获取自定义属性值
  • attr(“name”, “value”); // 设置元素自定义属性值，类似于原生setAttribute()
  • attr(“name”); // 获取元素自定义属性值，类似于原生getAttribute()
  • attr(“data-index”); // 获取H5自定义属性data-index
• html()函数：获取或设置普通元素内容，相当于innerHTML
  • html(); // 获取元素内容
  • html(“内容”); // 设置元素内容
• text()函数：获取或设置普通元素文本内容，相当于innerText
  • text(); // 获取元素的文本内容
  • text(“文本内容”); // 设置元素的文本内容
• val()函数：获取或设置表单元素的值，相当于原生的value
  • val(); // 获取表单元素的值
  • val(“值”); // 设置表单元素的值
• toFixed(2); // 保留数字小数点后两位

13）jQuery元素操作

• each()函数：遍历元素，对一组元素做不同的操作

  $("div").each(function(index, domEle){
  	console.log(index);
  	console.log(domEle);
  });
  

• $each()函数：遍历任何对象，主要处理数组对象等数据

  $.each({name: "andy", age: 18}, function(i, ele){
  	console.log(i);
  	console.log(ele);
  });
  
  $.each(["red", "green", "blue"], function(i, ele){
  	console.log(i);
  	console.log(ele);
  });
  

• 创建元素：$(“

”)

• 添加元素

  • 在元素内部的后面添加：$(“ul”).append(“
  ”)
  • 在元素内部的前面添加：$(“ul”).prepend(“
  ”)
  • 在元素的后面添加：$(“ul”).after(“
    ”)
  • 在元素的前面添加：$(“ul”).before(“
    ”)

• 删除元素

  • 删除匹配元素本身：$(“ul”).remove()
  • 删除匹配的元素集合中所有的子节点：$(“ul”).empty() 或 $(“ul”).html(“”)

14）jQuery尺寸、位置操作

• 获取或设置元素尺寸操作

  （参数为空则是获取相应值，返回数字型）

  （如果参数为数字，则是修改相应值）

  （参数可以不写单位）

  • width()、height()：仅包含width、height
  • innerwidth()、innerheight()：包含padding
  • outerwidth()、outerheight()：包含padding、border
  • outerwidth(true)、outerheight(true)：包含padding、border、margin

• offset()函数获取或设置元素偏移

  （相对于文档的偏移坐标，跟父级没有关系）

  • 获取元素距离文档顶部的距离：$(“.son”).offset().top
  • 获取元素距离文档左侧的距离：$(“.son”).offset().left
  • 设置元素偏移：$(“.son”).offset({top: 200, left: 200});

• position()函数获取元素偏移

  （相对于带有定位的父元素的偏移坐标，如果父级都没有定位，则以文档为准）

  （只能获取，不能设置）

  • 获取元素距离带有定位的父元素的偏移数值：$(“.son”).position()

• scrollTop()、scrollLeft()设置或获取元素被卷去的头部和左侧

  • 获取元素被卷去的头部：$(document).scrollTop()
  • 设置元素被卷去的头部：$(document).scrollTop(0)
  • 获取元素被卷去的左侧：$(document).scrollLeft()
  • 设置元素被卷去的左侧：$(document).scrollLeft(0)

15）jQuery事件

• 单个事件注册

  • click鼠标点击事件：如$(“button”).click(function() {…});

  • change事件：如$(“.j-checkbox”).change(function() {…});

  • scroll事件：如$(window).scroll(function() {…});

  • mouseover、mouseout鼠标经过、离开事件（有冒泡）：如$(“.nav>li”).mouseover(function() {…});

  • mouseenter、mouseleave鼠标经过、离开事件（无冒泡）：$(“.nav>li”).mouseenter(function() {…});

  • hover：就是鼠标经过和离开的复合写法

    • 如果只写一个函数，则鼠标经过和离开都会触发这个函数：如$(“div”).hover(function() {…});

    • 如果写两个函数，则第一个鼠标经过触发（相当于mouseenter），第二个鼠标离开触发（相当于mouseleave）：如$(“div”).hover(function() {…}, function() {…});

  • 其他的还有keydown、keyup、blur、focus、resize事件等等，与原生JS基本一致

• on()方法一个或多个事件注册：在匹配元素上绑定一个或多个事件

  • 以传入对象的方式不同事件对应不同回调函数：$(“div”).on({mouseenter: function() {…}, mouseleave: function() {…}});
  • 不同事件对应相同回调函数：$(“div”).on(“mouseover mouseout”, function() {…});
  • 把原本应该加在子元素上的事件委派给父元素（触发对象还是子元素）：$(“ul”).on(“click”, “li”, function() {…});
  • JS动态创建的元素，click无法绑定事件，on()可以给动态生成的元素绑定事件，代码语法同上

• one()方法：给元素注册触发一次的事件

• off()方法：移除通过on()方法绑定的事件

  • 解绑所有事件：$(“p”).off();
  • 解绑指定事件：$(“p”).off(“click”);
  • 解绑事件委托：$(“ul”).off(“click”, “li”);

• 自动触发事件

  • 简写形式：$(“div”).click();

  • trigger()方法：$(“div”).trigger(“click”); // 会触发元素的默认行为

  • triggerHandler()方法：$(“div”).triggerHandler(“click”); // 不会触发元素的默认行为

• jQuery事件对象

  $("div").on("click", function(event) {
  	console.log(event);
  });
  

  • 阻止默认行为：event.preventDefault(); 或 return false;
  • 阻止冒泡：event.stopPropagation();

16）jQuery对象拷贝函数

• $.extend()：将一个对象合并给另外一个对象

  • 第一个参数：如果是true为深拷贝（将被拷贝对象中复杂数据类型的地址拷贝给目标对象，如果复杂数据类型中的数据有冲突则相当于覆盖了目标对象原来的数据），false为浅拷贝（完全克隆，拷贝的是对象不是地址，如果复杂数据类型中的数据有冲突，则会合并到一起），可以省略，默认false

  • 第二个参数：目标对象

  • 第二个参数：被拷贝的第一个对象

  • 第N个参数：被拷贝的第N个对象

17）jQuery多库共存

• 方法一：编程时统一修改$为jQuery
• 方法二：为jQuery变量规定新的名称替代$，如var suibian = $.noConflict(); 或 var suibian = jQuery.noConflict();

18）jQuery插件

• jQuery常用插件及网站

  • 图片懒加载插件EasyLazyload
    • 在jQuery插件库下载
    • 使用时必须将插件js引入文件和js调用写到DOM元素（图片）的最后面
  • 瀑布流插件
    • 在jQuery插件之家下载
  • 全屏滚动插件
    • 在GitHub官网地址下载
    • 在全屏滚动插件中文翻译网站下载

• jQuery插件使用步骤

  • 引入相关文件（jQuery文件和插件文件）
  • 复制相关html、css、js（调用插件）

• Bootstrap框架：最受欢迎的HTML、CSS、JS框架，用于开发响应式布局、移动设备优先的WEB项目

  • 官网下载地址

• Bootstrap框架中jQuery插件使用步骤

  • 引入相关文件（jQuery文件和插件文件）
  • 复制相关html结构

四、ECharts

1）常见数据可视化库

• D3.js：目前Web端评价最高的Javascript可视化工具库
• ECharts.js：百度出品的一个开源Javascript数据可视化库（相当于WPS）
• Highcharts.js：国外前端数据可视化库，非商用免费（相当于Office）
• AntV：蚂蚁金服全新一代数据可视化解决方案

2）ECharts使用五步曲

• 步骤1：下载并引入echarts.js文件
• 步骤2：准备一个具备大小的DOM容器，var chartDom = document.getElementById(‘main’);
• 步骤3：初始化echarts实例对象，var myChart = echarts.init(chartDom);
• 步骤4：指定配置项和数据，option = {…};
• 步骤5：将配置项设置给echarts实例对象，option && myChart.setOption(option);

3）边框图片

• border-image-source：边框图片路径
• border-image-slice：上右下左顺序裁剪的图片尺寸（不能加单位）
• border-image-width：图片边框的宽度（要加单位，不是边框的宽度，不能挤开盒子内部的文字）
• border-image-repeat：图片边框平铺（repeat）、铺满（round）、拉伸（stretch，默认）