JS基础1

			alert("hello");
			document.write("hello");
			console.log("hello"); //该语句用来在控制台输出一个日志
			a = a.toString();
			a = String(a);
			console.log(typeof a);
			//调用Number()函数来将a转换为Number类型
			a = Number(a);
			a = parseInt(a);
			 parseFloat()作用和parseInt()类似，不同的是它可以获得有效的小数
			 

进制

/*
			 * 在js中，如果需要表示16进制的数字，则需要以0x开头
			 * 			如果需要表示8进制的数字，则需要以0开头
			 * 			如果要要表示2进制的数字，则需要以0b开头
			 * 				但是不是所有的浏览器都支持
			 * 	
			 */
			
			//十六进制
			a = 0x10;
			a = 0xff;
			a = 0xCafe;
			
			//八进制数字
			a = 070;
			
			//二进制数字
			//a = 0b10;
			
			//向"070"这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析
			a = "070";
			
			//可以在parseInt()中传递一个第二个参数，来指定数字的进制
			a = parseInt(a,10);
			
			//调用Boolean()函数来将a转换为布尔值
			a = Boolean(a);
			var a = 123; //true
			a = -123; //true
			a = 0; //false
			a = Infinity; //true
			a = NaN; //false
			a = null; //false
			a = undefined; //false

			

三元运算符

/*
			 * 条件运算符也叫三元运算符
			 * 	语法：
			 * 		条件表达式?语句1:语句2;
			 * 	- 执行的流程：
			 * 		条件运算符在执行时，首先对条件表达式进行求值，
			 * 			如果该值为true，则执行语句1，并返回执行结果
			 * 			如果该值为false，则执行语句2，并返回执行结果
			 * 		如果条件的表达式的求值结果是一个非布尔值，
			 * 			会将其转换为布尔值然后在运算
			 */
			
			//false?alert("语句1"):alert("语句2");
			
			var a = 300;
			var b = 143;
			var c = 50;
			
			//a > b ? alert("a大"):alert("b大");
			
			//获取a和b中的最大值
			//var max = a > b ? a : b;
			//获取a b c 中的大值
			//max = max > c ? max : c;
			
			//这种写法不推荐使用，不方便阅读
			var max = a > b ? (a > c ? a :c) : (b > c ? b : c);
			
			//console.log("max = "+max);
			
			//"hello"?alert("语句1"):alert("语句2");
			

对象

	var obj =new Object();
	obj.name="孙悟空";
	delete obj.name;
			/*
			 * 如果要使用特殊的属性名，不能采用.的方式来操作
			 * 	需要使用另一种方式：
			 * 		语法：对象["属性名"] = 属性值
			 * 	读取时也需要采用这种方式
			 * 
			 * 使用[]这种形式去操作属性，更加的灵活，
			 * 	在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性
			 * 
			 */
			obj["123"] = 789;
			obj["nihao"] = "你好";
			var n = "nihao";
			//console.log(obj[n]);

		//创建一个对象
			var obj2 = new Object();
			obj2.name = "猪八戒";
			
			//将obj2设置为obj的属性
			obj.test = obj2;
			
			//console.log(obj.test.name);
			
			/*
			 * in 运算符
			 * 	- 通过该运算符可以检查一个对象中是否含有指定的属性
			 * 		如果有则返回true，没有则返回false
			 *  - 语法：
			 * 		"属性名" in 对象
			 */
			//console.log(obj.test2);
			
			//检查obj中是否含有test2属性
			//console.log("test2" in obj);
			//console.log("test" in obj);
			console.log("name" in obj);

对象字面量

var obj={};
var obj2={name:"猪八戒"};
var obj2 = {
				
				name:"猪八戒",
				age:13,
				gender:"男",
				test:{name:"沙僧"}
				
			};

JS基本数据类型和引用数据类型

	/*
			 * 基本数据类型
			 * 	String Number Boolean Null Undefined
			 * 
			 * 引用数据类型
			 * 	Object
			 * 
			 * JS中的变量都是保存到栈内存中的，
			 * 		基本数据类型的值直接在栈内存中存储，
			 * 		值与值之间是独立存在，修改一个变量不会影响其他的变量
			 * 
			 * 		对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，
			 * 		而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，
			 * 		当一个通过一个变量修改属性时，另一个也会受到影响
			 */
			
			var a = 123;
			var b = a;
			a++;
			
			/*console.log("a = "+a);
			console.log("b = "+b);*/
			
			var obj = new Object();
			obj.name = "孙悟空";
			
			var obj2 = obj;
			
			//修改obj的name属性
			obj.name = "猪八戒";
			
			
			
			/*console.log(obj.name);
			console.log(obj2.name);*/
			
			//设置obj2为null
			obj2 = null;
			
			/*console.log(obj);
			console.log(obj2);*/
			
			var c = 10;
			var d = 10;
			//console.log(c == d);
			
			var obj3 = new Object();
			var obj4 = new Object();
			obj3.name = "沙和尚";
			obj4.name = "沙和尚";
			
			/*console.log(obj3);
			console.log(obj4);*/
			
			/*
			 * 当比较两个基本数据类型的值时，就是比较值。
			 * 而比较两个引用数据类型时，它是比较的对象的内存地址，
			 * 		如果两个对象是一摸一样的，但是地址不同，它也会返回false
			 */
			console.log(obj3 == obj4);
			

三种函数写法

	/*
			 * 函数 function
			 * 	- 函数也是一个对象
			 * 	- 函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）
			 * 	- 函数中可以保存一些代码在需要的时候调用
			 * 	- 使用typeof检查一个函数对象时，会返回function
			 */
			
			//我们在实际开发中很少使用构造函数来创建一个函数对象
			//创建一个函数对象
			//可以将要封装的代码以字符串的形式传递给构造函数
			//var fun = new Function("console.log('Hello 这是我的第一个函数');");
			
			//封装到函数中的代码不会立即执行
			//函数中的代码会在函数调用的时候执行
			//调用函数 语法：函数对象()
			//当调用函数时，函数中封装的代码会按照顺序执行
			//fun();
			
			/*
			 * 使用 函数声明 来创建一个函数
			 * 	语法：
			 * 		function 函数名([形参1,形参2...形参N]){
			 * 			语句...
			 * 		}
			 */
			 
function sum(a , b , c){
				//alert(a + b +c);
				
				var d = a + b + c;
				
				return d;
				
				//return undefined;
				
			}
			/*
			 * 使用 函数表达式 来创建一个函数
			 * var 函数名  = function([形参1,形参2...形参N]){
			 * 	 语句....
			 *  }
			 */
			
			var fun3 = function(){
				console.log("我是匿名函数中封装的代码");
			};
			

			
			//函数对象()
			/*
			 * 立即执行函数
			 * 	函数定义完，立即被调用，这种函数叫做立即执行函数
			 * 	立即执行函数往往只会执行一次
			 */
			/*(function(){
				alert("我是一个匿名函数~~~");
			})();*/
			
			(function(a,b){
				console.log("a = "+a);
				console.log("b = "+b);
			})(123,456);

方法（对象的函数）

枚举对象的属性

			var obj = {
						name:"孙悟空",
						age:18,
						gender:"男",
						address:"花果山"
					 };
					 
			//枚举对象中的属性
			//使用for ... in 语句
			/*
			 * 语法：
			 * 	for(var 变量 in 对象){
			 * 	
			 *  }
			 * 
			 * for...in语句 对象中有几个属性，循环体就会执行几次
			 * 	每次执行时，会将对象中的一个属性的名字赋值给变量
			 */
			
			for(var n in obj){
				console.log("属性名:"+n);
				
				console.log("属性值:"+obj[n]);
			}
			

使用工厂方法创建对象

	/*
			 * 使用工厂方法创建对象
			 * 	通过该方法可以大批量的创建对象
			 */
			function createPerson(name , age ,gender){
				//创建一个新的对象 
				var obj = new Object();
				//向对象中添加属性
				obj.name = name;
				obj.age = age;
				obj.gender = gender;
				obj.sayName = function(){
					alert(this.name);
				};
				//将新的对象返回
				return obj;
			}
			
			
			
			var obj2 = createPerson("猪八戒",28,"男");
			var obj3 = createPerson("白骨精",16,"女");
			var obj4 = createPerson("蜘蛛精",18,"女");


			/*
			 * 用来创建狗的对象
			 */
			function createDog(name , age){
				var obj = new Object();
				obj.name = name;
				obj.age = age;
				obj.sayHello = function(){
					alert("汪汪~~");
				};
				
				return obj;
			}

			//创建一个狗的对象
			var dog = createDog("旺财",3);
			
			console.log(dog);
			console.log(obj4);
			
			/*
			 * 使用工厂方法创建的对象，使用的构造函数都是Object
			 * 	所以创建的对象都是Object这个类型，
			 * 	就导致我们无法区分出多种不同类型的对象
			 */
			 

