javscricpt基础

基本数据类型：string、number、boolean、null、undefined
引用数据类型：object
比较基本数据类型时，是比较值；但是比较两个引用数据类型时，比较的是对象的内存地址，如果两个对象一摸一样，但是地址不同，也会返回false；
in 运算符
检查对象中是否含有指定的属性，有则是true,没有则是false

<html><head><meta charset="UTF-8"><title>测试</title><script type="text/javascript">var obj = new Object();// obj["123"] = 789;// console.log(["123"]);var obj2 = new Object();obj2.name = "猪八戒";obj.test = obj2;console.log(obj);console.log("test" in obj);console.log("age" in obj);</script></head><body></body>
</html>

对象字面量

使用对象字面量，可以在创建对象时，直接指定对象中的属性。

var obj = new Object();
var obj = {};
var obj2 = {name:"猪八戒"，age:28
};

函数
函数的实参可以是任意的数据类型，也可以是对象，当参数过多的时候，可以将参数封装在对象中传。

<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">function sayHello(o){console.log(o.address);}var obj = {name:"猪八戒",gender:"男",age:18,address:"高老庄"}sayHello(obj);</script></head><body></body></html>

实参也可以是一个函数。

<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">function sayHello(o){console.log(o.address);}var obj = {name:"猪八戒",gender:"男",age:18,address:"高老庄"}sayHello(obj);function fun(a){console.log(a);a(obj);}fun(sayHello);</script></head><body></body></html>

立即执行函数

往往只执行一次。

  fun(sayHello);(function(){alert("这是一个立即执行函数");})();

对象的属性值可以的任何的数据类型。
若一个函数作为一个对象的属性值保存时，调用这个函数就可以可以成为调用方法。
对象中有几个属性，可以使用for…in语句。对象中有几个属性，循环体就会执行几次

var obj = {name:"猪八戒",gender:"男",age:18,address:"高老庄"}for(var n in obj){console.log(n);console.log(obj[n]);}

作用域
全局作用域：在页面打开时创建，在页面关闭时销毁；在全局作用域中有一个全局对象window，代表浏览器的窗口，由浏览器创建，可以直接使用。在全局作用域中创建的变量都会作为window对象的属性。创建的函数都会作为window对象的方法。
变量的申明提前
使用var关键字申明的变量，会在所有的代码执行之前被声明，但是不会被赋值。但是如果声明关键字时不使用var关键字，则变量不会被声明提前。

console.log(a);
var a = 123;//结果不会报错，但是a输出结果是undified

函数的声明提前
-使用函数声明形式创建的函数function函数（）{}它会在所有的代码执行之前就被创建，所以可以在函数声明之前调用函数
-使用函数表达式不会被提前创建

 sayHello();function sayHello(){console.log("啦啦啦哦");}

 fun();//会显示undefiedvar fun = function(){console.log("这种创建函数的方式不会被提前创建")}

函数作用域
–每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的；
–调用函数时，创建函数作用域，函数执行完毕之后，函数作用域销毁；
–在函数若想用全局变量，可用window.变量名；
–在函数中不使用var声明的变量都会成为全局变量

<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">var c = 10;function fun(){console.log(c);//undefinedvar c = 33;}function fun1(){console.log(c);c = 33;}// fun();fun1();console.log(c);//33</script></head><body></body></html>

 --定义形参就相当于在函数中var一个变量

this
解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象，根据函数调用方式的不同，this会指向不同的对象。
（1）以函数调用，this永远都是window
（2）以方法调用，this就是调用方法的那个对象。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomign</title><script type="text/javascript">function fun(){alert(this.name);}fun();var obj = {name:"沙和尚",sayName:fun,}obj.sayName();</script></head><body></body>
</html>

使用工厂方法创建对象

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomign</title><script type="text/javascript">function creatObject(name,age,sex){var obj = new Object;obj.name = name;obj.age = age;obj.sex = sex;obj.sayName = function(){console.log(this.name);};return obj;  }var obj2 = creatObject("沙和尚",18,"男");obj2.sayName();console.log(obj2);</script></head><body></body>
</html>

构造方法
构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写。
构造函数和普通函数的区别就是调用方式的不同。普通函数就是直接调用，而构造函数需要使用new关键字来调用。

构造函数的执行：

（1）立刻创建一个新的对象；
（2）将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象；
（3）逐行执行函数中的代码；
（4）将新建的对象作为返回值返回；
使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数成为一个类。我们将通过一个构造函数创建的对象，称为是该类的实例。（使用instance可以检查一个对象是否是一个类的实例）
所有对象都是Object的后代。

this的情况

：
（1）当以函数的形式调用时，this就是window；
（2）当以方法的形式调用时，谁调用方法this就是谁；
（3）当以构造函数形式调用时，this就是新创建的对象

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomign</title><script type="text/javascript">function Person(name,age,sex){this.name = name;this.age = age;this.sex = sex;this.sayName = function(){console.log(this.name);}}var per1 = new Person("孙文空",18,"男");console.log(per1);per1.sayName();</script></head><body></body>
</html>

优化上述代码：由于创建10000个对象就创建10000个方法。为了提升性能进行优化

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomign</title><script type="text/javascript">function Person(name,age,sex){this.name = name;this.age = age;this.sex = sex;this.sayName = fun;}/*将函数定义在全局作用域，污染了全局作用域的命名空间*而且定义在全局作用域中也很不安全*/function fun(){console.log(this.name);};var per1 = new Person("孙文空",18,"男");console.log(per1);per1.sayName();</script></head><body></body>
</html>

原型对象(为了解决上述代码中的问题)
原型prototype
我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
这个属性对应着一个对象，这个对象就是我们所谓的原型对象。
当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__来访问。
原型对象就相当于一个公共区域，所有同一类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。
当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会在原型对象中寻找，如果找到直接使用。
以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象具有这些属性和方法。
in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true。
可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性。

原型对象也是对象，所有它也有原型。当我们使用一个对象的属性或方法时，会先在自身中寻找
自身中有则直接使用，
如果没有在则去原型对象中寻找，如果原型对象中有则使用，
如果没有则去原型的原型中寻找，直到找到Object对象的原型，Object对象的原型没有原型，如果在Object中仍然没有找到，则返回undefined。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomign</title><script type="text/javascript">function Person(){}Person.prototype.age = 18;var per1 = new Person();per1.name = "孙悟空";//in检查对象中是否含有某个属性，如果对象中没有但是原型中有，也会trueconsole.log("name" in per1);console.log("age" in per1);//hasOwnProperty检查对象中自身是否含有某个属性console.log(per1.hasOwnProperty("name"));console.log(per1.hasOwnProperty("age"));//检查hasOwnProperty在什么中console.log(per1.hasOwnProperty("hasOwnProperty"));//对象自身是否有console.log(per1.__proto__.hasOwnProperty("hasOwnProperty"));//对象原型中是否有console.log(per1.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//对象原型的原型（Object的原型）中是否有</script></head><body></body>
</html>

toString()

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomign</title><script type="text/javascript">function Person(name , age , sex){this.name = name;this.age = age;this.sex = sex;}Person.prototype.toString = function(){console.log("name=" + this.name,"age=" + this.age, "sex=" + this.sex);}var per = new Person("孙悟空",18,"男");var per1 = new Person("猪八戒",28,"男");console.log(per);console.log(per1);//console.log(per);//console.log(per.toString());//console.log(per.hasOwnProperty("toString"));//console.log(per.__proto__.hasOwnProperty("toString"));//console.log(per.__proto__.__proto__.hasOwnProperty("toString"));</script></head><body></body>
</html>

