当前位置：网站首页>JS基础1

JS基础1

2022-08-09 07:42:00 【Xiaoweidumpb】 

			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("@[email protected]"); /* * 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 , "@[email protected]"); 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 = "[email protected]"; 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>[email protected]</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>[email protected]</td>
				<td>5000</td>
				<td>
					<a href="javascript:;">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>[email protected]</td>
				<td>8000</td>
				<td>
					<a href="deleteEmp?id=002">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>[email protected]</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>
原网站

版权声明
本文为[Xiaoweidumpb]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_43751489/article/details/120979959

边栏推荐

猜你喜欢

随机推荐