构造函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			/*
			 * 创建一个构造函数，专门用来创建Person对象的
			 * 	构造函数就是一个普通的函数，创建方式和普通函数没有区别,
			 * 	不同的是构造函数习惯上首字母大写
			 * 
			 * 构造函数和普通函数的区别就是调用方式的不同
			 * 	普通函数是直接调用，而构造函数需要使用new关键字来调用
			 * 
			 * 构造函数的执行流程：
			 * 	1.立刻创建一个新的对象
			 * 	2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
			 * 	3.逐行执行函数中的代码
			 * 	4.将新建的对象作为返回值返回
			 * 
			 * 使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。
			 * 	我们将通过一个构造函数创建的对象，称为是该类的实例
			 * 
			 * this的情况：
			 * 	1.当以函数的形式调用时，this是window
			 * 	2.当以方法的形式调用时，谁调用方法this就是谁
			 * 	3.当以构造函数的形式调用时，this就是新创建的那个对象
			 * 
			 */
			function Person(name , age , gender){
				this.name = name;
				this.age = age;
				this.gender = gender;
				this.sayName = function(){
					alert(this.name);
				};
			}
			
			function Dog(){
				
			}
			
			var per = new Person("孙悟空",18,"男");
			var per2 = new Person("玉兔精",16,"女");
			var per3 = new Person("奔波霸",38,"男");
			
			var dog = new Dog();
			
			/*console.log(per);
			console.log(dog);*/
			
			/*
			 * 使用instanceof可以检查一个对象是否是一个类的实例
			 * 	语法：
			 * 		对象 instanceof 构造函数
			 * 如果是，则返回true，否则返回false
			 */
			//console.log(per instanceof Person);
			//console.log(dog instanceof Person);
			
			/*
			 * 所有的对象都是Object的后代，
			 * 	所以任何对象和Object左instanceof检查时都会返回true
			 */
			//console.log(dog instanceof Object);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 创建一个Person构造函数
			 * 	- 在Person构造函数中，为每一个对象都添加了一个sayName方法，
			 * 		目前我们的方法是在构造函数内部创建的，
			 * 			也就是构造函数每执行一次就会创建一个新的sayName方法
			 * 		也是所有实例的sayName都是唯一的。
			 * 		这样就导致了构造函数执行一次就会创建一个新的方法，
			 * 			执行10000次就会创建10000个新的方法，而10000个方法都是一摸一样的
			 * 			这是完全没有必要，完全可以使所有的对象共享同一个方法
			 */
			function Person(name , age , gender){
				this.name = name;
				this.age = age;
				this.gender = gender;
				//向对象中添加一个方法
				//this.sayName = fun;
			}
			
			//将sayName方法在全局作用域中定义
			/*
			 * 将函数定义在全局作用域，污染了全局作用域的命名空间
			 * 	而且定义在全局作用域中也很不安全
			 */
			/*function fun(){
				alert("Hello大家好，我是:"+this.name);
			};*/
			//向原型中添加sayName方法
			Person.prototype.sayName = function(){
				alert("Hello大家好，我是:"+this.name);
			};
			
			//创建一个Person的实例
			var per = new Person("孙悟空",18,"男");
			var per2 = new Person("猪八戒",28,"男");
			per.sayName();
			per2.sayName();
			
			//console.log(per.sayName == per2.sayName);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

原型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 原型 prototype
			 * 
			 * 	我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
			 * 		这个属性对应着一个对象，这个对象就是我们所谓的原型对象
			 * 	如果函数作为普通函数调用prototype没有任何作用
			 * 	当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，
			 * 		指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
			 * 
			 * 	原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，
			 * 		我们可以将对象中共有的内容，统一设置到原型对象中。
			 * 
			 * 当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，
			 * 	如果没有则会去原型对象中寻找，如果找到则直接使用
			 * 
			 * 以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，
			 * 	这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了
			 */
			
			function MyClass(){
				
			}
			
			//向MyClass的原型中添加属性a
			MyClass.prototype.a = 123;
			
			//向MyClass的原型中添加一个方法
			MyClass.prototype.sayHello = function(){
				alert("hello");
			};
			
			var mc = new MyClass();
			
			var mc2 = new MyClass();
			
			//console.log(MyClass.prototype);
			//console.log(mc2.__proto__ == MyClass.prototype);
			
			//向mc中添加a属性
			mc.a = "我是mc中的a";
			
			//console.log(mc2.a);
			
			mc.sayHello();
			
			
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 创建一个构造函数
			 */
			function MyClass(){
				
			}
			
			//向MyClass的原型中添加一个name属性
			MyClass.prototype.name = "我是原型中的名字";
			
			var mc = new MyClass();
			mc.age = 18;
			
			//console.log(mc.name);
			
			//使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true
			//console.log("name" in mc);
			
			//可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
			//使用该方法只有当对象自身中含有属性时，才会返回true
			//console.log(mc.hasOwnProperty("age"));
			
			//console.log(mc.hasOwnProperty("hasOwnProperty"));
			
			/*
			 * 原型对象也是对象，所以它也有原型，
			 * 	当我们使用一个对象的属性或方法时，会现在自身中寻找，
			 * 		自身中如果有，则直接使用，
			 * 		如果没有则去原型对象中寻找，如果原型对象中有，则使用，
			 * 		如果没有则去原型的原型中寻找,直到找到Object对象的原型，
			 * 		Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined
			 */
			
			//console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));
			
			//console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));
			
			//console.log(mc.__proto__.__proto__.__proto__);
			
			//console.log(mc.hello);
			
			//console.log(mc.__proto__.__proto__.__proto__)
			
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			function Person(name , age , gender){
				this.name = name;
				this.age = age;
				this.gender = gender;
			}
			
			//修改Person原型的toString
			Person.prototype.toString = function(){
				return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
			};
			
			
			//创建一个Person实例
			var per = new Person("孙悟空",18,"男");
			var per2 = new Person("猪八戒",28,"男");
			
			//当我们直接在页面中打印一个对象时，事件上是输出的对象的toString()方法的返回值
			//如果我们希望在输出对象时不输出[object Object]，可以为对象添加一个toString()方法
			//Person[name=孙悟空,age=18,gender=男]
			/*per.toString = function(){
				return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
			};*/
			
			var result = per.toString();
			//console.log("result = " + result);
			//console.log(per.__proto__.__proto__.hasOwnProperty("toString"));
			console.log(per2);
			console.log(per);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

作用域

/*
			 * 作用域
			 * 	- 作用域指一个变量的作用的范围
			 * 	- 在JS中一共有两种作用域：
			 * 		1.全局作用域
			 * 			- 直接编写在script标签中的JS代码，都在全局作用域
			 * 			- 全局作用域在页面打开时创建，在页面关闭时销毁
			 * 			- 在全局作用域中有一个全局对象window，
			 * 				它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用
			 * 			- 在全局作用域中：
			 * 				创建的变量都会作为window对象的属性保存
			 * 				创建的函数都会作为window对象的方法保存
			 * 			- 全局作用域中的变量都是全局变量，
			 * 				在页面的任意的部分都可以访问的到
			 * 
			 * 		2.函数作用域
			 * 
			 */
			var c = "hello";
			
			console.log(window.c);
			
			function fun(){
				console.log("我是fun函数");
			}
			
			window.fun();

函数作用域

	/*
			 * 变量的声明提前
			 * 	- 使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值），
			 * 		但是如果声明变量时不适用var关键字，则变量不会被声明提前
			 * 
			 * 函数的声明提前
			 * 	- 使用函数声明形式创建的函数 function 函数(){}
			 * 		它会在所有的代码执行之前就被创建，所以我们可以在函数声明前来调用函数
			 * 	   使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用	
			 */
			/*console.log("a = "+a);
			
			var a = 123;*/
			
			//fun();
			
			
			//函数声明，会被提前创建
			function fun(){
				console.log("我是一个fun函数");
			}
			
			//函数表达式，不会被提前创建
			var fun2 = function(){
				console.log("我是fun2函数");
			};
			
			fun2();
			

