4. javaScript基础学习笔记(下)

32 数组

解析：数组也是对象，和普通对象功能类似，也是用来存储一些值

数组分类

1. 内建对象
2. 宿主对象
3. 自定义对象

普通对象与数组对象区别

1. 普通对象使用字符串作为属性名
2. 数组使用数字来作为索引操作元素

索引

1. 从0开始的整数就是索引
2. 数组的存储性能比普通对象要好，在开发中经常使用数组来存储数据

构造函数创建数组对象

例如：var arr = new Array();

数组添加元素

语法：数组[索引] = 值

例如: arr[0] = 10;

读取数组元素

语法：数组[索引]

例如：console.log(arr[3]);

特殊: 如果读取不存在的索引，不会报错而是返回undefined

获取数组长度

解析：使用length属性来获取数组的长度(元素的个数)

语法：数组.length

连续数组与非连续数组

解析：

1. 连续的数组，使用length可以获取到数组的长度
2. 非连续的数组，使用length会获取到数组的最大的索引+1（尽量不要创建）

修改数组length

1. 修改的length大于原长度，则多出部分会空出来

例如：var arr = [1,2,3]

​ arr.length = 4;

​ console.log(arr); //1，2，3，，

2. 修改的length小于原长度，则多出的元素会被删除

例如：var arr = [1,2,3]

​ arr.length = 2;

​ console.log(arr); //1，2

数组最后位置添加元素

语法：数组[数组.length] = 值;

例如： arr[arr.length] = 90;

数组字面量

语法: []

例如： var arr = [1, 2, 3, 4, 5, 10];

构造函数数组创建时添加元素

解析：将要添加的元素作为构造函数的参数传递，元素之间使用逗号隔开

例如： var arr2 = new Array(10, 20, 30);

数组元素构成

解析：数组中的元素可以是任意的数据类型，包括：对象、数组、函数

例如：

var arr = [“hello”, 1, true, null, undefined,{ name: “孙悟空” },[1, 2, 3],function () { alert(1) }];

32.1 数组方法

32.1.1 push()

解析：

1. 该方法可以向数组的末尾添加一个或多个元素，并会将数组新的长度作为返回值返回；
2. 可以将要添加的元素作为方法的参数传递，

例如： var arr = [“孙悟空”, “猪八戒”, “沙和尚”];

​ var result = arr.push(“唐僧”);

​ console.log(arr); //[“孙悟空”, “猪八戒”, “沙和尚”, “唐僧”]

​ console.log("result = "+result); //4

32.1.2 pop()

解析：该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回

例如： var arr = [“孙悟空”, “猪八戒”, “沙和尚”];

​ result = arr.pop();

​ console.log(arr);//[“孙悟空”, “猪八戒”]

​ console.log("result = "+result);//[’‘唐僧’’]

32.1.3 unshift()

解析：

1. 向数组开头添加一个或多个元素，并返回新的数组长度
2. 向前边插入元素以后，其他的元素索引会依次调整

例如： arr.unshift(“二郎神”);

​ console.log(arr); //[’‘二郎神’’,“孙悟空”, “猪八戒”, “沙和尚”, “唐僧”]

32.1.4 shift()

解析： 可以删除数组的第一个元素，并将被删除的元素作为返回值返回

result = arr.shift();

console.log("result = " + result); //[’‘孙悟空’’]

32.1.5 slice(a,b)

解析：用来从数组提取指定元素；该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回

参数：

1. 截取开始的位置的索引,包含开始索引
2. 截取结束的位置的索引,不包含结束索引

特殊：

1. 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
2. 索引可以传递一个负值，如果传递一个负值，则从后往前计算

​ -1 倒数第一个

​ -2 倒数第二个

例如： var arr = [“孙悟空”, “猪八戒”, “沙和尚”, “唐僧”, “白骨精”];

var result = arr.slice(1, 4);// [ “猪八戒”, “沙和尚”, “唐僧”];

result = arr.slice(3);// [ “唐僧”, “白骨精”];

result = arr.slice(1, -2);// [ “猪八戒”, “沙和尚”];

32.1.6 splice()

解析：splice可以用于删除数组中的指定元素，使用splice()会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回

参数：

1. 第一个，表示开始位置的索引
2. 第二个，表示删除的数量
3. 第三个及以后可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

例如： arr = [“孙悟空”, “猪八戒”, “沙和尚”, “唐僧”, “白骨精”];

​ var result = arr.splice(3, 1);

​ console.log(arr);// [“孙悟空”, “猪八戒”, “沙和尚”, “白骨精”];

​ console.log(result);//[“唐僧”]

32.1.7 concat

解析：

1. 可以连接两个或多个数组，并将新的数组返回
2. 该方法不会对原数组产生影响

例如：

var arr = [“孙悟空”];

var arr2 = [“白骨精”];

var arr3 = [“蜘蛛精”];

var result = arr.concat(arr2, arr3, “牛魔王”); // [“孙悟空”, “白骨精”, “蜘蛛精”, “牛魔王”]

32.1.18 join

解析：

1. 该方法可以将数组转换为一个字符串
2. 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
3. 在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符；如果不指定连接符，则默认使用逗号作为连接符

例如：

var arr = [“孙悟空”, “猪八戒”];

result = arr.join("@-@");//孙悟空@-@猪八戒

32.1.9 reverse

解析: 该方法用来反转数组（前边的去后边，后边的去前边）

例如： var = [“孙悟空”, “猪八戒”, “沙和尚”];

​ arr.reverse(); // [“沙和尚”, “猪八戒”, “孙悟空”]

32.1.10 sort()

解析：

1. 可以用来对数组中的元素进行排序
2. 也会影响原数组，默认会按照Unicode编码进行排序

例如:

arr = [“b”, “d”, “e”, “a”, “c”];

arr.sort(); //[“a”, “b”, “c”, “d”, “e”]

特殊：即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，因此可能会得到错误的结果。

自定义排序规则

解析：

1. 在sort()添加一个回调函数，来指定排序规则；回调函数中需要定义两个形参
2. 浏览器将会分别使用数组中的元素作为实参去调用回调函数，使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
3. 浏览器会根据回调函数的返回值来决定元素的顺序，如下：