垃圾回收
当一个对象没有任何的变量或属性对它进行引用，此时将无法操作该对象。此时这种对象就是垃圾。这种对象过多，会占用大量的内存空间。
js有自动垃圾回收机制。
这里有一部分数组的知识点缺失
数组去重

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomign</title><script type="text/javascript">var arr = [1,2,3,2,2,3,4,2,5];//去除数组中重复的数字for(var i=0;i<arr.length;i++){for(var j=i+1;j<arr.length;j++){if(arr[i] == arr[j]){arr.splice(j,1);j = j-1;}}}console.log(arr);</script></head><body></body>
</html>

sort()可以用来对数组中的元素进行排序，会影响原数组，默认会按照Unicode编码进行排序。
但是即使对于纯数字的数组，也会按照Unicode编码顺序进行排序，可能会出现错误的结果，见如下代码。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomign</title><script type="text/javascript">arr = [3,4,11,2,5];arr.sort();console.log(arr);//11,2,3,4,5    </script></head><body></body>
</html>

我们可以再sort()提娜佳一个回调函数，来制定排序规则。回调函数中需要定义两个参数，浏览器将会分别使用数组中的元素作为实参去调用回调函数。使用那个元素调用不确定，但是肯定是再数组中a一定在b前边。
浏览器会根据回调函数的返回值来决定元素的顺序：如果返回一个大于0的值，则元素会交换位置；
入宫返回一个小于0的值，则元素位置不变；
如果返回一个0，则认为两个元素相等，也不交换。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomign</title><script type="text/javascript">arr = [3,4,11,2,5];arr.sort(function(a,b){if(a>b){return 1;}else if (a<b){return -1;}else {return 0;}});console.log(arr);</script></head><body></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomign</title><script type="text/javascript">arr = [3,4,11,2,5];arr.sort(function(a,b){return a-b;});console.log(arr);          </script></head><body></body>
</html>

call()和apply（）
这两个方法都是函数对象的方法，需要通过函数对象来调用。
当对函数调用call()和apply()都会调用函数执行。
在调用call()和apply()可以将一个对象指定为第一个参数。此时这个对象将会成为函数执行时的this
call()方法可以将实参在对象之后以此传递。
apply（）方法需要将实参封装在一个数组中统一传递。
fun是对象（函数），而fun()是函数的返回值。
this的情况：
（1）以函数形式调用时，this永远是windows
(2)以方法的形式调用时，this是调用方法的对象
（3）以构造函数形式调用时，this是新创建的对象
（4）使用call和apply调用时，this是指定的那个对象。
（5）在事件的相应函数中，响应函数是谁绑定的this就是谁

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomign</title><script type="text/javascript">function fun(){console.log(this);}var obj ={};fun.apply(obj);//fun();</script></head><body></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomign</title><script type="text/javascript">function fun(a,b){console.log("a=" + a);console.log("b=" + b);console.log(this);}var obj ={};fun.call(obj,2,3);fun.apply(obj,[2,3]);//fun();</script></head><body></body>
</html>

var checkAllBox = document.getElementById("checkAllBox");checkAllBox.onclick = function(){console.log(this);for(var i=0;i<items.length;i++){items[i].checked = this.checked;}}

在调用函数时，浏览器每次会传递进两个隐含的参数：
（1）函数的上下文对象this；
（2）封装实参的对象arguments。
-arguments是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度。
-在调用函数时，我们所传递的实参都会在arguments中保存.
-arguments.length可以用来获取实参的长度。
-即使不定义形参，也可以通过arguments来使用实参。只不过比较麻烦，arguments[0]表示第一个实参，以此类推。
-arguments还有一个属性，叫做callee，这个属性对应一个函数对象，就是当前正在执行的函数对象。
Date对象
–在Js中使用Date对象来表示一个时间。
创建一个指定的时间对象。需要在构造函数中传递一个表示时间的字符串作为参数，日期格式：月/日/年时：分：秒

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomign</title><script type="text/javascript">var d = new Date();var d2 = new Date("12/03/2016 18:15:17");console.log(d);console.log(d2);</script></head><body></body>
</html>

–getDate()获取当前日期对象是几日。
–getDay()获取当前日期是周几。会返回0-6的值
–getMonth()获取当前日期的月份。会返回0-11.
–getYear()获取当前日期的年份。（不太好，还是用getFullYear()）
–getFullYear()获取当前日期对象的年份。
–getTime()获取当前日期时间对象的时间戳。
时间戳指的是从格林威治时间的1970年1月1日，0时0分0秒到当前日期所花费的毫秒数。计算机底层在保存时间时都是时间戳。
获取当前时间戳var time = Date.now(); console.log(time);

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

var m = new Math();

–abs()绝对值–ceil()向上取整–floor()向下取整–round()四舍五入
生成一个x-y之间的随机数
Math.round(Math.random()*(y-x)+x)
–pow(x,y)返回x的y次幂

包装类
基本数据类型：String Boolean Number Null Undefined
引用数据类型：Object
JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象。
String()可以将基本数据类型字符串转换为String对象
Number()可以将基本数据类型数字转换为Number对象
Boolean()可以将基本数据类型布尔值转换为Boolean对象
但是注意，我们在实际应用中不会使用基本数据类型的对象，如果使用基本数据类型的对象，会做一些比较时可能会带来一些不可预期的结果

var b = new Boolean(false);if(b){console.log("执行这个指令");}

当我们对一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后再调用对象的属性和方法。调用完以后，仍是基本数据类型。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomign</title><script type="text/javascript">var s = 3;s = s.toString();//3s.hello = "hello";console.log(s.hello);//undefined（转换两次，两次不是同一个）</script></head><body></body>
</html>

字符串的方法
在底层字符串是以字符数组的形式保存的。
charAt()可以返回字符串中指定位置的字符，根据索引获取指定位置的字符。
charCodeAt()获取指定位置字符编码（Unicode编码）
fromCharCode()可以根据字符编码去获取字符。特殊的是通过构造函数String去调用。

var s = "Hello sb";var result = String.fromCharCode(72);console.log(result);

concate（）
indexOf()可以检索一个字符串中是否含有指定内容。如果含有则会返回第一次出现的索引，如果不含有则返回-1.可以指定一个第二个参数，指定开始查找的位置。

var s = "Hello sb";var index = s.indexOf("e");console.log(index);

lastIndexOf()该方法的用法与indexOf()一样，不同的是从后往前找。也可以指定第二个参数。
slice()可以从字符串中截取指定的内容。不会影响原字符串。将截取内容返回。
subString()可以用来截取一个字符串，与slice()类似。不同的是这个方法不能接受负值，若传递赋值，则默认使用0，而且他还会自动调整参数的位置，如果第二个参数小于第一个，则自动交换。
subStr()用来截取字符串，参数:(1)截取开始位置的索引；（2）第二个是截取的长度。对原数组也无影响。
split()可以将一个字符串拆分为一个数组。参数：需要一个字符作为参数，将会根据字符去拆分数组。
如果传一个空串作为参数，将会根据该字符串去拆分数组。