this

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			/*
			 * 解析器在调用函数每次都会向函数内部传递进一个隐含的参数,
			 * 	这个隐含的参数就是this，this指向的是一个对象，
			 * 	这个对象我们称为函数执行的 上下文对象，
			 * 	根据函数的调用方式的不同，this会指向不同的对象
			 * 		1.以函数的形式调用时，this永远都是window
			 * 		2.以方法的形式调用时，this就是调用方法的那个对象
			 */
			
			function fun(){
				//console.log("a = "+a+", b = "+b);
				console.log(this.name);
			}
			
			//fun();
			
			//创建一个对象
			var obj = {
				name:"孙悟空",
				sayName:fun
			};
			
			var obj2 = {
				name:"沙和尚",
				sayName:fun
			};
			
			//console.log(obj.sayName == fun);
			var name = "全局的name属性";
			//obj.sayName();
			//以函数形式调用，this是window
			//fun();
			
			//以方法的形式调用，this是调用方法的对象
			//obj.sayName();
			obj2.sayName();
			
		</script>
	</head>
	<body>
	</body>
</html>

为什么要用this

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//创建一个name变量
			var name = "全局";
			
			//创建一个fun()函数
			function fun(){
				console.log(this.name);
				//console.log(name);
			}
			
			//创建两个对象
			var obj = {
					name:"孙悟空",
					sayName:fun
			};
			
			var obj2 = {
					name:"沙和尚",
					sayName:fun
			};
			
			//我们希望调用obj.sayName()时可以输出obj的名字
			//obj.sayName(); 输出全局 没有使用this时候
			
			obj.sayName(); 
			obj2.sayName();
			
		
			
		</script>
	</head>
	<body>
	</body>
</html>

垃圾回收

/
			 *  - 当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，
			 * 		此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，
			 * 		所以这种垃圾必须进行清理。
			 * 	- 在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，
			 * 		我们不需要也不能进行垃圾回收的操作
			 * 	- 我们需要做的只是要将不再使用的对象设置null即可
			 * 
			 */
			var obj = new Object();
			
			//对对象进行各种操作。。。。
			
			
			obj = null;
			

数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 内建对象
			 * 宿主对象
			 * 自定义对象
			 * 
			 * 数组（Array）
			 * 	- 数组也是一个对象
			 * 	- 它和我们普通对象功能类似，也是用来存储一些值的
			 * 	- 不同的是普通对象是使用字符串作为属性名的，
			 * 		而数组时使用数字来作为索引操作元素
			 * 	- 索引：
			 * 		从0开始的整数就是索引
			 * 	- 数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据
			 */
			
			//创建数组对象
			var arr = new Array();
			
			//使用typeof检查一个数组时，会返回object
			//console.log(typeof arr);
			
			/*
			 * 向数组中添加元素
			 * 语法：数组[索引] = 值
			 */
			arr[0] = 10;
			arr[1] = 33;
			arr[2] = 22;
			arr[3] = 44;
			/*arr[10] = 31;
			arr[100] = 90;*/
			
			/*
			 * 读取数组中的元素
			 * 语法：数组[索引]
			 * 	如果读取不存在的索引，他不会报错而是返回undefined
			 */
			
			//console.log(arr[3]);
			
			/*
			 * 获取数组的长度
			 * 可以使用length属性来获取数组的长度(元素的个数)
			 * 	语法：数组.length
			 * 
			 * 对于连续的数组，使用length可以获取到数组的长度（元素的个数）
			 * 对于非连续的数组，使用length会获取到数组的最大的索引+1
			 * 		尽量不要创建非连续的数组
			 */
			/*console.log(arr.length);
			console.log(arr);*/
			
			/*
			 * 修改length
			 * 	如果修改的length大于原长度，则多出部分会空出来
			 *  如果修改的length小于原长度，则多出的元素会被删除
			 */
			//arr.length = 10;
			
			/*arr.length = 2;
			
			console.log(arr.length);
			console.log(arr);*/
			
			arr[4] = 50;
			arr[5] = 60;
			
			//向数组的最后一个位置添加元素
			//语法：数组[数组.length] = 值;
			arr[arr.length] = 70;
			arr[arr.length] = 80;
			arr[arr.length] = 90;
			
			console.log(arr);



			//创建一个数组
			//var arr = new Array();
			
			//使用字面量来创建数组
			//语法:[]
			//var arr = [];
			
			//console.log(typeof arr);
			
			//使用字面量创建数组时，可以在创建时就指定数组中的元素
			var arr = [1,2,3,4,5,10];
			
			//console.log(arr[3]);
			
			//使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作文构造函数的参数传递
			//元素之间使用,隔开
			var arr2 = new Array(10,20,30);
			//console.log(arr2);
			
			//创建一个数组数组中只有一个元素10
			arr = [10];
			
			//创建一个长度为10的数组
			arr2 = new Array(10);
			
			//console.log(arr2.length);
			//数组中的元素可以是任意的数据类型
			arr = ["hello",1,true,null,undefined];
			
			//也可以是对象
			var obj = {name:"孙悟空"};
			arr[arr.length] = obj;
			arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];
			
			//也可以是一个函数
			arr = [function(){alert(1)},function(){alert(2)}];
			
			//console.log(arr);
			//arr[0]();
			
			//数组中也可以放数组，如下这种数组我们称为二维数组
			arr = [[1,2,3],[3,4,5],[5,6,7]];
			console.log(arr[1]);
			
		</script>
	</head>
	<body>
	</body>
</html>

需要的可以查询w3school离线手册

function getAdult(arr){
				//创建一个新的数组
				var newArr = [];
				
				//遍历arr，获取arr中Person对象
				for(var i=0 ; i<arr.length ; i++){
					var p = arr[i];
					//判断Person对象的age是否大于等于18
					if(p.age >= 18){
						//如果大于等于18，则将这个对象添加到newArr中
						//将对象放入到新数组中
						newArr.push(p);
					}
				}
				//将新的数组返回
				return newArr;
				
			}

forEach

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 一般我们都是使用for循环去遍历数组，
			 * 	JS中还为我们提供了一个方法，用来遍历数组
			 * forEach()
			 * 		- 这个方法只支持IE8以上的浏览器
			 * 			IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach
			 * 			还是使用for循环来遍历
			 */
			
			//创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			
			/*
			 * forEach()方法需要一个函数作为参数
			 * 	- 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数
			 * 	- 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素
			 * 		以实参的形式传递进来，我们可以来定义形参，来读取这些内容
			 * 	- 浏览器会在回调函数中传递三个参数：
			 * 		第一个参数，就是当前正在遍历的元素
			 * 		第二个参数，就是当前正在遍历的元素的索引
			 * 		第三个参数，就是正在遍历的数组 
			 * 		
			 */
			arr.forEach(function(value , index , obj){
				console.log(value);
			});
			
			
		</script>
	</head>
	<body>
	</body>
</html>

数组切片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			
			/*
			 * slice()
			 * 	- 可以用来从数组提取指定元素
			 * 	- 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
			 * 	- 参数：
			 * 		1.截取开始的位置的索引,包含开始索引
			 * 		2.截取结束的位置的索引,不包含结束索引
			 * 			- 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
			 * 		- 索引可以传递一个负值，如果传递一个负值，则从后往前计算
			 * 			-1 倒数第一个
			 * 			-2 倒数第二个
			 */
			
			var result = arr.slice(1,4);
			
			result = arr.slice(3);
			
			result = arr.slice(1,-2);
			
			//console.log(result);
			
			/*
			 * splice()
			 * 	- 可以用于删除数组中的指定元素
			 * 	- 使用splice()会影响到原数组，会将指定元素从原数组中删除
			 * 		并将被删除的元素作为返回值返回
			 * 	- 参数：
			 * 		第一个，表示开始位置的索引
			 * 		第二个，表示删除的数量
			 * 		第三个及以后。。
			 * 			可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
			 * 	
			 */
			
			arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			var result = arr.splice(3,0,"牛魔王","铁扇公主","红孩儿");
			
			console.log(arr);
			//console.log(result);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

数字去重

	
			//创建一个数组
			var arr = [1,2,3,2,2,1,3,4,2,5];
			
			//去除数组中重复的数字
			//获取数组中的每一个元素
			for(var i=0 ; i<arr.length ; i++){
				//console.log(arr[i]);
				/*获取当前元素后的所有元素*/
				for(var j=i+1 ; j<arr.length ; j++){
					//console.log("---->"+arr[j]);
					//判断两个元素的值是否相等
					if(arr[i] == arr[j]){
						//如果相等则证明出现了重复的元素，则删除j对应的元素
						arr.splice(j,1);
						//当删除了当前j所在的元素以后，后边的元素会自动补位
						//此时将不会在比较这个元素吧，我需要在比较一次j所在位置的元素
						//使j自减
						j--;
					}
				}
			}

