javscricpt基础

最新推荐文章于 2024-11-15 14:43:03 发布

置顶呆毛～

最新推荐文章于 2024-11-15 14:43:03 发布

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/sinat_41712862/article/details/88168651

前端专栏收录该内容

3 篇文章

订阅专栏

这篇博客详细介绍了JavaScript的基础知识，包括数据类型、对象、函数、作用域、this的用法、对象字面量、原型对象、垃圾回收机制、数组操作、正则表达式以及DOM操作。此外，还讨论了事件处理、DOM查询、DOM增删改、事件冒泡和事件委托，以及BOM对象的相关概念。最后，提到了JSON数据格式和转换。内容深入浅出，适合JavaScript初学者和需要巩固基础知识的开发者阅读。

基本数据类型：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();//会显示undefied
 var 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);//undefined
                var 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检查对象中是否含有某个属性，如果对象中没有但是原型中有，也会true
			console.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();//3
			s.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或aec
			reg = /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]);//undefied
						console.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 - 元素.offsetTop
					var 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 - offsetLeft
					var 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.当鼠标松开时，元素固定在当前位置，拖拽结束	onmouseup
					document.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，否则会错误的关闭timer
				btn01.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
						}
						}
						//将新值设置给box1
						obj.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，否则会错误的关闭timer
				btn01.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
						}
						}
						//将新值设置给box1
						obj.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
						}
						}
						//将新值设置给box1
						obj.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改为toggleClass
						toggleClass(openDiv , "collapsed");
						//切换菜单的显示和状态
						toggleMenu(openDiv);

					}
					
					//修改openDiv为当前打开的菜单
					openDiv = parentDiv;


				}	
			}

			function toggleMenu(obj){
				//在切换类之前，获取元素的高度
					var begin = obj.offsetHeight;

					//关闭parentDiv
					toggleClass(obj , "collapsed");



					//在切换类之后获取一个高度
					var end = obj.offsetHeight;
					//动画效果就是将高度从begin到end过度
					//将元素的高度重置为begin
					obj.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及以下的浏览器中不支持，所以在这些浏览器中使用会报错。