var s = "Hell,osb,obj";var result = s.split(",");console.log(result);

toLocaleLowerCase()将字符串转换为小写
toLowerCase()将字符串转换为小写
toLocaleUpperCase()将字符串转换为大写
toUpperCase()将字符串转换为大写，并返回。均不会影响原字符串。

正则表达式
用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，或者将字符串中符合规则的内容提取出来。
创建正则表达式的对象，这个正则表达式可以用来见检查一个字符串中是否含有a
正则表达式的创建语法：
（1）使用构造函数创建正则表达式（灵活）
var 变量 = new RegExp(“正则表示式”,“匹配模式”)
（2）使用字面量来创建正则表达式（简单）
var 变量 = /正则表达式/匹配模式
在构造函数中可以传递一个匹配模式作为第二个参数，i（忽略大小写）g（全局匹配模式）
正则表达式的方法：
test()使用这个方法可以用来检查一个字符串是否符合正则表达式的规则。如果符合则是true，否则false

//检查字符串s是否符合reg正则表达式的规则
var reg = new RegExp("a");var s = "ab";var result = reg.test(s);console.log(result);

使用“|”表示或的意思,[]里的内容也是或的内容.即[ab] = a|b
[^ ]除了以外的东西

//创建一个正则表达式检查一个字符串中是否有字母。[a-z]任意小写字母；[A -z]任意字母，忽略大小写reg = /[a-z]/;var result = reg.test("afthj");console.log(result);

//创建一个正则表达式检查一个字符串中是否含有abc或adc或aecreg = /a[bde]c/;var result = reg.test("abc");console.log(result);

//创建一个正则表达式检查一个字符串中是否含有除了ab以外的东西reg = /[^ab]/;var result = reg.test("abc");console.log(result);

字符串和正则相关的方法
–split()将一个字符串拆分为一个数组，方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分。这个方法即使不指定全局匹配，也会全部都拆分。

var str = "1a2b3c4d5e6f7"var result = str.split(/[a-z]/);console.log(result);

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

var str = "hello abc hello aec afc"var result = str.search(/a[bef]c/);console.log(result);

–match()可以根据正则表达式，从一个字符串中将符合条件的内容提取出来。默认情况下我们的macth指挥找到第一个符合要求的内容，找到以后就停止搜索。我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有内容。可为一个正则表达式设置多个匹配模式，且顺序无所谓。会将匹配到的内容封装到一个数组返回。
–replace()可以将字符串中指定内容替换为新的内容。第一个参数：被替换的内容（可以是正则表达式）；第二个参数：新的内容。默认只替换第一个，可以接受一个正则表达式。

正则表达式语法
–量词，通过量词可以设置一个内容出现的次数。量词只对它前边的一个内容起作用。
{n}正好出现n次

var reg = /ab{3}c/;console.log(reg.test("abbbbc"));//false

{m,n}出现m-n次。{m,}出现m次以上
+至少一个，相当于{1，}；*0个或多个，相当于{0，}；？0个或1个，相当于{0，1}
^表示开头；$表示结尾
.表示任意字符。
在正则表达式中使用\作为转义字符。
注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转移字符，如果要使用\则需要使用\来代替。
\w–表示任意字母数字和–
\W–除了字母数字和下划线
\d–任意的数字
\D–除了任意的数字
\s–空格
\S–除了空格
\b–单词边界
\B–除了单词边界

var reg = /\bchild\
b/

/去除开头和结尾的空格，保留字符串中间的空格/
str = "      hel    lo        ";
str = str.replace(/^\s*|\s*$/g,"");
console.log(str);

电子邮件的正则表达式

//创建一个正则表达式检查一个字符串中是否//任意数字字母下划线 . 任意数字字母下划线 @ 任意字母数字  . 任意字母（2-5）. 任意字母（2-5）//\w{3,}  (\.\w{3,})* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}var reg = /^\w{3,}(\.\w{3,})*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;console.log(reg.test("3020844985@qq.com"));//false

DOM简介（Document Object Model文档对象模型）
JS中通过DOM来对HTML文档进行操作。
文档：整个HTML网页的文档
对象：网页中的每一个部分都转换为了一个对象。
模型：使用模型来表示对象之间的关系。这样方便我们获取对象。
节点：是构成我们网页的最基本的组成部分。网页中的每一个部分都可以称为是一个节点。（比如：HTML标签、属性、文本、注释、整个文档等都是一个节点）。但是他们虽然都是节点，但实际上他们的具体类型是不同的。类型不同，属性和方法也都不尽相同。
文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

浏览器已经为我们提供了文档节点对象，这个对象是window属性，可以在页面中直接使用。
NodeName nodeType nodeValue
文档节点 #document 9 Null
元素节点标签名 1 Null
属性节点属性名 2 属性值
文本节点 #text 3 文本内容