数组concat、join、reverse()、sort

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			
			var arr = ["孙悟空","猪八戒","沙和尚"];
			var arr2 = ["白骨精","玉兔精","蜘蛛精"];
			var arr3 = ["二郎神","太上老君","玉皇大帝"];
			
			/*
			 * concat()可以连接两个或多个数组，并将新的数组返回
			 * 	- 该方法不会对原数组产生影响
			 */
			var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主");
			
			/*
			 * join()
			 * 	- 该方法可以将数组转换为一个字符串
			 * 	- 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
			 * 	- 在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
			 * 		如果不指定连接符，则默认使用,作为连接符
			 */
			arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
			
			result = arr.join("@-@");
			/*
			 * reverse()
			 * 	- 该方法用来反转数组（前边的去后边，后边的去前边）
			 * 	- 该方法会直接修改原数组
			 */
			
			arr.reverse();
			
			//console.log(arr);
			
			arr = ["b","d","e","a","c"];
			
			/*
			 * sort()
			 * 	- 可以用来对数组中的元素进行排序
			 * 	- 也会影响原数组，默认会按照Unicode编码进行排序
			 */
			arr.sort();
			//arr.reverse();
			
			/*
			 * 即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，
			 * 	所以对数字进排序时，可能会得到错误的结果。
			 * 
			 * 我们可以自己来指定排序的规则
			 * 	我们可以在sort()添加一个回调函数，来指定排序规则，
			 * 		回调函数中需要定义两个形参,
			 * 		浏览器将会分别使用数组中的元素作为实参去调用回调函数
			 * 		使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
			 * 	- 浏览器会根据回调函数的返回值来决定元素的顺序，
			 * 		如果返回一个大于0的值，则元素会交换位置
			 * 		如果返回一个小于0的值，则元素位置不变
			 * 		如果返回一个0，则认为两个元素相等，也不交换位置
			 * 
			 * 	- 如果需要升序排列，则返回 a-b
			 * 		如果需要降序排列，则返回b-a
			 */
			arr = [5,4,2,1,3,6,8,7];
			
			arr.sort(function(a,b){
				
				//前边的大
				/*if(a > b){
					return -1;
				}else if(a < b){
					return 1;
				}else{
					return 0;
				}*/
				
				//升序排列
				//return a - b;
				
				//降序排列
				return b - a;
				
			});
			
			console.log(arr);
			
		</script>
	</head>
	<body>
		
	</body>
</html>

函数call和apply

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function fun(a,b) {
				console.log("a = "+a);
				console.log("b = "+b);
				//alert(this);
			}
			
			var obj = {
				name: "obj",
				sayName:function(){
					alert(this.name);
				}
			};

			/*
			 * call()和apply()
			 * 	- 这两个方法都是函数对象的方法，需要通过函数对象来调用
			 * 	- 当对函数调用call()和apply()都会调用函数执行
			 * 	- 在调用call()和apply()可以将一个对象指定为第一个参数
			 * 		此时这个对象将会成为函数执行时的this
			 * 	- call()方法可以将实参在对象之后依次传递
			 * 	- apply()方法需要将实参封装到一个数组中统一传递
			 * 
			 * 	- this的情况：
			 * 		1.以函数形式调用时，this永远都是window
			 * 		2.以方法的形式调用时，this是调用方法的对象
			 * 		3.以构造函数的形式调用时，this是新创建的那个对象
			 * 		4.使用call和apply调用时，this是指定的那个对象
			 */
			
			//fun.call(obj,2,3);
			fun.apply(obj,[2,3]);

			

			var obj2 = {
				name: "obj2"
			};

			/*fun.apply();
			fun.call();
			fun();*/

			//fun.call(obj);
			//fun.apply(obj);

			//fun();
			
			//obj.sayName.apply(obj2);
		</script>
	</head>

	<body>
	</body>

</html>

argument

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 在调用函数时，浏览器每次都会传递进两个隐含的参数：
			 * 	1.函数的上下文对象 this
			 * 	2.封装实参的对象 arguments
			 * 		- arguments是一个类数组对象,它也可以通过索引来操作数据，也可以获取长度
			 * 		- 在调用函数时，我们所传递的实参都会在arguments中保存
			 * 		- arguments.length可以用来获取实参的长度
			 * 		- 我们即使不定义形参，也可以通过arguments来使用实参，
			 * 			只不过比较麻烦
			 * 			arguments[0] 表示第一个实参
			 * 			arguments[1] 表示第二个实参 。。。
			 *		- 它里边有一个属性叫做callee，
			 * 			这个属性对应一个函数对象，就是当前正在指向的函数的对象
			 * 		
			 */
			
			function fun(a,b){
				//console.log(arguments instanceof Array);
				//console.log(Array.isArray(arguments));
				//console.log(arguments[1]);
				//console.log(arguments.length);
				console.log(arguments.callee == fun);
			}
			
			fun("hello",true);
			
		</script>
	</head>
	<body>
	</body>
</html>

Date

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * Date对象
			 * 	- 在JS中使用Date对象来表示一个时间
			 */
			
			//创建一个Date对象
			//如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间
			var d = new Date();
			
			//创建一个指定的时间对象
			//需要在构造函数中传递一个表示时间的字符串作为参数
			//日期的格式  月份/日/年 时:分:秒
			var d2 = new Date("2/18/2011 11:10:30");
			
			/*
			 * getDate()
			 * 	- 获取当前日期对象是几日
			 */
			var date = d2.getDate();
			/*
			 * getDay()
			 * 	- 获取当前日期对象时周几
			 * 	- 会返回一个0-6的值
			 * 		0 表示周日
			 * 		1表示周一
			 * 		。。。
			 */
			var day = d2.getDay();
			
			/*
			 * getMonth()
			 * d2 = new Date("12/18/2011 11:10:30");
			 * - 获取当前时间对象的月份
			 * 	- 会返回一个0-11的值
			 * 		0 表示1月
			 * 		1 表示2月
			 * 		11 表示12月
			 */
			var month = d2.getMonth();
			
			/*
			 * getFullYear()
			 * 	- 获取当前日期对象的年份
			 */
			var year = d2.getFullYear();
			
			//console.log(d2);
			//console.log("date = "+date);
			//console.log("day = "+day);
			//console.log("month = "+month);
			//console.log(year);
			
			/*
			 * getTime()
			 * 	- 获取当前日期对象的时间戳
			 * 	- 时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分0秒
			 * 		到当前日期所花费的毫秒数（1秒 = 1000毫秒）
			 * 	- 计算机底层在保存时间时使用都是时间戳
			 */
			
			var time = d2.getTime();
			
			//console.log(time/1000/60/60/24/365);
			
			/*var d3 = new Date("1/1/1970 0:0:0");
			time = d3.getTime();
			console.log(time);*/
			
			//利用时间戳来测试代码的执行的性能
			//获取当前的时间戳
			var start = Date.now();
			
			for(var i=0 ; i<100 ; i++){
				console.log(i);
			}
			
			var end = Date.now();
			
			
			console.log("执行了："+(end - start)+"毫秒");
			
			
		</script>
	</head>
	<body>
	</body>
</html>

Math

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * Math
			 * 	- Math和其他的对象不同，它不是一个构造函数，
			 * 		它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法
			 * 	- 比如
			 * 		Math.PI 表示的圆周率
			 */
			
			//console.log(Math.PI);
			
			/*
			 * abs()可以用来计算一个数的绝对值
			 */
			//console.log(Math.abs(-1));
			
			/*
			 * Math.ceil()
			 * 	- 可以对一个数进行向上取整，小数位只有有值就自动进1
			 * Math.floor()
			 * 	- 可以对一个数进行向下取整，小数部分会被舍掉
			 * Math.round()
			 * 	- 可以对一个数进行四舍五入取整
			 */
			//console.log(Math.ceil(1.1));
			//console.log(Math.floor(1.99));
			//console.log(Math.round(1.4));
			
			/*
			 * Math.random()
			 * 	- 可以用来生成一个0-1之间的随机数
			 *  - 生成一个0-10的随机数
			 * 	- 生成一个0-x之间的随机数
			 * 		Math.round(Math.random()*x)
			 * 
			 * 	- 生成一个1-10
			 * 	- 生成一个x-y之间的随机数
			 * 		Math.round(Math.random()*(y-x)+x)
			 */
			/*for(var i=0 ; i<100 ; i++){
				//console.log(Math.round(Math.random()*10));
				//console.log(Math.round(Math.random()*20));
				
				//console.log(Math.round(Math.random()*9)+1);
				//console.log(Math.round(Math.random()*8)+2);
				
				//生成1-6之间的随机数
				console.log(Math.round(Math.random()*5+1));
			}*/
			
			/*
			 * max() 可以获取多个数中的最大值
			 * min() 可以获取多个数中的最小值
			 */
			
			var max = Math.max(10,45,30,100);
			var min = Math.min(10,45,30,100);
			//console.log(min);
			
			/*
			 * Math.pow(x,y)
			 * 	返回x的y次幂
			 */
			
			//console.log(Math.pow(12,3));
			
			/*
			 * Math.sqrt()
			 *  用于对一个数进行开方运算
			 */
			console.log(Math.sqrt(2));
			
		</script>
	</head>
	<body>
	</body>