​ (1) 1 如果返回一个大于0的值，则元素会交换位置

​ (2) -1 如果返回一个小于0的值，则元素位置不变

​ (3) 0 如果返回一个0，则认为两个元素相等，也不交换位置

​ (4) 如果需要升序排列，则返回 a-b

​ (5) 如果需要降序排列，则返回b-a

例如：arr = [2,1,3];

arr.sort(function (a, b) {

//前边的大，是倒序

if(a > b){ return -1;

}else if(a < b){return 1;

}else{return 0; }//[3, 2,1]

//升序排列

// return a - b;

//降序排列

// return b - a; });

32.2 数组遍历

32.2.1 for

解析：

1. 遍历数组，将数组中所有的元素都取出来

例如： var arr = [“孙悟空”, “猪八戒”, “沙和尚”];

for (var i = 0; i < arr.length; i++) {

console.log(arr[i]);

}//孙悟空，猪八戒，沙和尚

32.2.2 forEach

解析：

1. 遍历数组，该方法只支持IE8以上的浏览器，不兼容IE8

2. 数组中有几个元素函数就执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，可以定义形参来读取这些内容

3. 浏览器会在回调函数中传递三个参数：

   第一个参数，就是当前正在遍历的元素

   第二个参数，就是当前正在遍历的元素的索引

   第三个参数，就是正在遍历的数组

例如： var arr = [“孙悟空”,“猪八戒”];

​ arr.forEach(function(value , index , obj){

​ console.log(value); });//孙悟空,猪八戒

其他知识：像forEach这种函数，由我们创建但是不由我们调用的，我们称为回调函数

33 arguments对象

在调用函数时，浏览器每次都会传递进两个隐含的参数：

1. 函数的上下文对象 this
2. 封装实参的对象 arguments

（1）arguments是一个类数组对象,它也可以通过索引来操作数据，也可以获取长度

34 Date对象

解析：JS中使用Date对象来表示一个时间

Date对象创建

1. 直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间

   例如：var d = new Date();

2. 创建一个指定的时间对象，需要在构造函数中传递一个表示时间的字符串作为参数

​ 日期的格式 月份/日/年 时:分:秒

​ 例如：var d2 = new Date(“2/18/2011 11:10:30”);

34.1 getDate()

解析： 获取当前日期对象是几日

例如：var d = new Date();

var date = d.getDate();//5

34.2 getDay()

解析： 获取当前日期对象时周几，会返回一个0-6的值

​ 0 表示周日，1表示周一，以此列推

例如：var day = d2.getDay()；

34.3 getMonth()

解析：获取当前时间对象的月份，会返回一个0-11的值

0 表示1月，1 表示2月，… ， 11 表示12月

例如: var month = d2.getMonth();

34.4 getFullYear()

解析: 获取当前日期对象的年份

例如：var year = d2.getFullYear();

34.5 getTime()

解析： 获取当前日期对象的时间戳；

1. 时间戳，指的是从格林威治标准时间的1970年1月1日0时0分0秒到当前日期所花费的毫秒数（1秒 = 1000毫秒）

2. 计算机底层在保存时间时使用都是时间戳

   例如： var time = d2.getTime();

3. 可利用时间戳来测试代码的执行的性能

例如：var start = Date.now();

for (var i = 0; i < 100; i++) {console.log(i); }var end = Date.now();

console.log(“执行了：” + (end - start) + “毫秒”);

35 Math对象

解析：

1. Math和其他的对象不同，它不是一个构造函数。
2. 它属于一个工具类，不用创建对象，它里边封装了数学运算相关的属性和方法

35.1 Math.abs()

解析： abs()可以用来计算一个数的绝对值

例如： Math.abs(-1) // 1

35.2 Math.ceil()

解析：可以对一个数进行向上取整，小数位只要有值就自动进1

35.3 Math.floor()

解析：可以对一个数进行向下取整，小数部分会被舍掉

35.4 Math.round()

解析： 可以对一个数进行四舍五入取整

35.5 Math.random()

解析：可以用来生成一个0-1之间的随机数

1. 生成一个0-x之间的随机数

语法：Math.round(Math.random()*x)

2. 生成一个x-y之间的随机数

语法：Math.round(Math.random()*（y-x）+x)

35.6 Math.max()

解析：可以获取多个数中的最大值

例如：var max = Math.max(10, 45, 30, 100);

35.7 Math.min()

解析：可以获取多个数中的最小值

例如：var min = Math.min(10, 45, 30, 100);

35.8 Math.pow(x,y)

解析：返回x的y次幂

例如：Math.pow(2,3) //8

35.9 Math.sqrt()

解析：用于对一个数进行开方运算

例如：Math.sqrt(4)//2

36 包装类

解析：在JS中为我们提供了三个包装类，通过这三个包装类可以临时将基本数据类型的数据转换为对象

1. String()-可以将基本数据类型字符串转换为String对象

2. Number()-可以将基本数据类型的数字转换为Number对象

3. Boolean()-可以将基本数据类型的布尔值转换为Boolean对象

4. 方法和属性能添加给对象，不能添加给基本数据类型；当我们对一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法；调用完以后，在将其转换为基本数据类型

   特殊：在实际应用中不会使用基本数据类型的对象，因为使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果

37 字符串的方法

解析：在底层字符串是以字符数组的形式保存的

例如：var str = "Hel“；//[“H”,“e”,“l”]

37.1 length

解析：可以用来获取字符串的长度

例如：var str = "Hel“；

console.log(str.length);//3

console.log(str[0]);//H

37.2 charAt()

解析： 可以返回字符串中指定位置的字符，根据索引获取指定的字符

例如：var result = str.charAt(6);

37.3 charCodeAt()

解析：获取指定位置字符的字符编码（Unicode编码）

例如：var result = str.charCodeAt(0);

37.4 String.formCharCode()

解析：可以根据字符编码去获取字符

例如：var result = String.fromCharCode(0x2692);

37.5 concat()

解析： 可以用来连接两个或多个字符串

例如：var result = str.concat(“你好”, “再见”);

37.6 indexof()

1. 该方法可以检索一个字符串中是否含有指定内容

2. 如果字符串中含有该内容，则会返回其第一次出现的索引

3. 如果没有找到指定的内容，则返回-1

4. 第二个参数可以指定开始查找的位置

例如： str = “hello hatguigu”;

​ result = str.indexOf(“h”, 6); //6

37.7 lastIndexOf()

1. 该方法的用法和indexOf()一样，

2. 不同的是indexOf是从前往后找，

3. 而lastIndexOf是从后往前找

4. 第二个参数可以指定开始查找的位置

例如:str = “hello hatguigu”;

result = str.lastIndexOf(“h”, 5); //0

37.8 slice()

解析：可以从字符串中截取指定的内容，不会影响原字符串，而是将截取到内容返回

参数：

1. 截取开始的位置的索引,包含开始索引
2. 截取结束的位置的索引,不包含结束索引

特殊：

1. 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
2. 索引可以传递一个负值，如果传递一个负值，则从后往前计算

​ -1 倒数第一个

​ -2 倒数第二个

37.9 substring()

解析： 可以用来截取一个字符串，跟slice()类似

参数：

1. 第一个：开始截取位置的索引（包括开始位置）

2. 第二个：结束位置的索引（不包括结束位置）

特殊：

1. 不同的是这个方法不能接受负值作为参数

2. 如果传递了一个负值，则默认使用0

3. 自动调整参数的位置：如果第二个参数小于第一个，则自动交换

例如： str = “abcdefghijk”;

result = str.substring(2, -1);//a,b

37.10 substr()

解析： 用来截取字符串

参数：

1. 截取开始位置的索引

2. 截取的长度

例如：str = “abcdefg”;

result = str.substr(3, 2); //de

37.11 split()

解析： 可以将一个字符串拆分为一个数组

参数：

1. 需要一个字符串作为参数，将会根据该字符串去拆分成数组

例如：str = “abcbcdefghij”;

​ result = str.split(“d”); // [“abcbc”, “efghij”]

2. 如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素

例如：result = str.split("");//[“a”, “b”, “c”, “b”, “c”, “d”, “e”, “f”, “g”, “h”, “i”, “j”]

37.12 toUpperCase()

解析：将一个字符串转换为大写并返回

例如：str = “abcdefg”;

​ result = str.toUpperCase(); //ABCDEFG

37.13 toLowerCase()

解析：将一个字符串转换为小写并返回

例如：str = “ABCDEFG”;

result = str.toLowerCase(); //abcdefg

38 正则表达式（对象）

解析： 正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，将字符串中符合规则的内容提取出来

语法：var 变量 = new RegExp(“正则表达式”,“匹配模式”);

第二个参数：匹配模式

​ i 忽略大小写

​ g 全局匹配模式

特殊: 可以为一个正则表达式设置多个匹配模式，且顺序无所谓

正则表达式的方法： test()

1. 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，

2. 如果符合则返回true，否则返回false

例如: var reg = new RegExp(“ab”, “g”);

​ var str = “a”;

​ var result = reg.test(str);

字面量创建正则表达式

语法：var 变量 = /正则表达式/匹配模式

例如：var reg = /a/i;

正则表达式- |

解析： | 表示或者的意思

例如：reg = /a|b|c/;

[]

解析：[]里的内容也是或的关系，[ab] == a|b

[a-z] 任意小写字母

[A-Z] 任意大写字母

[A-z] 任意字母

[0-9] 任意数字

[^ ] 除了

例如： reg = /[ ^0-9 ] /;

38.1 正则表达式-量词

解析：通过量词可以设置一个内容出现的次数，量词只对它前边的一个内容起作用

1. {n} 正好出现n次

2. {m,n} 出现m~n次

3. {m,} m次以上

4. +代表至少一个，相当于{1,}

5. *代表0个或多个，相当于{0,}

6. ？代表0个或1个，相当于{0,1}

38.2 正则表达式 -开头结尾

1. ^ 表示开头
2. $ 表示结尾

例如： reg = /^a/; //匹配开头的a

​ reg = /a$/; //匹配结尾的a

同时使用^ $

解析：t同时使用^ $则要求字符串必须完全符合正则表达式

例如：reg = /^a$/;

​ console.log(reg.test(“a”));//true

38.3 正则表达式–转义字符

解析：正则表达式中使用\作为转义字符

1. \ . 表示 .
2. \ \ 表示 \

例如：var reg = /\ ./; reg = /\ /;

特殊：使用构造函数创建正则表达式时，由于它的参数是一个字符串，而\是字符串中转义字符，如果要使用\则需要使用\ \来代替

例如： reg = new RegExp(" \ \ ."); // \

​ reg = new RegExp("\ \ \ \ "); // \ \

\w 任意字母、数字、_ == [A-z0-9_] //只要有字母、数字、 _ 就是true

\W 除了字母、数字、_ == [ ^A-z0-9_] //只要有除了字母、数字、 _ 的字符就是true

\d 任意的数字 [0-9] //只要有数字就是true

\D 除了数字 [ ^ 0-9] //只要有除了数字的字符就是true

\s 空格 //只要有空格就是true

例如： /^\s* |\s*$/g 匹配开头和结尾的空格去除

​ str = str.replace(/^\s* |\s*$/g, “”);

\S 除了空格 //只要有除了空格的字符就是true

\b 单词边界

\B 除了单词边界

39 字符串和正则相关的方法

39.1 split()

解析：

1. 可以将一个字符串拆分为一个数组

2. 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串

3. 这个方法即使不指定全局匹配，也会全都拆分

例如：var str = “1a2b3c4d5e6f7”;

var result = str.split(/[A-z]/);// 根据字母拆分 [“1”, “2”, “3”, “4”, “5”, “6”, “7”]

39.2 search()

解析：

1. 可以搜索字符串中是否含有指定内容
2. 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1
3. 它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
4. serach()只会查找第一个，即使设置全局匹配也没用

例如：str = “hello abc hello aec afc”;

result = str.search(/a[bef]c/); // 6

39.3 match()

解析：

1. 该方法可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
2. 默认情况下match只会找到第一个符合要求的内容，找到以后就停止检索
3. 可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
4. match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果

例如：str = “1a2a3a4a”;

​ result = str.match(/[a-z]/ig);

39.4 replace()

解析： 可以将字符串中指定内容替换为新的内容，默认只会替换第一个

参数：

1. 被替换的内容，可以接受一个正则表达式作为参数

2. 新的内容

例如：

str = “1a2a3a4a”;

result = str.replace(/[a-z]/gi, “”); //1234

40 DOM(文档对象模型)

解析： 浏览器已经为我们提供 文档节点 对象,这个对象是window属性。其可以在页面中直接使用，文档节点代表的是整个网页

40.1 事件

解析：事件就是用户和浏览器之间的交互行为

例如：点击按钮，鼠标移动、关闭窗口。。。

单击响应函数

解析：可以为按钮的对应事件绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会被调用

例如： var btn = document.getElementById(“btn”);

btn.onclick = function () {

​ alert(“你还点~~~”);};

40.1.1 事件的冒泡（Bubble）

解析：所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发；大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡

取消冒泡

解析：可以将事件对象的cancelBubble设置为true，即可取消冒泡

例如：event.cancelBubble = true;

40.1.2 事件委托

解析：

1. 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
2. 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

target

解析：event中的target表示的触发事件的对象

例如：event.target.className == “link”

40.1.3 事件绑定

方式一

解析：使用 对象.事件 = 函数 的形式绑定响应函数

1. 它只能同时为一个元素的一个事件绑定一个响应函数

2. 不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的

   例如：btn01.onclick = function(){alert(1);}

方式二

addEventListener()

解析：通过这个方法可以为元素绑定响应函数，而且能同时为一个元素的相同事件同时绑定多个响应函数，当事件被触发时，响应函数将会按照函数的绑定顺序执行

参数：

1. 事件的字符串，不要on
2. 回调函数，当事件触发时该函数会被调用
3. 是否在捕获阶段触发事件，需要一个布尔值，一般都传false

特殊：

1. 不支持IE8及以下的浏览器
2. addEventListener()中的this，是绑定事件的对象

例如：

btn01.addEventListener(“click”,function(){alert(1); },false);

btn01.addEventListener(“click”,function(){alert(2); },false);

attachEvent()

解析:通过这个方法可以为元素绑定响应函数，也可以同时为一个事件绑定多个处理函数

参数：

1. 事件的字符串，要on
2. 回调函数

特殊：

1. IE8中可以使用；
2. 跟addEventListener()不同的是它是后绑定的先执行，执行顺序和addEventListener()相反
3. attachEvent()中的this，是window

自定义函数统一以上两个方法this和绑定元素

参数：

1. obj 要绑定事件的对象

2. eventStr 事件的字符串(不要on)

3. callback 回调函数

例如：

function bind(obj, eventStr, callback) {

if (obj.addEventListener) {//大部分浏览器兼容的方式

​ obj.addEventListener(eventStr, callback, false); } else {// this是谁由调用方式决定 //callback.call(obj)

//IE8及以下

obj.attachEvent(“on” + eventStr, function () { //在匿名函数中调用回调函数

​ callback.call(obj); });} }

40.1.4 事件传播

解析：

1. 关于事件的传播网景公司和微软公司有不同的理解

​ * - 关于事件的传播网景公司和微软公司有不同的理解

​ --微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。

​ - - 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素

2. W3C综合了两个公司的方案，将事件传播分成了三个阶段

​ (1)捕获阶段

​ --在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件

​ (2)目标阶段

​ --事件捕获到目标元素，捕获结束开始在目标元素上触发事件

​ (3)冒泡阶段

​ --事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

特殊：

1. 如果希望在捕获阶段就触发事件，可将addEventListener()的第三个参数设置为true，一般情况下不会希望在捕获阶段触发事件，所以这个参数一般都是false

2. IE8及以下的浏览器中没有捕获阶段

40.1.5 鼠标事件–拖拽

onmousedown

解析：当鼠标在被拖拽元素上按下时，开始拖拽时使用

onmousemove

解析：当鼠标移动时被拖拽元素跟随鼠标移动时使用

onmouseup

解析：当鼠标松开时，被拖拽元素固定在当前位置时使用

取消浏览器拖拽默认行为

解析：当拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常，这个是浏览器提供的默认行为

方案：在绑定的响应时间下通过return false来取消默认行为

特殊：IE8不起作用

setCapture()

解析：可以让这个元素将下一次所有的—鼠标按下相关的事件-捕获到自身上

特殊：

1. 只有IE支持，但是在火狐中调用时不会报错
2. chrome调用，会报错

解决方案例如：obj.setCapture && obj.setCapture();

取消捕获： obj.releaseCapture && obj.releaseCapture();

40.1.6 滚轮事件

onmousewheel

解析：鼠标滚轮滚动的事件，会在滚轮滚动时触发

特殊：火狐不支持该属性

例如;box1.onmousewheel = function () {}

DOMMouseScroll

解析：鼠标滚轮滚动的事件，会在滚轮滚动时触发

特殊：

1. 火狐支持该属性
2. 该事件需要通过addEventListener()函数来绑定

例如：bind(box1, “DOMMouseScroll”,function(){});

event.wheelDelta

解析：

1. 获取鼠标滚轮滚动的方向
2. 向上为正
3. 向下为负

特殊：火狐不支持该属性

event.detail

解析：

1. 获取鼠标滚轮滚动的方向
2. 向上为负
3. 向下为正

特殊：火狐支持该属性

event.preventDefault()

解析：

1. addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
2. addEventListener()方法绑定响应函数，使用该方法能取消默认行为

特殊：IE8不支持event.preventDefault()，如果直接调用会报错

例如： event.preventDefault && event.preventDefault(); ///这样使用

取消默认浏览器滚动条

解析: 鼠标滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，这浏览器的默认行为，如果不希望发生，则可以取消默认行为

方案：return false;

40.1.7 键盘事件

onkeydown

解析：按键被按下时触发

1. 于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发

2. 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，这种设计是为了防止误操作的发生。

3. 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document

4. 通过keyCode来获取按键的编码

5. altKey、ctrlKey、shiftKey，用来判断alt、ctrl 和 shift是否被按下，如按下则返回true，否则返回false

例如： document.onkeydown = function (event) {

​ event = event || window.event;

​ console.log(event.keyCode);

​ console.log(ctrlKey);}

特殊：如果绑定文本input，在文本框中输入内容，属于onkeydown的默认行为。使用return false取消默认行为，则输入的内容，不会出现在文本框中

onkeyup

解析：按键被松开时触发

例如：document.onkeyup = function(){

​ console.log(“按键松开了”);

};

40.2 文档的加载

方式一：

解析：script标签写在body里面,页面下方

优点：加载快

方式二：

解析：script标签写到页面的上边。浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面的上边，在代码执行时，页面还没有加载;页面没有加载,DOM对象也没有加载，会导致无法获取到DOM对象

方案：onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件

例如： window.onload = function () {}

40.3 dom查询

40.3.1 getElementById(）

解析：根据id获取对应元素

例如： var btn01 = document.getElementById(“btn01”);

40.3.2 getElementsByTagName()

解析：根据标签名来获取一组元素节点对象

1. 该方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
2. 查询到的元素只有一个，也会封装到数组中返回

例如：var lis = document.getElementsByTagName(“li”);

40.3.3 getElementsByName()

解析： 根据name查找名字为name的所有元素节点

例如： var inputs = document.getElementsByName(“gender”);

40.3.4 innerHTML和 innerText

innerHTML

解析：

1. innerHTML用于获取元素内部的HTML代码
2. 对于自结束标签，这个属性没有意义

例如：alert(inputs[i].innerHTML);

innerText

解析：

1. 该属性可以获取到元素内部的文本内容
2. 它和innerHTML类似，不同的是它会自动将html去除

40.3.5 读取元素节点属性

1. 元素.属性名

例如：元素.id 元素.name 元素.value

2. class属性不能采用这种方式，方法： 元素.className

例如：alert(inputs[i].className);

40.3.6 childNodes属性

解析： childNodes属性会获取包括文本节点在内的所有节点，根据DOM标签，标签间空白也会当成文本节点

特殊：在IE8及以下的浏览器中，不会将空白文本当成子节点

40.3.7 children属性

解析：可以获取当前元素的所有子元素

40.3.8 firstChild属性

解析：可以获取到当前元素的第一个子节点（包括空白文本节点）

40.3.9 firstElementChild属性

解析：获取当前元素的第一个子元素

特殊：不支持IE8及以下的浏览器，

40.3.10 previousElementSibling属性

解析：获取前一个兄弟元素

特殊：IE8及以下不支持

40.3.11 document.body

解析：document中有一个属性body，它保存的是body的引用

获取body标签有两种方式：

1. var body = document.getElementsByTagName(“body”)[0];
2. var body = document.body;

40.3.12 document.all

解析：其代表页面中所有的元素

40.3.13 getElementsByClassName()

解析：可以根据class属性值获取一组元素节点对象

特殊：该方法不支持IE8及以下的浏览器

例如: var box1 = document.getElementsByClassName(“box1”);

40.3.14 document.querySelector()

解析：

1. 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
2. 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
3. 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个

例如： var div = document.querySelector(".box1 div");

40.3.15 document.querySelectorAll()

解析：

1. 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
2. 即使符合条件的元素只有一个，它也会返回数组

例如： box1 = document.querySelectorAll(".box1");

​ box1 = document.querySelectorAll("#box2");

40.4 dom增删改

40.4.1 document.createElement()

解析：

1. 可以用于创建一个元素节点对象；
2. 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回

例如： var li = document.createElement(“li”);

40.4.2 document.createTextNode()

解析：

1. 可以用来创建一个文本节点对象
2. 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回

例如： var gzText = document.createTextNode(“广州”)

40.4.3 appendChild()

解析：向一个父节点中添加一个新的子节点

用法：父节点.appendChild(子节点);

例如：city.appendChild(li);

40.4.4 insertBefore()

解析：可以在指定的子节点前插入新的子节点

用法： 父节点.insertBefore(新节点,旧节点);

例如： city.insertBefore(li, bj); //li为新节点

40.4.5 replaceChild()

解析：可以使用指定的子节点替换已有的子节点

语法：父节点.replaceChild(新节点,旧节点);

例如：city.replaceChild(li, bj);

40.4.5 removeChild()

解析：可以删除一个子节点

语法：父节点.removeChild(子节点); === 子节点.parentNode.removeChild(子节点);

例如：bj.parentNode.removeChild(bj);

40.5 dom操作css

解析：通过js修改元素的样式

语法：元素.style.样式名 = 样式值

特殊：

1. 如果CSS的样式名中含有-，比如background-color，这种名称在JS中是不合法的。
2. 需要去掉-，将这种样式名修改为驼峰命名法
3. 通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
4. 如果在css样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效

例如：box1.style.backgroundColor = “yellow”;

40.5.1 currentStyle

解析：获取元素的当前显示的样式，如果当前元素没有设置该样式，则获取它的默认值

语法：元素.currentStyle.样式名

特殊：只有IE浏览器支持，其他的浏览器都不支持

40.5.2 getComputedStyle()

解析：

1. 这个方法是window的方法，可以直接使用获取元素当前的样式
2. 该方法会返回一个对象，对象中封装了当前元素对应的样式
3. 可以通过对象.样式名来读取样式
4. 如果获取的样式没有设置，则会获取到真实的值，而不是默认值。比如：没有设置width，它不会获取到auto，而是一个长度

特殊：

1. 不支持IE8及以下的浏览器
2. currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性

两个参数

1. 第一个：要获取样式的元素

2. 第二个：可以传递一个伪元素，一般都传null

例如：

alert(getComputedStyle(box1,null).backgroundColor); //正常浏览器的方式

alert(box1.currentStyle.backgroundColor); //IE8的方式

40.5.3 clientWidth和clientHeight

解析：

1. 这两个属性可以获取元素的可见宽度和高度
2. 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
3. 会获取元素宽度和高度，包括内容区和内边距
4. 这些属性都是只读的，不能修改

例如： alert(box1.clientWidth);

40.5.4 offsetWidth和offsetHeight

解析：获取元素的整个的宽度和高度，包括内容区、内边距和边框

40.5.5 offsetParent

解析：

1. 可以用来获取当前元素的定位父元素
2. 会获取到离当前元素最近的开启了定位的祖先元素
3. 如果所有的祖先元素都没有开启定位，则返回body

40.5.6 offsetLeft

解析：当前元素相对于其定位父元素的水平偏移量

40.5.7 offsetTop

解析：当前元素相对于其定位父元素的垂直偏移量

40.5.8 scrollLeft

解析：可以获取水平滚动条滚动的距离

40.5.9 scrollTop

解析: 可以获取垂直滚动条滚动的距离

40.5.10 滚动条到底

scrollHeight - scrollTop == clientHeight //说明垂直滚动条滚动到底了

scrollWidth - scrollLeft == clientWidth //说明水平滚动条滚动到底

onscroll

解析：该事件会在元素的滚动条滚动时触发

40.5.11 onmousemove

解析: 该事件将会在鼠标在元素中移动时被触发

事件对象

1. 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,

2. 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘哪个按键被按下 鼠标滚轮滚动的方向等

3. 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的

4. 解决事件对象的兼容性问题：event = event || window.event;

40.5.12 clientX和clientY

解析：

1. clientX可以获取鼠标指针的水平坐标
2. cilentY可以获取鼠标指针的垂直坐标

40.5.12 类的操作

解析：

1. 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面，这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
2. 可以通过修改元素的class属性来间接的修改样式，而且只需要修改一次，即可同时修改多个样式。浏览器只需要重新渲染页面一次，性能比较好，并且这种方式，可以使表现和行为进一步的分离

例如：可以设置两个class属性，平常class选择第一个,我们可以把它的class属性修改为第二个，从而做到同时修改多个样式

41 Bom(浏览器对象类型)

解析：BOM可以使我们通过JS来操作浏览器，在BOM中为我们提供了一组对象，用来完成对浏览器的操作

Bom对象：window、navigator、location、history、screen

特殊：BOM对象在浏览器中都是作为window对象的属性保存，可以通过window对象来使用，也可以直接使用

41.1 Window对象

解析：window代表的是整个浏览器的窗口，同时window也是网页中的全局对象

41.2 Navigator (航海家)

解析：

1. navigator代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
2. 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器
3. 一般会使用userAgent来判断浏览器的信息

userAgent

解析：userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容， 不同的浏览器会有不同的userAgent

特殊：

1. 一般userAgent可以判断浏览器类型了，除了IE11

例如：var ua = navigator.userAgent;

if (/firefox/i.test(ua)) {

alert(“你是火狐！！！”);

} else if (/chrome/i.test(ua)) {

alert(“你是Chrome”);

} else if (/msie/i.test(ua)) {

alert(“你是IE浏览器~~~”);

} else if (“ActiveXObject” in window) {

alert(“你是IE11，枪毙了你~~~”); }

2. 如果通过一些浏览器中特有的对象，来判断浏览器的信息，IE11可以通过ActiveXObject判断

例如：判断IE11

if(“ActiveXObject” in window){alert(“你是IE，我已经抓住你了~~~”);

}else{alert(“你不是IE~~~”);}

“ActiveXObject” in window 这样才有用，window.ActiveXObject也不能判断IE11

41.3 Location

解析：location封装了浏览器的地址栏的信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面

1. 如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）

   例如：alert(location);

2. 如果直接将location属性修改为一个完整的路径，或相对路径，页面会自动跳转到该路径，并且会生成相应的历史记录

​ 例如：location = “http://www.baidu.com”;

41.3.1 assign()

解析：用来跳转到其他的页面，作用和直接修改location一样

例如：location.assign(“http://www.baidu.com”);

41.3.2 reload()

解析：用于重新加载当前页面，作用和刷新按钮一样

特殊：如果在方法中传递一个true，作为参数，则会强制清空缓存-刷新页面

例如：location.reload(true);

41.3.3 replace()

解析：

1. 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
2. 不会生成历史记录，不能使用回退按钮回退

例如： location.replace(“01.BOM.html”);

41.4 History

解析：

1. 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录

2. 由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效

length属性

解析：可以获取到当成访问的链接数量

例如：alert(history.length);

back()

解析：该方法可以用来回退到上一个页面，作用和浏览器的回退按钮一样

例如：history.back();

forward()

解析：可以跳转下一个页面，作用和浏览器的前进按钮一样

例如:history.forward();

go()

解析：该方法可以用来跳转到指定的页面，它需要一个整数作为参数

1. ​ 1:表示向前跳转一个页面 相当于forward()
2. ​ 2:表示向前跳转两个页面
3. ​ -1:表示向后跳转一个页面
4. ​ -2:表示向后跳转两个页面

例如：history.go(-2);

41.5 Screen

解析：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

42 setInterval() 定时调用

解析： 可以将一个函数，每隔一段时间执行一次

参数：

1. 回调函数，该函数会每隔一段时间被调用一次
2. 每次调用间隔的时间，单位是毫秒

返回值：

1. 返回一个Number类型的数据
2. 这个数字用来作为定时器的唯一标识

例如： var timer = setInterval(function () {

count.innerHTML = num++;

if (num == 11) {clearInterval(timer); //关闭定时器 }}, 1000);

42.1 clearInterval()

解析：

1. 可以用来关闭一个定时器
2. 方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器

例如：clearInterval(timer);

43 setTimeout() 延时调用

解析：延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次

特殊：

1. 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
2. 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择

例如;var timer = setTimeout(function () {

console.log(num++); }, 3000);

43.1 clearTimeout()

解析：

1. 可以用来关闭延时调用
2. 方法中需要一个定时器的标识作为参数，这样将关闭标识对应的延时器

例如：clearTimeout(timer);

44 JSON

解析：

1. JavaScript Object Notation JS对象表示法
2. JSON和JS对象的格式一样，不过JSON字符串中的属性名必须加双引号,其他的和JS语法一致
3. JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互
4. JSON是一个工具类，帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON

json分类:

1. 对象{}
2. 数组[]

json中允许的值：

1. 字符串

2. 数值

3. 布尔值

4. null

5. 对象

6. 数组

44.1 json字符串 --> js对象

解析：

1. 可以将以JSON字符串转换为js对象
2. 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回

语法： JSON.parse()

例如：

var arr = ‘[1,2,3,“hello”,true]’; //字符串

var o2 = JSON.parse(arr); // 对象 //[1, 2, 3, “hello”, true]

44.2 JS对象 —> JSON字符串

解析：

1. 可以将一个JS对象转换为JSON字符串
2. 需要一个js对象作为参数，会返回一个JSON字符串

语法：JSON.stringify()

例如：

var obj3 = { name: “猪八戒”, age: 28, gender: “男” }; //对象

var str = JSON.stringify(obj3); //字符串 // {“name”:“猪八戒”,“age”:28,“gender”:“男”}

44.3 eval()

解析：

1. 该函数可能用来执行一段字符串形式的JS代码，并将执行结果返回
2. 如果使用eval()执行的字符串中含有{},它会将{}当成是代码块
3. 如果不希望将其当成代码块解析，则需要在字符串前后各加一个()

特殊：

1. eval()这个函数的功能很强大，可以直接执行一个字符串中的js代码。
2. 它的执行性能比较差，然后它还具有安全隐患（少用）

44.4 IE7兼容

解析：JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错

方案：

1. 如果需要兼容IE7及以下的JSON操作，则可以通过引入一个外部的js文件来处理

2. 外部js文件自己写兼容代码（网上有）

其他方法

1 confirm()的使用

解析：

1. confirm()用于弹出一个带有确认和取消按钮的提示框
2. 需要一个字符串作为参数，该字符串将会作为提示文字显示出来
3. 如果用户点击确认则会返回true，如果点击取消则返回false

例如： var flag = confirm(“确认删除” + name + “吗?”);

2 超链接默认跳转

解析：

1. 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为
2. 如不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为

练习注意事项：

1 去除数组中重复的数字

–用两个数组x和j循环遍历删除重复数字

–当删除了当前j所在的元素以后，后边的元素会自动补位;此时x将不会在比较这个元素，我需要在比较一次j所在位置的元素

–方法：使j自减

2 手机号的规则：

​ --11位

​ --以1开头

​ --第二位3-9任意数字

​ --三位以后任意数字9个

3 反选的思路

(1)选中的设置为true,没选中的设置为false

(2)理解 a != a

(3)如果想按钮全选后触发选中全选按钮，但是使用if()else()判断麻烦，如果第一个是true，那全选按钮就是true了。所有这里可以用逆向思维，一开始先让全选按钮为true，然后如果判断有一个按钮为false，那该全选按钮就false。

4 for循环里面点击响应问题

解析：for循环会在页面加载完成之后立即执行， 而响应函数会在超链接被点击时才执行，当响应函数执行时，for循环早已执行完毕

解决：给or循环添加一个num属性记录i的值

例如： allA[i].num = i;

下面调用时，不用再调用i，而是调用this.num

5 div跟随鼠标移动

问题：

1. 开启div的绝对定位
2. 绑定鼠标移动事件
3. 解决兼容问题
4. clientX和clientY获取到鼠标的坐标
5. 设置给div的偏移量
6. 基本完成了
7. 但是浏览器滚动条的原因造成鼠标位置高于或者低于div的情况
8. 所以获取滚动条滚动的距离:

​ (1)chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取

​ (2)火狐等浏览器认为浏览器的滚动条是html的

​ var sl = document.body.scrollLeft || document.documentElement.scrollLeft;

​ var st = document.body.scrollTop || document.documentElement.scrollTop;

9. 给div偏移量加上

特殊：pageX和pageY可以获取鼠标相对于当前页面的坐标，但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用

6 点击图片自动切换

思路：

1. 获取Img标签
2. 创建数组保存图片路径
3. 创建变量保存索引，用索引来切换图片
4. 给开始按钮绑定单击事件
5. 新建定时器
6. 索引自增，图片变化
7. 用%来计算索引是否超过最大索引，达到最大索引，索引设置为0
8. 定义变量保存定时器标识
9. 再开启计时器的时候先关闭该元素其他计时器

特殊：在每次开启定时器前都要关闭该元素的其他定时器

7 键盘操作div移动

思路:

1. 使用switch判断
2. 知道控制移动按钮的编码
3. 绑定键盘键按下事件
4. 绑定键盘键松开事件

8 轮播图

思路：

1. 平常轮播图都有一个展示的外部盒子、一个ul列表和N个li标签
2. 我需要把li平铺成一行，自动切换计就是那一行图片向左移动，也就是减小ul的left
3. 要向平铺一行，我需要根据li的长度计算出图片的数量从而设置ul的宽度
4. 接下来使用定时器setInterval来自动切换
5. 通过定时器内部使图片的索引自增，从而改变向左移动的长度达到图片切换的效果
6. 我们可以控制轮播的对象、执行动画的样式、移动的宽度和移动速度
7. 当然为了好看，会把超出盒子的溢出出片裁剪

特殊：不过要特别考虑的点就是图片轮播总会到头，为了能优雅的进重头轮播，会再增加一个li放第一张图片，使用index判断，当index到达最后一张图片时轮播对象的left设置为0，重头开始轮播，因为最后一张图片和第一张图片一样，left跳转到0,不会突兀。

9 二级菜单

解析：div具有collapsed这个类时，div就是折叠的状态。div没有这个类是，div就是展开的状态

思路：

1. 获取一级菜单元素

2. 定义变量，保存当前打开的一级菜单，默认第一个一级菜单是打开状态

3. 绑定单击响应函数，把拥有collapsed的一级菜单的collapsed删除，把没有collapsed的一级菜单添加collapsed

4. 实现点击哪个一级菜单哪个菜单展开，其他一级菜单折叠

5. 为了实现友好的动画效果，获取折叠前和折叠后的高度，设置定时器，缓慢移动

6. 数值

7. 布尔值

8. null

9. 对象

10. 数组

44.1 json字符串 --> js对象

解析：

1. 可以将以JSON字符串转换为js对象
2. 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回

语法： JSON.parse()

例如：

var arr = ‘[1,2,3,“hello”,true]’; //字符串

var o2 = JSON.parse(arr); // 对象 //[1, 2, 3, “hello”, true]

44.2 JS对象 —> JSON字符串

解析：

1. 可以将一个JS对象转换为JSON字符串
2. 需要一个js对象作为参数，会返回一个JSON字符串

语法：JSON.stringify()

例如：

var obj3 = { name: “猪八戒”, age: 28, gender: “男” }; //对象

var str = JSON.stringify(obj3); //字符串 // {“name”:“猪八戒”,“age”:28,“gender”:“男”}

44.3 eval()

解析：

1. 该函数可能用来执行一段字符串形式的JS代码，并将执行结果返回
2. 如果使用eval()执行的字符串中含有{},它会将{}当成是代码块
3. 如果不希望将其当成代码块解析，则需要在字符串前后各加一个()

特殊：

1. eval()这个函数的功能很强大，可以直接执行一个字符串中的js代码。
2. 它的执行性能比较差，然后它还具有安全隐患（少用）

44.4 IE7兼容

解析：JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错

方案：

1. 如果需要兼容IE7及以下的JSON操作，则可以通过引入一个外部的js文件来处理

2. 外部js文件自己写兼容代码（网上有）

[外链图片转存中…(img-24HwA9K2-1611037102903)]

其他方法

1 confirm()的使用

解析：

1. confirm()用于弹出一个带有确认和取消按钮的提示框
2. 需要一个字符串作为参数，该字符串将会作为提示文字显示出来
3. 如果用户点击确认则会返回true，如果点击取消则返回false

例如： var flag = confirm(“确认删除” + name + “吗?”);

2 超链接默认跳转

解析：

1. 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为
2. 如不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为

练习注意事项：

1 去除数组中重复的数字

–用两个数组x和j循环遍历删除重复数字

–当删除了当前j所在的元素以后，后边的元素会自动补位;此时x将不会在比较这个元素，我需要在比较一次j所在位置的元素

–方法：使j自减

2 手机号的规则：

​ --11位

​ --以1开头

​ --第二位3-9任意数字

​ --三位以后任意数字9个

3 反选的思路

(1)选中的设置为true,没选中的设置为false

(2)理解 a != a

(3)如果想按钮全选后触发选中全选按钮，但是使用if()else()判断麻烦，如果第一个是true，那全选按钮就是true了。所有这里可以用逆向思维，一开始先让全选按钮为true，然后如果判断有一个按钮为false，那该全选按钮就false。

4 for循环里面点击响应问题

解析：for循环会在页面加载完成之后立即执行， 而响应函数会在超链接被点击时才执行，当响应函数执行时，for循环早已执行完毕

解决：给or循环添加一个num属性记录i的值

例如： allA[i].num = i;

下面调用时，不用再调用i，而是调用this.num

5 div跟随鼠标移动

问题：

1. 开启div的绝对定位
2. 绑定鼠标移动事件
3. 解决兼容问题
4. clientX和clientY获取到鼠标的坐标
5. 设置给div的偏移量
6. 基本完成了
7. 但是浏览器滚动条的原因造成鼠标位置高于或者低于div的情况
8. 所以获取滚动条滚动的距离:

​ (1)chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取

​ (2)火狐等浏览器认为浏览器的滚动条是html的

​ var sl = document.body.scrollLeft || document.documentElement.scrollLeft;

​ var st = document.body.scrollTop || document.documentElement.scrollTop;

9. 给div偏移量加上

特殊：pageX和pageY可以获取鼠标相对于当前页面的坐标，但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用

6 点击图片自动切换

思路：

1. 获取Img标签
2. 创建数组保存图片路径
3. 创建变量保存索引，用索引来切换图片
4. 给开始按钮绑定单击事件
5. 新建定时器
6. 索引自增，图片变化
7. 用%来计算索引是否超过最大索引，达到最大索引，索引设置为0
8. 定义变量保存定时器标识
9. 再开启计时器的时候先关闭该元素其他计时器

特殊：在每次开启定时器前都要关闭该元素的其他定时器

7 键盘操作div移动

思路:

1. 使用switch判断
2. 知道控制移动按钮的编码
3. 绑定键盘键按下事件
4. 绑定键盘键松开事件

8 轮播图

思路：

1. 平常轮播图都有一个展示的外部盒子、一个ul列表和N个li标签
2. 我需要把li平铺成一行，自动切换计就是那一行图片向左移动，也就是减小ul的left
3. 要向平铺一行，我需要根据li的长度计算出图片的数量从而设置ul的宽度
4. 接下来使用定时器setInterval来自动切换
5. 通过定时器内部使图片的索引自增，从而改变向左移动的长度达到图片切换的效果
6. 我们可以控制轮播的对象、执行动画的样式、移动的宽度和移动速度
7. 当然为了好看，会把超出盒子的溢出出片裁剪

特殊：不过要特别考虑的点就是图片轮播总会到头，为了能优雅的进重头轮播，会再增加一个li放第一张图片，使用index判断，当index到达最后一张图片时轮播对象的left设置为0，重头开始轮播，因为最后一张图片和第一张图片一样，left跳转到0,不会突兀。

9 二级菜单

解析：div具有collapsed这个类时，div就是折叠的状态。div没有这个类是，div就是展开的状态

思路：

1. 获取一级菜单元素
2. 定义变量，保存当前打开的一级菜单，默认第一个一级菜单是打开状态
3. 绑定单击响应函数，把拥有collapsed的一级菜单的collapsed删除，把没有collapsed的一级菜单添加collapsed
4. 实现点击哪个一级菜单哪个菜单展开，其他一级菜单折叠
5. 为了实现友好的动画效果，获取折叠前和折叠后的高度，设置定时器，缓慢移动