事件的简介
事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。
Javascript与HTML之间的交互是通过事件实现的。（对于Web应用来说，有下面这些代表性的事件：点击某一个元素，将鼠标移动至某个元素上方、按下键盘上某个键，等等。）
文档的加载（浏览器加载页面的顺序）
浏览器在加载一个页面时，是按照自上而下的顺序加载的，读取一行就运行一行。若将scricpt标签写在页面的上边，在代码执行时，页面还未加载。
onload事件会在整个页面加载完成之后才触发。（为Window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行。这样确保我们的代码执行时所有的DOM对象已经加载完毕了）
dom查询

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomign</title><script type="text/javascript">window.onload = function (){var btn01 = document.getElementById("btn01");btn01.onclick = function(){var bj = document.getElementById("bj");alert(bj.innerHTML);};var btn02 = document.getElementById("btn02");btn02.onclick = function(){//getElementsByTagName会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中。var lis = document.getElementsByTagName("li");for(var i=0;i<lis.length;i++){alert(lis[i].innerHTML);} }var btn03 = document.getElementById("btn03");btn03.onclick = function(){var gender = document.getElementsByName("gender");//innerHTML用于获取元素内部的HTML代码的，对于自结束标签。这个属性没有意义//alert(gender[0].innerHTML);//这样是获取不到值得alert(gender[0].value);}   }       </script><style>.flex-container {border:1px solid #a1a1a1;width:300px;height:445px;}.flex-item {width:300px;height:445px;}</style></head><body><div class="flex-container"><div ><p>你喜欢哪个城市</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><p>你喜欢哪款单机游戏</p><ul id="game"><li>红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><p>你手机的操作系统是？</p><ul id="phone"><li>IOS</li><li>Android</li><li>Windows Phone</li></ul></div><div>gender:<input name="gender" type="radio" value="Male">Male</input><input type="radio" name="gender" value="Female">Female</input></br>name:<input type="text" value="" id="username"></input></div></div><div id="btnList" class="flex-item"><button id="btn01">查找#bj节点</button></br><button id="btn02">查找所有li节点</button></br><button id="btn03">查找name=gender的所有节点</button></br><button id="btn04">查找#city下所有li节点</button></br><button id="btn05">返回#city的所有子节点</button></br><button id="btn06">返回#phone的第一个子节点</button></br><button id="btn07">返回#bj的父节点</button></br><button id="btn08">返回#android的前一个兄弟节点</button></br><button id="btn09">返回#username的value属性值</button></br><button id="btn10">设置#usernamedevalue属性值</button></br><button id="btn11">返回#bj的文本值</button></br></div></body>
</html>

图片切换练习

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomign</title><script type="text/javascript">window.onload = function(){var prev = document.getElementById("prev");var next = document.getElementById("next");var img = document.getElementsByTagName("img")[0];var p = document.getElementsByTagName("p")[0];var index = 0;var imgArray = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg"];console.log(imgArray.length);prev.onclick = function(){index--;if(index < 0){index=imgArray.length-1;}img.src=imgArray[index];p.innerHTML = "一共"+imgArray.length+"张图片,当前第"+(index+1)+"张图片";}next.onclick = function(){index++;if(index >= imgArray.length){index = 0;}img.src = imgArray[index];p.innerHTML = "一共"+imgArray.length+"张图片,当前第"+(index+1)+"张图片";}}   </script><style>img{    background-color:gray;padding:25px 25px;height:300px;weight:300px;}div{position:absolute;left:500px;top:200px;  }</style></head><body><div><p></p><img src="1.jpg"/><button id="prev">上一张</button><button id="next">下一张</button></div></body>
</html>

DOM查询（获取元素节点得子节点）
通过具体的元素节点调用
（1）getElementsByTagName()
方法，返回当前节点指定标签名后代节点
（2）childNodes
属性，当前节点的所有子节点
会获取包括文本节点在内的所有节点。DOM标签间的空白也会当成文本节点，注意IE8不会将空白文本当成子节点。
–children属性可以获取当前元素的所有子元素。
(3)firstChild
属性，当前节点的第一个子节点。包括空白文本节点。
–firstElementChild获取当前元素的第一个子元素，但是兼容性不是很好。
（4）lastChild
属性，当前节点的最后一个子节点
（5）parentNode
属性，表示当前节点的父节点
（6）previousSibling
属性，当前节点的前一个兄弟节点。也会获取空白文本
–previousElementSibling获取前一个兄弟节点元素，不包括空白文本。兼容性。
（7）nextSibling
属性，当前节点的后一个兄弟节点
innerText获取元素内部的文本内容，它会自动将HTML标签去除

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>xiaomign</title><script type="text/javascript">window.onload = function (){function myClike(index,fun){var btn = document.getElementById(index);btn.onclick = fun;}var btn01 = document.getElementById("btn01");btn01.onclick = function(){var bj = document.getElementById("bj");alert(bj.innerHTML);};var btn02 = document.getElementById("btn02");btn02.onclick = function(){//getElementsByTagName会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中。var lis = document.getElementsByTagName("li");for(var i=0;i<lis.length;i++){alert(lis[i].innerHTML);}   }var btn03 = document.getElementById("btn03");btn03.onclick = function(){var gender = document.getElementsByName("gender");//innerHTML用于获取元素内部的HTML代码的，对于自结束标签。这个属性没有意义//alert(gender[0].innerHTML);//这样是获取不到值得alert(gender[0].value);}var btn04 = document.getElementById("btn04");btn04.onclick = function(){var city = document.getElementById("city");var lis = city.getElementsByTagName("li");for(var i=0;i<lis.length;i++){alert(lis[i].innerHTML);}       }var btn05 = document.getElementById("btn05");btn05.onclick = function(){console.log(city);var cotycity = city.children;alert(cotycity.length);for(var i=0;i<cotycity.length;i++){alert(cotycity[i].innerHTML);}}var btn06 = document.getElementById("btn06");btn06.onclick = function(){var phone = document.getElementById("phone");var pho = phone.firstElementChild;console.log(pho.innerHTML);}myClike("btn07",function(){var bj = document.getElementById("bj");var father = bj.parentNode;console.log(father.innerText);}); }               </script><style>.flex-container {border:1px solid #a1a1a1;width:300px;height:445px;}.flex-item {width:300px;height:445px;}</style></head><body><div class="flex-container"><div ><p>你喜欢哪个城市</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><p>你喜欢哪款单机游戏</p><ul id="game"><li>红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><p>你手机的操作系统是？</p><ul id="phone"><li>IOS</li><li>Android</li><li>Windows Phone</li></ul></div><div>gender:<input name="gender" type="radio" value="Male">Male</input><input type="radio" name="gender" value="Female">Female</input></br>name:<input type="text" value="" id="username"></input></div></div><div id="btnList" class="flex-item"><button id="btn01">查找#bj节点</button></br><button id="btn02">查找所有li节点</button></br><button id="btn03">查找name=gender的所有节点</button></br><button id="btn04">查找#city下所有li节点</button></br><button id="btn05">返回#city的所有子节点</button></br><button id="btn06">返回#phone的第一个子节点</button></br><button id="btn07">返回#bj的父节点</button></br><button id="btn08">返回#android的前一个兄弟节点</button></br><button id="btn09">返回#username的value属性值</button></br><button id="btn10">设置#usernamedevalue属性值</button></br><button id="btn11">返回#bj的文本值</button></br></div></body>
</html>

获取body标签:在document中有一个属性body，保存的是body的引用

var body = document.body;
console.log(body);

document.documentElement保存的是HTML根标签。
document.all代表页面中所有元素
document.getElementsByClassName()可以根据class属性值获取一组元素节点对象。（兼容性）
document.querySelector()
–需要一个选择器的字符串作为参数，可以根据一个CSS选择器查询一个元素节点对象。使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，也只返回第一个。
document.querySelectorAll()
–该方法会将符合条件的元素封装在一个数组中返回。

dom增删改
document.creatElement()可以创建一个元素节点对象，需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建的对象作为返回值返回。
document.createTextCode(data,String)可以创建一个文本节点
appendChild()像一个父节点添加子节点。

myClick("btn01",function(){console.log("enter chaungjian");var li = document.createElement("li");var gzText = document.createTextNode("广州");li.appendChild(gzText);var city = document.getElementById("city");city.appendChild(li);});

父节点.inserBefore(newChild:node,refChild:node)在某个节点之前插入
父节点.replaceBefore(newChild:node,oldChild:node)用某一个节点替换
父节点.removeChild(子节点)删除子节点
字节点.parentNode.removeChild(子节点)不需要获取父节点。

//这种方式相当于将所有的city里面的内容重写，会出现不可预估的问题。
myClick("btn01",function(){var city = document.getElementById("city");city.innerHTML += "<li>广州</li>";})

删除练习
window.confirm()弹出一个带有确认和取消按钮的提示框，需要一个字符串作为参数，该字符串将作为提示文字显示出来。该会有返回值。
bug

<script type="text/javascript">window.onload = function(){//删除按钮var allA = document.getElementsByTagName("a");for(var i=0;i<allA.length;i++){allA[i].onclick = function(){var tr = this.parentNode.parentNode;console.log(this);conasole.log(allA[i]);//undefiedconsole.log(i)//永远都是3}</script>

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

使用DOM操作内联样式
通过JS修改元素的样式语法：
元素.style.样式名 = 样式值
注意：如果CSS的央视名称中含有“-”这种名称在JS中是不合法的，需要将这种样式名修改为驼峰命名法。
通过style属性设置的样式都是内敛样式，而内联样式有较高的优先级。但是如果样式中有！important，此时通过JS不能覆盖该样式。
读取样式语法：元素.style.样式名（读取的也是内联样式，无法读取样式表中的样式。）
读取元素当前显示的样式：元素.currentStyle.样式名（这个语法只有ie浏览器支持）、
在其他浏览器中可以使用getComputedStyle(获取样式的元素，可以产地伪元素，一般是null)这个方法来获取元素的当前样式，该方法会返回一个对象，对象中封装了当前元素对应的样式。如果获取的样式没有设置，则会获得真实的值，而不是默认值。
通过currentStyle和getComputedStyle（）读取的样式都是只读，不能修改。
考虑浏览器兼容性问题：

<html><head><meta charset="UTF-8">/><title>数组reduce()练习</title><script type="text/javascript">window.onload= function(){var box = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function(){function getStyle(obj,name){if(window.getComputedStyle){return getComputedStyle(obj,null)[name];}else {return obj.currentStyle[name];}}var result = getStyle(box,"width");console.log(result);}}</script><style type="text/css">#box1 {width:200px;height:200px;background-color:red;}</style></head>
<body><button id="btn01">点击</button><div id="box1" ></div>
</body>
</html>

其他样式属性
–clientWidth,–clientHeight这两个属性获取元素的可见宽度和高度，这些属性都是不带px，值发挥一个数字，可直接进行计算，会获取元素的高度和宽度，包括内容区和内边距。
–offsetWidth,–offsetHeight获取元素的整个的宽度和高度，包括内容区、内边距和边框。
–offsetParent获取当前元素的定位父元素，会获取到离当前元素最近的开启了定位的祖先元素（style=“positon: relative”）如果所有的祖先元素都没有开启定位，则返回body
–offsetLeft,–offsetTop当前元素相对于其定位元素的水平偏移量/垂直偏移量
–scrollWidth,–scrollHeight可以获取元素整个滚动区域的高度。
–scrollLeft,–scrollTop获取水平/垂直滚动条滚动的区域。
当满足scrollHeight - scrollTop == clientHeight说明垂直滚动条到底了。
满足scrollWidth - scrollLeft == clientWidth说明水平滚动条滚到底了。

42.阅读协议页面代码
onscroll该事件会在元素的滚动条滚动时触发。

<html><head><meta charset="UTF-8"/><title>数组reduce()练习</title><script type="text/javascript">window.onload= function(){var p = document.getElementById("info");var input = document.getElementsByTagName("input")[0];p.onscroll = function(){console.log("滚动条滚动");if(p.scrollHeight - p.scrollTop == p.clientHeight){console.log("滚动到底")input.disabled = false;}else {console.log("else" + input.disabled);}}console.log(p.scrollHeight);console.log(p.scrollTop);console.log(p.clientHeight);}</script><style type="text/css">#info {width:200px;height:300px;background-color:#bfa;overflow:auto;}</style></head>
<body><h3>欢迎亲爱的用户注册</h3><p id="info">亲爱的用户，请仔细阅读以下协议，如果不阅读你就别注册。《王者荣耀》是腾讯第一5V5团队公平竞技手游，国民MOBA手游大作！5V5王者峡谷、公平对战、还原MOBA经典体验；契约之战、五军对决、边境突围等，带来花式作战乐趣！10秒实时跨区匹配，与好友开黑上分，向最强王者进击！多款英雄任凭选择，一血、五杀、超神，实力碾压，收割全场！敌军即将到达战场，王者召唤师快来集结好友，准备团战，就在《王者荣耀》！</p><input type="checkbox" disabled="disabled">我已仔细阅读协议</input>
</body>
</html>

onmousemove该事件会在鼠标移动时触发

44.事件对象：当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数。在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘那个键盘被按下，滚轮的方向。
clientX:获取鼠标指针的水平坐标(相对于可见窗口坐标)
clientY ：获取鼠标指针的垂直坐标
兼容性问题：IE8及以下，响应函数被触发时，浏览器不会传递事件对象，而是将事件对象作为window对象的属性保存。

window.onload = function(){var areaDiv = document.getElementById("areaDiv");var showMsg = document.getElementById("showMsg");areaDiv.onmousemove = function(event){event = event||window.event;//兼容性console.log(event.clientX);console.log(event.clientY);}}

div随鼠标移动

<script type="text/javascript">window.onload = function(){var areaDiv = document.getElementById("areaDiv");window.onmousemove = function(event){event = event||window.event;var left = event.clientX;var top = event.clientY;areaDiv.style.left = left + "px";areaDiv.style.top = top +"px";}}</script>

上述代码有问题：clentxS是获取鼠标在当前可见窗口的坐标，div的偏移量，是相对于整个页面。
pageX和pageY可以获取鼠标相对于当前页面的坐标。但是这两个属性在IE8里面不能用。
获取滚动条滚动的距离
chroem认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
火狐等浏览器认为浏览器的滚动条是html的

<script type="text/javascript">window.onload = function(){var areaDiv = document.getElementById("areaDiv");window.onmousemove = function(event){var str = document.body.scrollTop||document.documentElement.scrollTop;event = event||window.event;var left = event.clientX;var top = event.clientY;areaDiv.style.left = left + "px";areaDiv.style.top = top +str+"px";}} </script>

事件的冒泡
–所谓的冒泡指的是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。
–在开发中冒泡是有用的。如果不希望发生，则可以通过事件对象来取消冒泡。

<script type="text/javascript">window.onload = function(){var s1 = document.getElementById("s1");s1.onclick = function(event){event = event||window.event;event.cancelBubble = true;//取消冒泡console.log("s1的单机响应函数");}var box1 = document.getElementById("box1");box1.onclick = function(){console.log("box1的单机响应函数");}var body = document.body;body.onclick = function(){console.log("body的响应函数");}}</script>

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

<html><head><title></title><script type="text/javascript">window.onload = function(){var a = document.getElementsByTagName("a");//这种方式为每一个超链接都绑定一个单机响应函数，而这些操作只能为已有的超链接设置事件，而新添的超链接必须重新绑定//for(var i=0;i<a.length;i++){//   a[i].onclick = function(){//       console.log("xaiognying");//  }//}//只绑定一次，就应用到多个元素，即使元素是后添加的，可以尝试绑定给元素的祖先元素,//这就是事件的委派，var ul = document.getElementById("ul");ul.onclick = function(event){//如果触发事件的对象是我们期待的元素，则执行否则不执行。event = event||window.event;console.log(event.target);if(event.target.className == "link"){console.log("enter");}else {}}var btn01 = document.getElementById("btn01");btn01.onclick = function(){var li = document.createElement("li");li.innerHTML = "<a href='javascript:;' class='link'>新建连接</a>";//var ul = document.getElementById("ul");ul.appendChild(li);}}</script><style type="text/css"></style></head><body><button id="btn01">添加超链接</button><ul id="ul"><li><a href="javascript:;" class="link">超链接一</a></li><li><a href="javascript:;" class="link">超链接二</a></li><li><a href="javascript:;" class="link">超链接三</a></li></ul></body>
</html>

event.target表示。。。。。。。。

事件的绑定
对象.事件 = 函数：绑定的响应函数，只能同时为一个事件绑定一个响应函数，不能绑定多个，否则会覆盖。
–addEventListener()通过这个方法也可以为元素绑定响应函数（该函数中的this指的是绑定事件的对象）
–参数：（1）事件的字符串，不要on
（2）回调函数，当事件触发时，函数会被调用
(3)是否在捕获阶段触发事件，需要一个布尔值，一般都传false
可以同时为一个元素的相同事件同时绑定多个响应函数，这样响应函数将会按照绑定顺序执行。同时一些特殊事件也需要这个来绑定。
兼容性：不支持IE8及其以下的浏览器
–attachEvent()在IE8中可以绑定事件，不同的是这个是后绑定的先执行，执行顺序和addEventListener（）相反。（该函数中的this指的是window）
参数：
（1）事件的字符串，要on
（2）回调函数

为了兼容所有的浏览器，自定义一个绑定函数，如下所示：
参数：
obj 要绑定的事件
eventStr 事件的字符串
callback 回调函数

this是由调用方式决定
该代码的难点是this的转换

<html><head><meta charset="UTF-8"/><title>事件的绑定</title><script type="text/javascript">window.onload = function(){//var btn01 = document.getElementById("btn01");//btn01.addEventListener("click",function(){//   console.log("1");//},false)var btn01 = document.getElementById("btn01");bind(btn01,"click",function(){console.log(this)});function bind(obj,eventStr,callback){if(obj.addEventListener){obj.addEventListener(eventStr,callback,false);}else {obj.attachEvent("on" + eventStr,function(){//**在匿名函数中调用回调函数**callback.call(obj);});}}}</script><style type="text/css"></style></head><body><button id="btn01">点击</button></body>
<html>

z这段代码东西有点对，对照着知识点得分析

事件的传播
-关于事件的传播网警公司和微软公司有不同看法
–微软公司：事件应该是由内向外传播，也就是事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素向上传播，也就是事件应该在冒泡阶段执行。（事件的冒泡）
–网警公司：事件应该由外向内传播，当前事件触发时，应该先触发当前元素的最外层元素事件，再向内传播（事件的捕获）
–W3C：将事件传播分成了三个阶段
（1）捕获阶段：从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
（2）目标阶段：捕获结束开始在目标元素上触发事件
（3）冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。
若希望在捕获阶段就执行事件，则需要将addEventListener中变成true，一般不用。
拖拽
流程：（1）当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
(2)当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
(3)当鼠标松开时，被拖拽元素固定在当前位置 onmouseup

<!DOCTYPE html>
<html><head><meta charset="UTF-8"/><title></title><script type="text/javascript">window.onload = function(){var box1 = document.getElementById("box1");box1.onmousedown = function(event){//div的偏移量   鼠标.clentX - 元素.offsetLeft//div的偏移量   鼠标.clentY - 元素.offsetTopvar ol = event.clientX - box1.offsetLeft;var ot = event.clientY - box1.offsetTop;document.onmousemove = function(event){event = event||window.event;//获取鼠标坐标var left = event.clientX - ol;var top = event.clientY - ot;box1.style.left = left + "px";box1.style.top = top + "px";}box1.onmouseup = function(){document.onmousemove = null;document.onmouseup = null;}return false;}//当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索的内容，会导致拖拽功能异常。若不希望发生这个行为，可通过return false来默认取消}</script><style type="text/css">#box1 {width:100px;height:100px;background-color:#FF0000;position:absolute;}#box2 {width:100px;height:100px;background-color:#00FF00;position:absolute;left:300px;top:150px;}</style></head><body><div id="box1"></div><div id="box2"></div></body>
</html>

setCapture（）只有IE浏览器支持

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;position: absolute;}#box2 {width: 100px;height: 100px;background-color: yellow;position: absolute;top: 200px;left: 500px;}</style><script type="text/javascript">window.onload = function() {/** 使鼠标可以在页面中来拖拽box1* * 拖拽的流程：*   1.当鼠标在元素上按下时，开始拖拽    onmousedown*    2.当鼠标移动时，元素跟随鼠标移动    onmousemove*    3.当鼠标松开时，元素固定在当前位置，拖拽结束   onmouseup*///1.当鼠标在元素上按下时，开始拖拽   onmousedown//为box1绑定一个鼠标按下的事件var box1 = document.getElementById("box1");drag(box1);var box2 = document.getElementById("box2");drag(box2);var img1 = document.getElementById("img1");drag(img1);};/** 提取一个可以拖拽任意元素的函数*  obj 要拖拽的元素*/function drag(obj) {obj.onmousedown = function(event) {event = event || window.event;//设置box1捕获所有的鼠标按下的事件//在chrome中没有setCapture()和releaseCapture()方法//所以调用会导致浏览器报错/*if(box1.setCapture){box1.setCapture();}*/obj.setCapture && obj.setCapture();//求元素的偏移量//clientX - offsetLeftvar ol = event.clientX - obj.offsetLeft;var ot = event.clientY - obj.offsetTop;/** 目前我们的元素的左上角和鼠标指针重合，*   我们希望我们点击元素时，鼠标和元素的相对的位置保持不变*///2.当鼠标移动时，元素跟随鼠标移动  onmousemove//为document绑定一个鼠标移动的事件document.onmousemove = function(event) {event = event || window.event;//获取鼠标的坐标var left = event.clientX - ol;var top = event.clientY - ot;//修改box1的位置obj.style.left = left + "px";obj.style.top = top + "px";};//3.当鼠标松开时，元素固定在当前位置，拖拽结束 onmouseupdocument.onmouseup = function() {//当鼠标松开时，将元素固定在当前位置，取消document的onmousemove事件document.onmousemove = null;//onmouseup事件只需要执行一次，执行过一次以后就没有存在的意义了document.onmouseup = null;/*if(box1.releaseCapture){//设置box1不再对所有的事件进行捕获box1.releaseCapture();}*/obj.releaseCapture && obj.releaseCapture();};/** 当我们在浏览器中选中一个文字或一个内容并拖动时，浏览器会自动去搜索引擎中搜索该内容*  但是这个行为的出现会导致拖拽功能出现异常，这一行为是浏览器的默认行为* 如果不希望发生该行为，则可以在onmousedown事件中取消默认行为* * 但是这个方法对IE8不起作用*/return false;};}</script></head><body>我是一段文字<div id="box1"></div><div id="box2"></div><img id="img1" style="position: absolute;" src="img/an.jpg"/></body></html>

onmousemove是鼠标滚轮滚动事件，但是火狐不支持。火狐中需要使用DOMMouseScroll来绑定滚动事件，该事件需要通过addEventListener()函数来绑定
–event.wheelDelta可以获取鼠标滚轮滚动的方向，向下是正，向上是负（火狐不支持）
–event.detail在火狐中获取滚动方向。向上滚是-3,向下滚是在这里插入代码片+3

<html>
<head><meta charset="UTF-8"/><title>鼠标滚轮事件</title><script type="text/javascript">window.onload = function(){var box1 = document.getElementById("box1");box1.onmousewheel = function(event){event = event||window.event;var top = event.clientY;if(event.wheelDelta >0 || event.detail <0){console.log("向上滚动" + event.wheelDelta);box1.style.height = box1.clientHeight -event.clientY +"px";}else {console.log("向下滚动" + event.wheelDelta);box1.style.height = box1.clientHeight +event.clientY +"px";}//当滚轮滚动时，如果浏览器由滚动条，则滚动条也会随着动，这是默认行为，如果不希望，则可取消//使用addEventListener()方法绑定相应函数时，取消默认行为不能使用return false，需要使用event.preventDefault()return false;}}</script><style type="text/css">#box1{height:100px;width:100px; background-color:#FF0000;}</style>
</head>
<body style="height:2000px"><div id="box1"></div>
</body>
</html>

键盘事件
键盘事件一般绑定给一些可以获取焦点的对象或document。
–onkeydown 按键被按下，如果一直按着某个键不松手，事件会一直触发。当被连续触发时，第一次和第二次之间会间隔微长一点，其他会非常快，为了防止误操作。
如果取消了默认行为，则输入的内容不会出现在文本框中。
–onkeyup 按键被松开
可以通过event.keycode来获取按键的编码，
–altKey判断alt是否被按下
–ctrlKey
–shiftKey

<html><head><meta charset="UTF-8"/><script type="text/javascript">window.onload = function(){var box1 = document.getElementById("box1");document.onkeydown = function(event){event = event || window.event;var speed = 5;if(event.ctrlKey){speed = 100;}if(event.keyCode===37){console.log("左移");box1.style.left = box1.offsetLeft - speed +"px";}else if(event.keyCode===38){box1.style.top = box1.offsetTop - speed +"px";console.log("上移");}else if(event.keyCode===39){box1.style.left = box1.offsetLeft + speed +"px";console.log("右移");}else if(event.keyCode===40){console.log("下移");box1.style.top = box1.offsetTop + speed +"px";}}}</script><style type="text/css">#box1{height:100px;width:100px;background-color:red;left:200px;top:200px;position:absolute;}</style></head><body><div id="box1"></div></body>
</html>

54.BOM
BOM–浏览器对象模型，提供了一组对象，同来完成对浏览器的操作
BOM对象：
–Window：整个浏览器的窗口，同时也是网页中的全局对象
–Navigator：代表当前浏览器的信息，通过该对象可以识别不同的浏览器
–Location：当前浏览器地址栏信息，可以获取地址栏信息，或者操作浏览器跳转页面
–History：浏览器的历史记录，可以操作浏览器的历史记录，由于隐私的原因，不能获取具体的历史记录，只能操作浏览器向前向后翻页，而且该操作只在当次访问有效。
–Screen：用户的屏幕信息，可以获取用户的显示器相关信息。
其余几个BOM对象都是作为window对象的属性保存的，可以通过window对象使用，也可以直接使用。

Navigator
由于历史原因，Navigator对象中的大部分属性已经不能帮助我们识别浏览器了
一般会使用userAgent来判断浏览器的信息
–userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent。但是在IE11中已经将微软和IE相关的标识都已经去除了，所以基本已经不能通过userAgent来识别一个浏览器是否是IE了。
还可以通过浏览器中特有的一些对象，来判断浏览器信息。比如：ActiveXObject

<html><head><meta charset="UTF-8"/><title>BOM</title><script type="text/javascript">window.onload= function(){console.log(navigator.userAgent);}</script><style type="text/css"></style><head><body></body>
</html>

div移动不要明白，这段由于断网的缘故缺失。
延时调用
setTimeout()间隔一段时间后再执行，并且只执行一次

<html><head><meta charset="UTF-8"/><title>延时调用</title><script type="text/javascript">var num=1;//定时调用//setInterval(function(){//  console.log(num++);//},1000)//延时调用setTimeout(function(){console.log(num++);},1000)</script><style type="text/css"></style></head><body></body>
</html>

定时器的应用（一）

<html><head><title></title><meta charset="UTF-8"/><style>* {margin:0;padding:0;}#box1 {width:100px;height:100px;background-color:red;position:absolute;left:0px;}#box2 {width:100px;height:100px;background-color:yellow;position:absolute;left:0px;top:200px;}</style><script type="text/javascript">window.onload = function(){var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");var btn01 = document.getElementById("btn01");var btn02 = document.getElementById("btn02");var btn03 = document.getElementById("btn03");//var timer;不能设置全局timer，否则会错误的关闭timerbtn01.onclick = function(){move(box1,800,20);}move(btn02,0,10);btn02.onclick = function(){move(box1,0,10);}btn03.onclick = function(){move(box2,800,10);}//移动函数function move(obj,value,speed){clearInterval(obj.timer);//console.log("执行只一次的关闭定时器");//获取元素目前位置var oldValue = parseInt(getStyle(obj,"left"));console.log(oldValue);if(oldValue>value){speed = -speed;console.log(speed);}obj.timer = setInterval(function(){//获取元素目前位置var oldValue = parseInt(getStyle(obj,"left"));//增加var newValue = oldValue + speed;if(speed<0){if(newValue < value){newValue = value}}else {if(newValue > value){newValue = value}}//将新值设置给box1obj.style.left = newValue + "px";if(newValue ===value){clearInterval(obj.timer);console.log("条件满足时终止的关闭定时器");}},30);}//获取元素位置函数function getStyle(obj,name){if(window.getComputedStyle){return getComputedStyle(obj, null)[name];}else {return obj.currentStyle[name];}}}</script></head><body><button id="btn01">点击按钮以后box1向右移动</button><button id="btn02">点击按钮以后box1向左移动</button><button id="btn03">点击按钮以后box2向右移动</button><div id="box1"></div><div id="box2"></div><div style="width: 0px; height: 1000px; border-left:1px black solid; position:absolute; left: 800px; top:0px"></div></body>
</html>

定时器的应用（二）

<html><head><title></title><meta charset="UTF-8"/><style>* {margin:0;padding:0;}#box1 {width:100px;height:100px;background-color:red;position:absolute;left:0px;}#box2 {width:100px;height:100px;background-color:yellow;position:absolute;left:0px;top:200px;}</style><script type="text/javascript">window.onload = function(){var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");var btn01 = document.getElementById("btn01");var btn02 = document.getElementById("btn02");var btn03 = document.getElementById("btn03");var btn04 = document.getElementById("btn04");//var timer;不能设置全局timer，否则会错误的关闭timerbtn01.onclick = function(){move(box1,800,20,"left");}move(btn02,0,10);btn02.onclick = function(){move(box1,0,10,"left");}btn03.onclick = function(){move(box2,800,10,"left");}btn04.onclick = function(){move(box2,800,10,"top",function(){move(box1,800,20,"top");});}//移动函数function move(obj,value,speed,attr,callback){clearInterval(obj.timer);//console.log("执行只一次的关闭定时器");//获取元素目前位置var oldValue = parseInt(getStyle(obj,attr));console.log(oldValue);if(oldValue>value){speed = -speed;console.log(speed);}obj.timer = setInterval(function(){//获取元素目前位置var oldValue = parseInt(getStyle(obj,attr));//增加var newValue = oldValue + speed;if(speed<0){if(newValue < value){newValue = value}}else {if(newValue > value){newValue = value}}//将新值设置给box1obj.style[attr] = newValue + "px";if(newValue ===value){clearInterval(obj.timer);callback && callback();console.log("条件满足时终止的关闭定时器");}},30);}//获取元素位置函数function getStyle(obj,name){if(window.getComputedStyle){return getComputedStyle(obj, null)[name];}else {return obj.currentStyle[name];}}}</script></head><body><button id="btn01">点击按钮以后box1向右移动</button><button id="btn02">点击按钮以后box1向左移动</button><button id="btn03">点击按钮以后box2向右移动</button><button id="btn04">回调函数测试</button><div id="box1"></div><div id="box2"></div><div style="width: 0px; height: 1000px; border-left:1px black solid; position:absolute; left: 800px; top:0px"></div></body>
</html>

完成轮播图界面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>轮播图</title><style>* {margin: 0;padding: 0;}#outer {width: 520px;height: 400px;margin: 0 auto;background-color: yellowgreen;padding: 10px 0;position: relative;overflow: hidden;}#imgList {list-style: none;/*width: 3500px;*/position: absolute;left:-520px;}#imgList li {display: inline-block;/*float:left;*/margin: 0px 10px;}img {width:500px;height: 400px;}#navDiv {position: absolute;bottom: 15px;/*left: 197px;*/}#navDiv a{float: left;width: 15px;height: 15px;background-color: red;margin: 0px 5px;opacity: 0.5;}#navDiv a:hover{}</style><script type="text/javascript">window.onload = function(){var index =0;var timer;var imgList = document.getElementById("imgList");var imgArr = document.getElementsByTagName("img");// 设置Div的宽度imgList.style.width = 520*(imgArr.length+1) + "px";// 设置导航按钮居中var imgDiv = document.getElementById("imgDiv");var outer = document.getElementById("outer");navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";var allA = document.getElementsByTagName("a");autoChange();for(var i=0;i<allA.length;i++){allA[i].num = i;allA[i].onclick = function(){clearInterval(timer);index = this.num;console.log(index);move(imgList,-520*index,10,"left",function(){//手动切换结束以后再开启定时器autoChange();});setA();}}// 设置导航按钮高亮function setA(){if(index>=imgArr.length-1){index=0;//通过CSS将最后一张切换成第一张imgList.style.left = 0;}for(var i=0;i<allA.length;i++){allA[i].style.backgroundColor = "";}allA[index].style.backgroundColor = "black";}// 移动函数// obj:执行对象// value:改变的值// speed:改变速度// attr:改变方向// callback:回调函数function move(obj,value,speed,attr,callback){clearInterval(obj.timer);//console.log("执行只一次的关闭定时器");//获取元素目前位置var oldValue = parseInt(getStyle(obj,attr));console.log(oldValue);if(oldValue>value){speed = -speed;console.log(speed);}obj.timer = setInterval(function(){//获取元素目前位置var oldValue = parseInt(getStyle(obj,attr));//增加var newValue = oldValue + speed;if(speed<0){if(newValue < value){newValue = value}}else {if(newValue > value){newValue = value}}//将新值设置给box1obj.style[attr] = newValue + "px";if(newValue ===value){clearInterval(obj.timer);callback && callback();console.log("条件满足时终止的关闭定时器");}},30);}//获取元素位置函数function getStyle(obj,name){if(window.getComputedStyle){return getComputedStyle(obj, null)[name];}else {return obj.currentStyle[name];}}//创建一个函数，用来开启自动切换function autoChange(){timer = setInterval(function(){index++;index %= imgArr.length;move(imgList,-520*index,10,"left",function(){});setA();},3000);}
}</script>
</head>
<body><div id="outer"><ul id="imgList"><li><img src="1.jpg" alt=""></li><li><img src="2.jpg" alt=""></li><li><img src="3.jpg" alt=""></li><li><img src="4.jpg" alt=""></li><li><img src="5.jpg" alt=""></li><li><img src="6.jpg" alt=""></li><li><img src="1.jpg" alt=""></li></ul><div id="navDiv"><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div></div></body>
</html>

这个代码有bug
61. 类的操作
例子：点击按钮切换box样式

每用style属性修改一次样式，就需要重新渲染一次页面，这样的执行的性能是比较差的。当修改多个样式时也不方便。

二级菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>二级菜单</title><style>* {padding: 0px;margin:0px; list-style-type:none; }a {border: 0px;text-decoration: none;}body {font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}div.sdmenu {width: 150px;margin:0 auto;font-family: Arial, sans-serif;font-size: 12px;padding-bottom: 10px;background: url(1.jpg) no-repeat right bottom;color: #fff; }div .sdmenu div {background: url(2.jpg) repeat-x;overflow: hidden; }div .sdmenu div:first-child {background: url(3.jpg) no-repeat; }div.sdmenu div.collapsed {height: 25px;}div .sdmenu div span {display: block;height: 15px;line-height: 15px;overflow: hidden;padding: 5px 25px;font-weight: bold;color: white;background: url(3.jpg) no-repeat 10px center;cursor:pointer;border-bottom: 1px solid #ddd;  }</style><script type="text/javascript">window.onload = function(){//获取所有class属性为menuSpan的元素var menuSpan = document.querySelectorAll(".menuSpan");//定义一个变量，来保存当前打开的菜单var openDiv = menuSpan[0].parentNode;console.log(menuSpan.length);for(var i=0;i<menuSpan.length;i++){menuSpan[i].onclick = function(){//获取当前span的父元素var parentDiv = this.parentNode;//切换菜单的显示和状态toggleMenu(parentDiv);// //判断openDiv和parentDiv是否相同// if(openDiv != parentDiv){//  //打开新的菜单以后，应该关闭之前的菜单//   addClass(openDiv , "collapsed");// }//判断openDiv和parentDiv是否相同if(openDiv != parentDiv && !hasClass(openDiv , "collapsed")){//打开新的菜单以后，应该关闭之前的菜单//为了可以同意处理动画效果，希望在addClass改为toggleClasstoggleClass(openDiv , "collapsed");//切换菜单的显示和状态toggleMenu(openDiv);}//修改openDiv为当前打开的菜单openDiv = parentDiv;} }function toggleMenu(obj){//在切换类之前，获取元素的高度var begin = obj.offsetHeight;//关闭parentDivtoggleClass(obj , "collapsed");//在切换类之后获取一个高度var end = obj.offsetHeight;//动画效果就是将高度从begin到end过度//将元素的高度重置为beginobj.style.height = begin + "px";//执行动画move(obj,"height",end, 10,function(){//动画执行完毕，删除内联样式obj.style.height="";});}//切换菜单折叠和显示function toggleMenu(obj){//在切换类之前，获取元素的高度var begin = obj.offsetHeight;}}</script>
</head>
<body><div id="my_memu" class="sdmenu"><div ><span clss="memuSpan">在线工具</span><a href="#">图像优化</a><a href="#">收藏夹图标生成器</a><a href="#">邮件</a><a href="#">htaccess密码</a><a href="#">梯度图像</a><a href="#">按钮生成器</a></div><div class="collapsed"><span class="menuSpan">支持我们</span><a href="#">推荐我们</a><a href="#">链接我们</a><a href="#">网络资源</a></div><div class="collapsed"><span class="menuSpan">合作伙伴</span><a href="#">Javascript工具包</a><a href="#">CSS驱动</a><a href="#">CodingForums</a><a href="#">CSS例子</a></div><div class="collapsed"><span class="menuSpan">测试电流</span><a href="#">Current or not</a><a href="#">Current or not</a><a href="#">Current or not</a></div></div>
</body>
</html>

json（Javascript Object Notation）
json就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别。并且可以转换为任意语言中的对象。
在开发中，主要用来数据的交互。
JSON和JS对象格式一样，只不过JSON字符串中的属性名必须加双引号。其他的和JS语法一致。
JSON分类：（1）对象{}（2）数组[]
JSON允许的值：（1）字符串（2）数值（3）布尔值（4）null(5)对象（6）数组
将json字符串转换为JS中的对象
在JS中，为我们提供了一个工具类，就叫JSON
这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON。

注：JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中使用会报错。