</html>

包装类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 基本数据类型
			 * 	String Number Boolean Null Undefined
			 * 引用数据类型
			 * 	Object
			 * 
			 * 在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象
			 * 	String()
			 * 		- 可以将基本数据类型字符串转换为String对象
			 * 	Number()
			 * 		- 可以将基本数据类型的数字转换为Number对象
			 *  Boolean()
			 * 		- 可以将基本数据类型的布尔值转换为Boolean对象
			 * 	但是注意：我们在实际应用中不会使用基本数据类型的对象，
			 * 		如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果
			 */
			
			//创建一个Number类型的对象
			//num = 3;
			var num = new Number(3);
			var num2 = new Number(3);
			var str = new String("hello");
			var str2 = new String("hello");
			var bool = new Boolean(true);
			var bool2 = true;
			
			//向num中添加一个属性
			num.hello = "abcdefg";
			
			//console.log(str === str2);
			
			var b = new Boolean(false);
			
			/*if(b){
				alert("我运行了~~~");
			}*/
			
			/*
			 * 方法和属性之能添加给对象，不能添加给基本数据类型
			 * 	当我们对一些基本数据类型的值去调用属性和方法时，
			 * 		浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法
			 * 		调用完以后，在将其转换为基本数据类型
			 */
			var s = 123;
			
			s = s.toString();
			
			s.hello = "你好";
			
			console.log(s.hello);
			//console.log(typeof s);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

字符串方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//创建一个字符串
			var str = "Hello Atguigu";
			
			/*
			 * 在底层字符串是以字符数组的形式保存的
			 * ["H","e","l"]
			 */
			
			/*
			 * length属性
			 * 	- 可以用来获取字符串的长度
			 */
			//console.log(str.length);
			//console.log(str[5]);
			
			/*
			 * charAt()
			 * 	- 可以返回字符串中指定位置的字符
			 * 	- 根据索引获取指定的字符	
			 */
			str = "中Hello Atguigu";
			
			var result = str.charAt(6);
			
			/*
			 * charCodeAt()
			 * 	- 获取指定位置字符的字符编码（Unicode编码）
			 */
			
			result = str.charCodeAt(0);
			
			/*
			 * String.formCharCode()
			 * 	- 可以根据字符编码去获取字符
			 */
			result = String.fromCharCode(0x2692);
			
			/*
			 * concat()
			 * 	- 可以用来连接两个或多个字符串
			 * 	- 作用和+一样
			 */
			result = str.concat("你好","再见");
			
			/*
			 * indexof()
			 * 	- 该方法可以检索一个字符串中是否含有指定内容
			 * 	- 如果字符串中含有该内容，则会返回其第一次出现的索引
			 * 		如果没有找到指定的内容，则返回-1
			 * 	- 可以指定一个第二个参数，指定开始查找的位置
			 * 
			 * lastIndexOf();
			 * 	- 该方法的用法和indexOf()一样，
			 * 		不同的是indexOf是从前往后找，
			 * 		而lastIndexOf是从后往前找
			 * 	- 也可以指定开始查找的位置
			 */
			
			str = "hello hatguigu";
			
			result = str.indexOf("h",1);
			
			result = str.lastIndexOf("h",5);
			
			/*
			 * slice()
			 * 	- 可以从字符串中截取指定的内容
			 * 	- 不会影响原字符串，而是将截取到内容返回
			 * 	- 参数：
			 * 		第一个，开始位置的索引（包括开始位置）
			 * 		第二个，结束位置的索引（不包括结束位置）
			 * 			- 如果省略第二个参数，则会截取到后边所有的
			 * 		- 也可以传递一个负数作为参数，负数的话将会从后边计算
			 */
			str = "abcdefghijk";
			
			result = str.slice(1,4);
			result = str.slice(1,-1);
			
			/*
			 * substring()
			 * 	- 可以用来截取一个字符串，可以slice()类似
			 * 	- 参数：
			 * 		- 第一个：开始截取位置的索引（包括开始位置）
			 * 		- 第二个：结束位置的索引（不包括结束位置）
			 * 		- 不同的是这个方法不能接受负值作为参数，
			 * 			如果传递了一个负值，则默认使用0
			 * 		- 而且他还自动调整参数的位置，如果第二个参数小于第一个，则自动交换
			 */
			
			result = str.substring(0,1);
			
			/*
			 * substr()
			 * 	- 用来截取字符串
			 * 	- 参数：
			 * 		1.截取开始位置的索引
			 * 		2.截取的长度
			 */
			
			str = "abcdefg";
			
			result = str.substr(3,2);
			
			/*
			 * split()
			 * 	- 可以将一个字符串拆分为一个数组
			 * 	- 参数：
			 * 		-需要一个字符串作为参数，将会根据该字符串去拆分数组
			 */
			str = "abcbcdefghij";
			
			result = str.split("d");
			
			/*
			 * 如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素
			 */
			result = str.split("");
			
			//console.log(Array.isArray(result));
			//console.log(result[0]);
			console.log(result);
			
			
			str = "abcdefg";
			
			/*
			 * toUpperCase()
			 * 	- 将一个字符串转换为大写并返回
			 */
			result = str.toUpperCase();
			
			str = "ABCDEFG";
			
			/*
			 * toLowerCase()
			 * 	-将一个字符串转换为小写并返回
			 */
			result = str.toLowerCase();
			
			//console.log(result);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

正则表达式

			 * 语法：
			 * 	var 变量 = new RegExp("正则表达式","匹配模式");
			 *  使用typeof检查正则对象，会返回object
			 * 	var reg = new RegExp("a"); 这个正则表达式可以来检查一个字符串中是否含有a
			 * 在构造函数中可以传递一个匹配模式作为第二个参数，
			 * 		可以是 
			 * 			i 忽略大小写 
			 * 			g 全局匹配模式
			 */
			var reg = new RegExp("ab","i");
			
			var str = "a";
			
			/*
			 * 正则表达式的方法：
			 * 	test()
			 * 	 - 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，
			 * 		如果符合则返回true，否则返回false
			 */
			var result = reg.test(str);
			//console.log(result);
			console.log(reg.test("Ac"));

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var str = "1a2b3c4d5e6f7";
			/*
			 * split()
			 * 	- 可以将一个字符串拆分为一个数组
			 * 	- 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
			 * 	- 这个方法即使不指定全局匹配，也会全都插分
			 */
			
			/*
			 * 根据任意字母来将字符串拆分
			 */
			var result = str.split(/[A-z]/);
			
			
			//console.log(result);
			
			/*
			 * search()
			 * 	- 可以搜索字符串中是否含有指定内容
			 * 	- 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1
			 * 	- 它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
			 * 	- serach()只会查找第一个，即使设置全局匹配也没用
			 */
			str = "hello abc hello aec afc";
			/*
			 * 搜索字符串中是否含有abc 或 aec 或 afc
			 */
			result = str.search(/a[bef]c/);
			
			//console.log(result);
			
			
			/*
			 * match()
			 * 	- 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
			 * 	- 默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
			 * 		我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
			 * 		可以为一个正则表达式设置多个匹配模式，且顺序无所谓
			 * 	- match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
			 * 
			 * 	
			 */
			str = "1a2a3a4a5e6f7A8B9C";
			
			result = str.match(/[a-z]/ig);
			
			//console.log(result[2]);
			
			/*
			 * replace()
			 * 	- 可以将字符串中指定内容替换为新的内容
			 *  - 参数：
			 * 		1.被替换的内容，可以接受一个正则表达式作为参数
			 * 		2.新的内容
			 *  - 默认只会替换第一个
			 */
			//result = str.replace(/[a-z]/gi , "@_@");
			result = str.replace(/[a-z]/gi , "");
			
			//console.log(result);
			
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 创建一个正则表达式检查一个字符串中是否含有aaa
			 */
			
			/*
			 * 量词
			 * 	- 通过量词可以设置一个内容出现的次数
			 * 	- 量词只对它前边的一个内容起作用
			 * 	- {n} 正好出现n次
			 * 	- {m,n} 出现m-n次
			 * 	- {m,} m次以上
			 * 	- + 至少一个，相当于{1,}
			 * 	- * 0个或多个，相当于{0,}
			 * 	- ? 0个或1个，相当于{0,1}
			 */
			var reg = /a{3}/;
			//ababab
			reg = /(ab){3}/;
			
			reg = /b{3}/;
			
			reg = /ab{1,3}c/;
			
			reg = /ab{3,}c/;
			
			reg = /ab+c/;
			
			reg = /ab*c/;
			
			reg = /ab?c/;
			
			//console.log(reg.test("abbc"));
			
			/*
			 * 检查一个字符串中是否以a开头
			 * 	^ 表示开头
			 * 	$ 表示结尾
			 */
			reg = /^a/; //匹配开头的a
			
			reg = /a$/; //匹配结尾的a
			
			//console.log(reg.test("abcabca"));
			
			/*
			 * 如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式
			 */
			reg = /^a$/;
			
			//console.log(reg.test("bbca"));
			
			/*
			 * 创建一个正则表达式，用来检查一个字符串是否是一个合法手机号
			 * 
			 * 手机号的规则：
			 * 	1 3 567890123 （11位）
			 * 	
			 * 	1. 以1开头
			 *  2. 第二位3-9任意数字
			 * 	3. 三位以后任意数字9个
			 * 
			 *  ^1   [3-9]  [0-9]{9}$  
			 * 
			 */
			
			var phoneStr = "13067890123";
			
			var phoneReg = /^1[3-9][0-9]{9}$/;
			
			console.log(phoneReg.test(phoneStr));
			
			
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 检查一个字符串中是否含有 .
			 * . 表示任意字符
			 * 在正则表达式中使用\作为转义字符
			 * \. 来表示.
			 * \\  表示\
			 * 
			 * 注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，
			 * 	如果要使用\则需要使用\\来代替
			 */
			var reg = /\./;
			
			reg = /\\/;
			
			reg = new RegExp("\\.");
			reg = new RegExp("\\\\");
			
			/*
			 * \w
			 * 	- 任意字母、数字、_  [A-z0-9_]
			 * \W
			 * 	- 除了字母、数字、_  [^A-z0-9_]
			 * \d
			 * 	- 任意的数字 [0-9]
			 * \D
			 * 	- 除了数字 [^0-9]
			 * \s
			 * 	- 空格
			 * \S
			 * 	- 除了空格
			 * \b
			 * 	- 单词边界
			 * \B
			 * 	- 除了单词边界
			 */
			
			reg = /\w/;
			reg = /\W/;
			
			reg = /\d/;
			reg = /\D/;
			
			reg = /\s/;
			reg = /\S/;
			
			/*
			 * 创建一个正则表达式检查一个字符串中是否含有单词child
			 */
			
			reg = /\bchild\b/;
			
			//console.log(reg.test("hello child "));
			
			//接收一个用户的输入
			//var str = prompt("请输入你的用户名:");
			
			var str = "              he      llo                ";
			
			//去除掉字符串中的前后的空格
			//去除空格就是使用""来替换空格
			console.log(str);
			
			//str = str.replace(/\s/g , "");
			
			//去除开头的空格
			//str = str.replace(/^\s*/, "");
			//去除结尾的空格
			//str = str.replace(/\s*$/, "");
			// /^\s*|\s*$/g 匹配开头和结尾的空格
			str = str.replace(/^\s*|\s*$/g,"");
			
			
			console.log(str);
			
		</script>
	</head>
	<body>
	</body>
</html>

电子邮件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 电子邮件
			 * 	hello  .nihao          @     abc  .com.cn
			 * 
			 * 任意字母数字下划线    .任意字母数字下划线  @   任意字母数字     .任意字母（2-5位）   .任意字母（2-5位）
			 * 
			 * \w{3,}  (\.\w+)*  @  [A-z0-9]+  (\.[A-z]{2,5}){1,2}
			 */
			
			var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
			
			var email = "abc.hello@163.com";
			
			console.log(emailReg.test(email));
			
			
		</script>
	</head>
	<body>
	</body>
</html>

DOM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
			
			/*
			 * 浏览器已经为我们提供 文档节点 对象这个对象是window属性
			 * 	可以在页面中直接使用，文档节点代表的是整个网页
			 */
			//console.log(document);
			
			//获取到button对象
			var btn = document.getElementById("btn");
			
			//修改按钮的文字
			btn.innerHTML = "I'm Button";
			
			
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			我们可以在事件对应的属性中设置一些js代码，
				这样当事件被触发时，这些代码将会执行
				
			这种写法我们称为结构和行为耦合，不方便维护，不推荐使用	
		-->
		<!--<button id="btn" οnmοusemοve="alert('讨厌，你点我干嘛！');">我是一个按钮</button>-->
		<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
			
			/*
			 * 事件，就是用户和浏览器之间的交互行为，
			 * 	比如：点击按钮，鼠标移动、关闭窗口。。。
			 */
			
			
			
			//获取按钮对象
			var btn = document.getElementById("btn");
			
			/*
			 * 可以为按钮的对应事件绑定处理函数的形式来响应事件
			 * 	这样当事件被触发时，其对应的函数将会被调用
			 */
			
			//绑定一个单击事件
			//像这种为单击事件绑定的函数，我们称为单击响应函数
			btn.onclick = function(){
				alert("你还点~~~");
			};
			
			
		</script>
	</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			/*
			 * 定义一个函数，专门用来为指定元素绑定单击响应函数
			 * 	参数：
			 * 		idStr 要绑定单击响应函数的对象的id属性值
			 * 		fun 事件的回调函数，当单击元素时，该函数将会被触发
			 */
			function myClick(idStr , fun){
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
		
			window.onload = function(){
				
				//为id为btn01的按钮绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//查找#bj节点
					var bj = document.getElementById("bj");
					//打印bj
					//innerHTML 通过这个属性可以获取到元素内部的html代码
					alert(bj.innerHTML);
				};
				
				
				//为id为btn02的按钮绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//查找所有li节点
					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
					//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
					//即使查询到的元素只有一个，也会封装到数组中返回
					var lis = document.getElementsByTagName("li");
					
					//打印lis
					//alert(lis.length);
					
					//变量lis
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
				};
				
				
				//为id为btn03的按钮绑定一个单击响应函数
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					//查找name=gender的所有节点
					var inputs = document.getElementsByName("gender");
					
					//alert(inputs.length);
					
					for(var i=0 ; i<inputs.length ; i++){
						/*
						 * innerHTML用于获取元素内部的HTML代码的
						 * 	对于自结束标签，这个属性没有意义
						 */
						//alert(inputs[i].innerHTML);
						/*
						 * 如果需要读取元素节点属性，
						 * 	直接使用 元素.属性名
						 * 		例子：元素.id 元素.name 元素.value
						 * 		注意：class属性不能采用这种方式，
						 * 			读取class属性时需要使用 元素.className
						 */
						alert(inputs[i].className);
					}
				};
				
				//为id为btn04的按钮绑定一个单击响应函数
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
					
					//获取id为city的元素
					var city = document.getElementById("city");
					
					//查找#city下所有li节点
					var lis = city.getElementsByTagName("li");
					
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
					
				};
				
				//为id为btn05的按钮绑定一个单击响应函数
				var btn05 = document.getElementById("btn05");
				btn05.onclick = function(){
					//获取id为city的节点
					var city = document.getElementById("city");
					//返回#city的所有子节点
					/*
					 * childNodes属性会获取包括文本节点在呢的所有节点
					 * 根据DOM标签标签间空白也会当成文本节点
					 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
					 * 	所以该属性在IE8中会返回4个子元素而其他浏览器是9个
					 */
					var cns = city.childNodes;
					
					//alert(cns.length);
					
					/*for(var i=0 ; i<cns.length ; i++){
						alert(cns[i]);
					}*/
					
					/*
					 * children属性可以获取当前元素的所有子元素
					 */
					var cns2 = city.children;
					alert(cns2.length);
				};
				
				//为id为btn06的按钮绑定一个单击响应函数
				var btn06 = document.getElementById("btn06");
				btn06.onclick = function(){
					//获取id为phone的元素
					var phone = document.getElementById("phone");
					//返回#phone的第一个子节点
					//phone.childNodes[0];
					//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
					var fir = phone.firstChild;
					
					//firstElementChild获取当前元素的第一个子元素
					/*
					 * firstElementChild不支持IE8及以下的浏览器，
					 * 	如果需要兼容他们尽量不要使用
					 */
					//fir = phone.firstElementChild;
					
					alert(fir);
				};
				
				//为id为btn07的按钮绑定一个单击响应函数
				myClick("btn07",function(){
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//返回#bj的父节点
					var pn = bj.parentNode;
					
					alert(pn.innerHTML);
					
					/*
					 * innerText
					 * 	- 该属性可以获取到元素内部的文本内容
					 * 	- 它和innerHTML类似，不同的是它会自动将html去除
					 */
					//alert(pn.innerText);
					
					
				});
				
				
				//为id为btn08的按钮绑定一个单击响应函数
				myClick("btn08",function(){
					
					//获取id为android的元素
					var and = document.getElementById("android");
					
					//返回#android的前一个兄弟节点（也可能获取到空白的文本）
					var ps = and.previousSibling;
					
					//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
					//var pe = and.previousElementSibling;
					
					alert(ps);
					
				});
				
				//读取#username的value属性值
				myClick("btn09",function(){
					//获取id为username的元素
					var um = document.getElementById("username");
					//读取um的value属性值
					//文本框的value属性值，就是文本框中填写的内容
					alert(um.value);
				});
				
				
				//设置#username的value属性值
				myClick("btn10",function(){
					//获取id为username的元素
					var um = document.getElementById("username");
					
					um.value = "今天天气真不错~~~";
				});
				
				
				//返回#bj的文本值
				myClick("btn11",function(){
					
					//获取id为bj的元素
					var bj = document.getElementById("bj");
					
					//alert(bj.innerHTML);
					//alert(bj.innerText);
					
					//获取bj中的文本节点
					/*var fc = bj.firstChild;
					alert(fc.nodeValue);*/
					
					alert(bj.firstChild.nodeValue);
					
					
				});
				
			};
			
		
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input class="hello" type="radio" name="gender" value="male"/>
				Male
				<input class="hello" type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender的所有节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">返回#city的所有子节点</button></div>
			<div><button id="btn06">返回#phone的第一个子节点</button></div>
			<div><button id="btn07">返回#bj的父节点</button></div>
			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
		</div>
	</body>
</html>

button切换图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#outer{
				width: 500px;
				margin: 50px auto;
				padding: 10px;
				background-color: greenyellow;
				/*设置文本居中*/
				text-align: center;
			}
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 点击按钮切换图片
				 */
				
				//获取两个按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				
				/*
				 * 要切换图片就是要修改img标签的src属性
				 */
				
				//获取img标签
				var img = document.getElementsByTagName("img")[0];
				
				//创建一个数组，用来保存图片的路径
				var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];
				
				//创建一个变量，来保存当前正在显示的图片的索引
				var index = 0;
				
				//获取id为info的p元素
				var info = document.getElementById("info");
				//设置提示文字
				info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
				
				
				//分别为两个按钮绑定单击响应函数
				prev.onclick = function(){
					
					/*
					 * 切换到上一张，索引自减
					 */
					index--;
					
					//判断index是否小于0
					if(index < 0){
						index = imgArr.length - 1;
					}
					
					img.src = imgArr[index];
					
					//当点击按钮以后，重新设置信息
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
				};
				
				next.onclick = function(){
					
					/*
					 * 切换到下一张是index自增
					 */
					index++;
					
					if(index > imgArr.length - 1){
						index = 0;
					}
					
					//切换图片就是修改img的src属性
					//要修改一个元素的属性 元素.属性 = 属性值
					img.src = imgArr[index];
					
					//当点击按钮以后，重新设置信息
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
					
				};
				
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="outer">
			
			<p id="info"></p>
			
			<img src="img/1.jpg" alt="冰棍" />
			
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
			
		</div>
	</body>
</html>

全选checkbox

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
<script type="text/javascript">

	window.onload = function(){
		
		
		//获取四个多选框items
		var items = document.getElementsByName("items");
		//获取全选/全不选的多选框
		var checkedAllBox = document.getElementById("checkedAllBox");
		
		/*
		 * 全选按钮
		 * 	- 点击按钮以后，四个多选框全都被选中
		 */
		
		//1.#checkedAllBtn
		//为id为checkedAllBtn的按钮绑定一个单击响应函数
		var checkedAllBtn = document.getElementById("checkedAllBtn");
		checkedAllBtn.onclick = function(){
			
			
			//遍历items
			for(var i=0 ; i<items.length ; i++){
				
				//通过多选框的checked属性可以来获取或设置多选框的选中状态
				//alert(items[i].checked);
				
				//设置四个多选框变成选中状态
				items[i].checked = true;
			}
			
			//将全选/全不选设置为选中
			checkedAllBox.checked = true;
			
			
		};
		
		/*
		 * 全不选按钮
		 * 	- 点击按钮以后，四个多选框都变成没选中的状态
		 */
		//2.#checkedNoBtn
		//为id为checkedNoBtn的按钮绑定一个单击响应函数
		var checkedNoBtn = document.getElementById("checkedNoBtn");
		checkedNoBtn.onclick = function(){
			
			for(var i=0; i<items.length ; i++){
				//将四个多选框设置为没选中的状态
				items[i].checked = false;
			}
			
			//将全选/全不选设置为不选中
			checkedAllBox.checked = false;
			
		};
		
		/*
		 * 反选按钮
		 * 	- 点击按钮以后，选中的变成没选中，没选中的变成选中
		 */
		//3.#checkedRevBtn
		var checkedRevBtn = document.getElementById("checkedRevBtn");
		checkedRevBtn.onclick = function(){
			
			//将checkedAllBox设置为选中状态
			checkedAllBox.checked = true;
			
			for(var i=0; i<items.length ; i++){
				
				//判断多选框状态
				/*if(items[i].checked){
					//证明多选框已选中，则设置为没选中状态
					items[i].checked = false;
				}else{
					//证明多选框没选中，则设置为选中状态
					items[i].checked = true;
				}*/
				
				items[i].checked = !items[i].checked;
				
				//判断四个多选框是否全选
				//只要有一个没选中则就不是全选
				if(!items[i].checked){
					//一旦进入判断，则证明不是全选状态
					//将checkedAllBox设置为没选中状态
					checkedAllBox.checked = false;
				}
			}
			
			//在反选时也需要判断四个多选框是否全都选中
			
			
			
		};
		
		/*
		 * 提交按钮：
		 * 	- 点击按钮以后，将所有选中的多选框的value属性值弹出
		 */
		//4.#sendBtn
		//为sendBtn绑定单击响应函数
		var sendBtn = document.getElementById("sendBtn");
		sendBtn.onclick = function(){
			//遍历items
			for(var i=0 ; i<items.length ; i++){
				//判断多选框是否选中
				if(items[i].checked){
					alert(items[i].value);
				}
			}
		};
		
		
		//5.#checkedAllBox
		/*
		 * 全选/全不选 多选框
		 * 	- 当它选中时，其余的也选中，当它取消时其余的也取消
		 * 
		 * 在事件的响应函数中，响应函数是给谁绑定的this就是谁
		 */
		//为checkedAllBox绑定单击响应函数
		checkedAllBox.onclick = function(){
			
			//alert(this === checkedAllBox);
			
			//设置多选框的选中状态
			for(var i=0; i <items.length ; i++){
				items[i].checked = this.checked;
			}
			
		};
		
		//6.items
		/*
		 * 如果四个多选框全都选中，则checkedAllBox也应该选中
		 * 如果四个多选框没都选中，则checkedAllBox也不应该选中
		 */
		
		//为四个多选框分别绑定点击响应函数
		for(var i=0 ; i<items.length ; i++){
			items[i].onclick = function(){
				
				//将checkedAllBox设置为选中状态
				checkedAllBox.checked = true;
				
				for(var j=0 ; j<items.length ; j++){
					//判断四个多选框是否全选
					//只要有一个没选中则就不是全选
					if(!items[j].checked){
						//一旦进入判断，则证明不是全选状态
						//将checkedAllBox设置为没选中状态
						checkedAllBox.checked = false;
						//一旦进入判断，则已经得出结果，不用再继续执行循环
						break;
					}
					
				}
				
				
				
			};
		}
		
		
	};
	
</script>
</head>
<body>

	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
		
		<br />
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br />
		<input type="button" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>
</body>
</html>

DOM查询

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				//获取body标签
				//var body = document.getElementsByTagName("body")[0];
				
				/*
				 * 在document中有一个属性body，它保存的是body的引用
				 */
				var body = document.body;
				
				/*
				 * document.documentElement保存的是html根标签
				 */
				var html = document.documentElement;
				
				//console.log(html);
				
				/*
				 * document.all代表页面中所有的元素
				 */
				var all = document.all;
				
				//console.log(all.length);
				
				/*for(var i=0 ; i<all.length ; i++){
					console.log(all[i]);
				}*/
				
				//all = document.getElementsByTagName("*");
				//console.log(all.length);
				
				
				/*
				 * 根据元素的class属性值查询一组元素节点对象
				 * getElementsByClassName()可以根据class属性值获取一组元素节点对象，
				 * 	但是该方法不支持IE8及以下的浏览器
				 */
				//var box1 = document.getElementsByClassName("box1");
				//console.log(box1.length);
				
				//获取页面中的所有的div
				//var divs = document.getElementsByTagName("div");
				
				//获取class为box1中的所有的div
				//.box1 div
				/*
				 * document.querySelector()
				 * 	- 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
				 * 	- 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
				 * 	- 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
				 */
				var div = document.querySelector(".box1 div");
				
				var box1 = document.querySelector(".box1")
				
				//console.log(div.innerHTML);
				//console.log(box1.innerHTML);
				
				/*
				 * document.querySelectorAll()
				 * 	- 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
				 * 	- 即使符合条件的元素只有一个，它也会返回数组
				 */
				box1 = document.querySelectorAll(".box1");
				box1 = document.querySelectorAll("#box2");
				console.log(box1);
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="box2"></div>	
		<div class="box1">
			我是第一个box1	 
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		<div class="box1">
			<div>我是box1中的div</div>
		</div>
		
		<div></div>
	</body>
</html>

DOM增删改

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			window.onload = function() {
				
				//创建一个"广州"节点,添加到#city下
				myClick("btn01",function(){
					//创建广州节点 <li>广州</li>
					//创建li元素节点
					/*
					 * document.createElement()
					 * 	可以用于创建一个元素节点对象，
					 * 	它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
					 * 	并将创建好的对象作为返回值返回
					 */
					var li = document.createElement("li");
					
					//创建广州文本节点
					/*
					 * document.createTextNode()
					 * 	可以用来创建一个文本节点对象
					 *  需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
					 */
					var gzText = document.createTextNode("广州");
					
					//将gzText设置li的子节点
					/*
					 * appendChild()
					 * 	 - 向一个父节点中添加一个新的子节点
					 * 	 - 用法：父节点.appendChild(子节点);
					 */
					li.appendChild(gzText);
					
					//获取id为city的节点
					var city = document.getElementById("city");
					
					//将广州添加到city下
					city.appendChild(li);
					
					
				});
				
				//将"广州"节点插入到#bj前面
				myClick("btn02",function(){
					//创建一个广州
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//获取city
					var city = document.getElementById("city");
					
					/*
					 * insertBefore()
					 * 	- 可以在指定的子节点前插入新的子节点
					 *  - 语法：
					 * 		父节点.insertBefore(新节点,旧节点);
					 */
					city.insertBefore(li , bj);
					
					
				});
				
				
				//使用"广州"节点替换#bj节点
				myClick("btn03",function(){
					//创建一个广州
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//获取city
					var city = document.getElementById("city");
					
					/*
					 * replaceChild()
					 * 	- 可以使用指定的子节点替换已有的子节点
					 * 	- 语法：父节点.replaceChild(新节点,旧节点);
					 */
					city.replaceChild(li , bj);
					
					
				});
				
				//删除#bj节点
				myClick("btn04",function(){
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					//获取city
					var city = document.getElementById("city");
					
					/*
					 * removeChild()
					 * 	- 可以删除一个子节点
					 * 	- 语法：父节点.removeChild(子节点);
					 * 		
					 * 		子节点.parentNode.removeChild(子节点);
					 */
					//city.removeChild(bj);
					
					bj.parentNode.removeChild(bj);
				});
				
				
				//读取#city内的HTML代码
				myClick("btn05",function(){
					//获取city
					var city = document.getElementById("city");
					
					alert(city.innerHTML);
				});
				
				//设置#bj内的HTML代码
				myClick("btn06" , function(){
					//获取bj
					var bj = document.getElementById("bj");
					bj.innerHTML = "昌平";
				});
				
				myClick("btn07",function(){
					
					//向city中添加广州
					var city = document.getElementById("city");
					
					/*
					 * 使用innerHTML也可以完成DOM的增删改的相关操作
					 * 一般我们会两种方式结合使用
					 */
					//city.innerHTML += "<li>广州</li>";
					
					//创建一个li
					var li = document.createElement("li");
					//向li中设置文本
					li.innerHTML = "广州";
					//将li添加到city中
					city.appendChild(li);
					
				});
				
				
			};
			
			function myClick(idStr, fun) {
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
			
		
		</script>
		
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
				
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
			<div><button id="btn05">读取#city内的HTML代码</button></div>
			<div><button id="btn06">设置#bj内的HTML代码</button></div>
			<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
		</div>
	</body>
</html>

添加员工删除员工

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>添加删除记录练习</title>
		<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
		<script type="text/javascript">
		
			/*
			 * 删除tr的响应函数
			 */
			function delA() {

				//点击超链接以后需要删除超链接所在的那行
				//这里我们点击那个超链接this就是谁
				//获取当前tr
				var tr = this.parentNode.parentNode;

				//获取要删除的员工的名字
				//var name = tr.getElementsByTagName("td")[0].innerHTML;
				var name = tr.children[0].innerHTML;

				//删除之前弹出一个提示框
				/*
				 * confirm()用于弹出一个带有确认和取消按钮的提示框
				 * 	需要一个字符串作为参数，该字符串将会作为提示文字显示出来
				 * 如果用户点击确认则会返回true，如果点击取消则返回false
				 */
				var flag = confirm("确认删除" + name + "吗?");

				//如果用户点击确认
				if(flag) {
					//删除tr
					tr.parentNode.removeChild(tr);
				}

				/*
				 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
				 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
				 */
				return false;
			};

			window.onload = function() {

				/*
				 * 点击超链接以后，删除一个员工的信息
				 */

				//获取所有额超链接
				var allA = document.getElementsByTagName("a");

				//为每个超链接都绑定一个单击响应函数
				for(var i = 0; i < allA.length; i++) {
					allA[i].onclick = delA;
				}

				/*
				 * 添加员工的功能
				 * 	- 点击按钮以后，将员工的信息添加到表格中
				 */

				//为提交按钮绑定一个单击响应函数
				var addEmpButton = document.getElementById("addEmpButton");
				addEmpButton.onclick = function() {

					//获取用户添加的员工信息
					//获取员工的名字
					var name = document.getElementById("empName").value;
					//获取员工的email和salary
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;

					//alert(name+","+email+","+salary);
					/*
					 *  <tr>
							<td>Tom</td>
							<td>tom@tom.com</td>
							<td>5000</td>
							<td><a href="javascript:;">Delete</a></td>
						</tr>
						需要将获取到的信息保存到tr中
					 */

					//创建一个tr
					var tr = document.createElement("tr");

					//设置tr中的内容
					tr.innerHTML = "<td>"+name+"</td>"+
									"<td>"+email+"</td>"+
									"<td>"+salary+"</td>"+
									"<td><a href='javascript:;'>Delete</a></td>";
									
					//获取刚刚添加的a元素，并为其绑定单击响应函数				
					var a = tr.getElementsByTagName("a")[0];
					a.onclick = delA;
					
					//获取table
					var employeeTable = document.getElementById("employeeTable");
					//获取employeeTable中的tbody
					var tbody = employeeTable.getElementsByTagName("tbody")[0];
					//将tr添加到tbodye中
					tbody.appendChild(tr);
					/*tbody.innerHTML += "<tr>"+
					
					"<td>"+name+"</td>"+
									"<td>"+email+"</td>"+
									"<td>"+salary+"</td>"+
									"<td><a href='javascript:;'>Delete</a></td>"
					
					+"</tr>";*/

				};

			};
		</script>
	</head>

	<body>

		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td>
					<a href="javascript:;">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td>
					<a href="deleteEmp?id=002">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td>
					<a href="deleteEmp?id=003">Delete</a>
				</td>
			</tr>
		</table>

		<div id="formDiv">

			<h4>添加新员工</h4>

			<table>
				<tr>
					<td class="word">name: </td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />
					</td>
				</tr>
				<tr>
					<td class="word">email: </td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">salary: </td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button id="addEmpButton">
						Submit
					</button>
					</td>
				</tr>
			</table>

		</div>

	</body>

</html>