蛋翼
蛋翼

Javascript基础

JS的输出语句

		<!--JS代码需要编写到script标签中-->
		<script type="text/javascript">
			
			/*
			* 控制浏览器弹出一个警告框
			* alert("这是我的第一行JS代码");
			*/
		   
		   /*
		   *让计算机在页面输出一个内容
		   * document.write()可以向body中输出一个内容
		   * document.write("kanjianwo!!");
		   */
		  
		  
		  /*
		  * 向控制台输出一个内容
		  * console.log()的作用是向控制台输出一个内容
		  * console.log("你猜我在哪呢？");
		  */
		 
		 alert("这是我的第一行JS代码，内部代码");
		 document.write("kanjianwo!!");
		 console.log("你猜我在哪呢？");

  1. JS编写位置，行内链接，内联外联

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		
		
		
		 
		<script type="text/javascript" src="script.js">script>
		
		
		
		<script type="text/javascript">
		 alert("这是我的第一行JS代码，内部代码");
		script>

	head>
	<body>
		
		
		<button onclick="alert('讨厌,你点我干嘛');">点我一下button>
		
		
		<a href="javascript:alert('让你点你就点');">你也点我一下a>
		
		<a href="javascript">你也点我一下a>
	body>
html>


    alert("我是JS文件中的代码");

  2. 注释

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script type="text/javascript">
			/*
				多行注释，注释中的内容不会被执行，但是可以在源代码中查看
				JS注释
				要养成良好的写注释的习惯，也可以通过注释来对代码进行一些简单的调试
			*/
		   
		   //单行注释
		   /*
		    * 1.JS中严格区分大小写
			* 2.JS中每一条语句以分号 ; 结尾
			* 	  -如果不加分号，有时候浏览器会自动加，但是会消耗掉系统资源
			* 		有时候，浏览器会加错分号，所以在开发中分号必须写
			* 3.JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化。
			* 
			*/
		script>
	head>
	<body>
	body>
html>

  3. 字面量和变量

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script type="text/javascript">
			
			/*
			*
			* 字面量，都是一些不可改变的值。比如：1 2 3 4 5 
			* 	  字面量都是可以直接使用的，但我们一半不会直接使用字面量
			* 
			* 变量	变量可以用来保存字面量，而且变量的值是可以任意改变的。
			* 		变量更加方便使用，所以开发中通过变量去保存一个字面量，而很少使用字面量
			* 		可以通过变量对字面量进行描述
			*/
		   
		   //声明变量  在js中使用var关键字来声明一个变量
		   var a;
		   
		   //为变量赋值
		   a = 123;
		   a = 456;
		   a =  123454563456;
		   
		   //声明和赋值同时进行
		   var b = 789;
		   var c = 0;
		   
		   var age = 80;
		   console.log(age);
		   
		   /*
		    * 标识符
			* 	- 在js中所有的可以由我们自主命名的都可以成为是标识符
			* 	- 例如：变量名、函数名、属性名
			* 	- 命名一个标识符时需要遵循如下规则：
			* 		1.标识符中可以含有字母、数字、_、$
			* 		2.标识符不能以数字开头
			* 		3.标识符不能是js中的关键字和保留字
			* 		4.标识符一般采用驼峰命名法：
			* 			- 首字母小写，之后的每个单词的开头字母大写，其他字母小写
			* 
			* 	  js底层保存标识符时实际上采用的Unicode编码
			* 		- 所以理论上讲，所有的utf-8中含有的内容都可以作为标识符。
			*/
		   
		   //utf-8中包括中文，所以可以这样用
		   //但是一般不这样用
		   var 锄禾日当午 = 234;
		   document.write(锄禾日当午);
		   
		   
		script>
	head>
	<body>
	body>
html>

  4. 六种数据类型

    • String类型

      DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script type="text/javascript">
			/*
			 * 数据类型指的就是字面量的类型
			 *   在js中一共有6种数据类型
			 * 		String 字符串
			 * 		Number 数值
			 * 		Boolean 布尔值
			 * 		Null 空值
			 * 		Undefined 未定义
			 * 		Object 对象
			 * 
			 * 		其中String Number Boolean Null Undefined属于基本数据类型
			 * 		而Object 属于引用数据类型
			 * 
			 */
			
			/*
			 *   String字符串
			 * 	   —在js中，字符串需要使用引号引起来
			 * 	   —使用双引号或单引号都可以，但是不能混着用
			 * 	   —引号不能嵌套，双引号不能放双引号，单引号不能放单引号
			 */
			var str = "hello";
			str = '我说："今天天气不错！"'
			document.write(str);
			
			/*
				在字符串中我们可以使用\作为转义字符
					当我们表示一些特殊符号时可以使用\进行转义
						\" 表示 "
						\' 表示 '
						\n 表示 换行
						\t 表示制表符
			*/
		   str = "我说：\"今天\t天气真不错！\""
		   document.write(str);
		   str = "\\"
		   document.write(str);
		   
		   //输出字面量：字符串类型的str
		   // alert("str");
		   
		   //输出变量
		   // alert(str);
		   
		   var str2 = "hello";
		   
		   str2= "你好";
		   
		   // alert(str2);
		script>
	head>
	<body>
	body>
html>

    • 数值类型number

      <script>
	    /*
    * 在js中所有的数值都是Number类型
    * 包括整数和浮点数(小数)
    * 
    * JS中可以表示的数字的最大值
    * 	Number.MAX_VALUE
    * 		1.7976931348623157e+308
    * 
    * 	Number.MIN_VALUE	大于0的最小值
    * 		5e-324
    * 
    * 	如果使用Number表示的数字超过了最大值，则会返回一个
    * 		 Infinity 表示正无穷
    * 	    -Infinity 表示负无穷
    * 	使用typeof检查Infinity也会返回number
    * 
    * 	NaN是一个特殊的数字，表示Not A Number
    * 	   使用typeof检查NaN也会返回number
    */

    //数字123
    var a = 123;
    //字符串123
    var b = "123";

    document.write(a);
    document. write(b);

    /*
    可以使用一个运算符 typeof 来检查一个变量的类型
    语法：typeof 变量。
    检查字符串时，会返回string 
    检查数值时，会返回number


    */
    document.write(typeof a);
    document.write(typeof b);

    c = -Number.MAX_VALUE * Number.MAX_VALUE

    // c = Infinity;
    document.write(c);
    console.log (c);
    alert(typeof c);

    a = "abc" * "bcd";
    a = NaN; 
    //console.log(typeof a);

    a=Number.MIN_VALUE
    //console.log(a);

    /*
    * 在JS中整数的运算基本可以保证精确
    */
    var c =1865789 + 7654321;
    /*
    * 如果使用JS进行浮点运算，可能得到一个不精确的结果。
    *     所以千万不要使用JS进行精确度比较高的运算。比如:钱的交易。
    */
    var c = 0.1 + 0.2;
    console.log(c);
script>

    • Boolean类型

      <script>
	    /*
    * Boolean 布尔值
    * 	 布尔值只有两个：
    * 		true
    * 		   -表示真
    *		false
    * 		   -表示假
    * 
    * 	使用typeof检查一个布尔值时，会返回boolean
    */

    var bool = true;

    console.log(typeof bool);
script>

    • Null类型、Undefined类型

      <script>
    /* 
		   *  Null类型的值只有一个，就是null
		   * 	null这个值专门用来表示一个为空的对象
		   * 	使用typeof检查一个null值时，会返回object
		   * 
		   * 	Undefined类型的值只有一个，就underfind
		   * 	  当声明一个变量，但是并不给变量赋值时，他的值就是undefined
		   * 	  使用typeof 检查一个undefined时也会返回underfined
		   */
    var a = null;

    var e = undefined;

    console.log(typeof e);
script>

  5. 强制类型转换

    • 转换为String

      <script type="text/javascript">	
    /*
     *强制类型转换
     * 	 —指将一个数据类型强制转换为其他的类型
     * 	 —类型转换主要指：将其他的数据类型转换为：String、Number、Boolean
     * 
     */

    /*
     *将其他的数据类型转换为String
     * 	方式一：
     * 		--调用被转换数据类型的toString()方法
     * 		--调用该方法不会影响到原变量，它会将转换的结果返回。
     * 		--注意：null和undefined这两个值没有toString()方法
     * 			   如果调用他们的方法，会报错.
     * 	方式二:
     * 		--调用String()函数,并将转换的数据作为参数传递给函数.
     * 		--使用String()函数做强制类型转换时
     * 			对于Number和Boolean实际上就是调用toString()方法
     * 		    但是对于null和undefined:
     * 			    它会将null转换成"null",将undefined转换成"undefined"
    */
			
    var a = 123;

    //调用a的toString()方法
    //调用xxx的yyy()方法，就是xxx.yyy()
    //var b = a.toString(); 也可以直接用a接收这个值
    a = a.toString();

    a = true;
    a = a.toString();

    a = null;
    //a = a.toString();

    a = undefined;
    //a = a.toString();

    a = 123;
    //调用String()函数,来将a转换为字符串
    a = String(a);

    a = null;
    a = String(a);

    a = undefined;
    a = String(a);

	// console.log(typeof a);
	// console.log(a);	
script>

    • 其他类型转换为number

      <script>
    /*
    *将其他的数据类型转换成Number
    * 	转换方式一:
    * 		使用Number()函数
    * 			--字符串---数字
    * 				1、纯字符的字符串，则直接将其转换为数字。
    * 				2、如果字符串中有非数字的内容，转换为NaN
    * 				3、如果是空串或者是全是空格的字符串，转换为0
    * 		布尔值---数字
    * 			true   1
    * 			false  0
    * 		null       0
    * 		undefined  NaN
    * 
    *  转换方式二:
    * 		--这种方式用来对付字符串
    * 			  parseInt()把一个字符串转换为一个整数
    * 			  parseFloat()把一个字符串转成一个浮点数
    */

    a = "123";

    //调用Number()函数将a转换成Number类型
    a = Number(a);

    a = false;
    a = Number(a);//0

    a = null;
    a = Number(a);//0

    a = undefined;
    a = Number(a);//NAN

    a = "12.3px23445d3";
    a = parseInt(a);//12
    //parseInt()可以将一个字符串中的数字取出来，转换成number
    //但是只取整数，碰到其他字符不再取，例字母后面即使还有数字，也不再取

    a = "1.23.23psdf";
    a = parseFloat(a);//1.23
    //与parseInt()类似，不过这个可以取小数。碰见其他字符同样不再取。

    a = true;
    a = parseInt(a);//NaN
    //如果非String使用parseInt()或parseFloat()，会将其先转换为String再进行操作

    // console.log(typeof a);
    // document.write(a);
script>

    • 十六进制、八进制、二进制的表示

      <script>

    /*
    *在js中，表示  十六 进制的数字：以0x开头
    * 			   八 进制           0
    * 			   二 进制           0b
    *    不是所有的浏览器都支持，如：IE就不支持
    */

    //16进制
    a = 0x10;
    a = 0xcafe;

    //8进制
    a = 070;

    //二进制
    a = 0b10;

    //像“070”这种字符串，有些浏览器当成8进制解析，有些当成10进制解析
    a = "070";
    //a = parseInt(a);
    //可以在parseInt中传递第二个参数,指定数字的进制
    a = parseInt(a,8);

    // document.write(typeof a);
    // console.log(a);
script>

    • 转换为Boolean类型

      <script>
				
			/*
			 * 	将其他的数据类型转换成Boolean
			 *    -使用Boolean()函数
			 * 		 - 数字----布尔
			 * 			   -0和NaN    false
			 * 		       -其他的全是  true
			 * 
			 * 		 - 字符串----布尔
			  * 			除了空串,其他全是true
			  * 
			  * 	 - null和undefined都会转换为false
			  * 
			  *  	 - 对象也会转换成true
			 */
			a = 123;//true
			a = -123;//true
			a = 0;//false
			a = Infinity;//true
			a = NaN;//false
			
			//调用Boolean()函数将a转换为布尔值
			a = Boolean(a);
			
			a = "sdf";//true
			a = "啊我的"//true
			a = ""//false
			a = Boolean(a);
			
			a = null;//false
			a = undefined;//false
			a = Boolean(a);
			
			document.write(typeof a);
			console.log(a);
script>

  6. 运算符

    • 算术运算符

      <script type="text/javascript">
    		/*
			 *运算符也叫操作符
			 * 	  可以对一个或多个值进行运算,并获取结果
			 *	  如:typeof 就是运算符,可以来获得一个结果
			 * 		  它会将该值的类型以字符串的形式返回
			 * 			number string boolean undefined object
			 * 
			 * 算数运算符
			 * 	 当对非Number类型的值进行运算时，会将这些值转换成Number然后再运算
			 * 	 任何值和NaN做运算：都是NaN
			 * 	 +
			 * 		可以对两个值进行加法运算，并将结果返回
			 * 		如果对两个字符串进行加法运算，会将他们拼成一个字符串然后返回
			 * 		任何的值和字符串作加减运算，都会先转换成字符串，然后再拼串
			 * 	 -
			 * 		对两个值进行减法运算,返回结果
			 * 、-、*、、、、、
			 * 
			 * 
			 */ 

    var a = 123;
    var result = typeof a;
    //document.write(typeof result);// typefo返回一个值的类型 以String类型输出结果

    result = a + 1;

    result = 123 + 123;

    result = true + 1;//2

    result = true +false;//1

    result = 2 + null;//2

    result = 3 +NaN;//NaN

    result = "123" + "456";

    result = "12"+1;

    result = true +"halppy";
    //任何值和字符串相加，都会拼串
    //利用这一点,任何类型的值+""即可转换为string
    //这是一种隐式的类型转换，浏览器自动完成，实际上也是调用String()函数完成。
    var c = 1223;
    c = c + "";
    // document.write(c);
    // document.write(typeof c);

    result = 1 + 2 +"3";//33
    //number类型的做加法运算，直至遇到字符串类型的做拼串

    result = "1" + 2 + 3;//123
    //如果开头就是字符串类型的，直接做拼串

    result = 100 - true;//99

    //除了加法运算,其余运算都是将其转换为number进行运算.
    result = 100 - "10";//90

    result = 2 * "2";//4

    result = 2 * undefined;//NaN

    result = 2 * null;//0

    result = 3/(true+true);//1.5

    //document.write(result);
    /*	任何值做-、*、/ 运算时都会转换成Number
			 *		利用这一隐式特点,
			 * 		通过-0、*1、/1,就可以很方便的将其转换成Number.
			 *	 原理与Number()函数一样
			 */ 
    var d = "123";
    d = d - 0;

    // document.write(d);
    //document.write(d);	
script>

    • 一元运算符

      <script>
				/*
			 *一元运算符，只需要一个操作数
			 *	+ 正号
			 * 		不会对数字产生任何影响
			 * 	- 负号
			 * 		符号可以对数字进行符号的取反
			 * --对于非number类型的值，
			 * 		先将其转换为number，再运算。
			 * 		可以对一个其他类型的数据使用+，来将其转换为number
			 * 		它的原理和number()函数一样。  	如：a = "18";
			 * 		    							    a = +a;
			 */ 
			
			a = 123;
			a = -a;//-123
			
			a = true;// boolean  true
			a = -a;//number   -1
			  
			a = "18";//18  string
			//a = -a;	//-18   number
			a = +a;	//18 number
			
			// document.write(a);
			// document.write(typeof a);
			
			result = 1 + "2" + 3;//123
			
			result = 1 + +"2" + 3//6
			//document.write(result);
script>

    • 自增、自减，以及逻辑运算符

      <script>
   		 /*
			 * 自增 ++
			 *		通过自增使变量在自身的基础上增加1
			 *     a++，先赋值再自加1
			 * 	   ++a，先运算在赋值
			 * 自减 --
			 * 		a--，先赋值再自减1
			 * 		--a，先运算再赋值
			 * 参考java
			 */ 
    
			/*
			 *逻辑运算符
			 * 	 ! 非
			 * 		对一个值进行非运算，!true = false;    !false = true;
			 * 		如果对非boolean值进行取反，先转换为布尔值再取反
			 * 		可以对一个值取反两次，就会将其转换为布尔值。原理与Boolean()函数一样
			 * 	 &&  与
			 * 		真真为真，有假为假
			 * 		js中的&&为短路与，如果第一个值为false则不会再判断第二个值的真假
			 * 	 || 或
			 * 		有真为真，假假为假。
			 * 		js中的||为短路或,如果第一个值为true,则不再判断第二个值的真假
			 */ 	
			
			
			
			b = 10;
			b = !!b;
			// document.write(b);
			// document.write(typeof b);
			
			/*
			 * && || 非布尔值的情况。
			 * 		对于非布尔值进行与/或的运算时，先转换为布尔值，再运算。
			 * 	如果要输出结果，则输出判断的最后一个值。
			 */ 
			
			// 真真 &&， 输出判断的最后一个数。
			b = 1 && 2;//2
			b = 2 && 1; //1
			
			// 假假 && 第一个就为假，则直接返回，不再判断第二个数值的真假
			b = 0 && NaN;//0
			b = NaN && 0; //NaN
			
			//真假 &&  碰见假的就输出。
			b = 0 && 3;//0
			b = 9 && 0;//0
			
			//  ||  返回判断的最后一个值
			//全真返回第一个值，全假返回第二个值，真假返回真，假真返回真
			b = NaN || 1;  //1
			b = NaN || 0;  //0
			b = 2 || 1;
			
			b = "" || "hello";//hello
			b = -1 || "你好";//-1
			document.write(b);
script>

    • 赋值运算符

      <script type="text/javascript">
    /**
    * = 
    * 	可以将符号右侧的值赋值给符号左侧的变量
    * +=
    * 	a += 5; 等同于 a = a + 5;
    * -=
    * 	a -= 5; 等同于 a = a - 5;
    * *=
    * 	a *= 5; 等同于 a = a * 5;
    * /=
    * 	a /= 5; 等同于 a = a / 5;
    * %=
    * 	a %= 5; 等同于 a = a % 5;
    */
    var a= 10;
    var b= 10;
    var c= 10;
    var d= 10;
    var e= 10;

    a += 5;	//等同于a = a+5
    document.write("a="+a);//15

    b -= 5;
    document.write("b="+b);//5

    c *= 5;
    document.write("c="+c);//50

    d /= 5;
    document.write("d="+d);//2

    e %= 5;
    document.write("e="+e);//0

script>

    • 关系运算符

      <script type="text/javascript">
    /**
    * 通过关系运算符比较两个值之间的大小关系
    *    关系成立返回：true，反之返回：false
    * 	
    * >	判断左边是否大于右边，大于：true，反之：false
    * 	参照java
    * 	>=
    * 	<
    * 	<=
    * 
    * 		非数值的情况：
    * 			- 非数值进行比较的时候，先转换成数字然后再比较
    * 			- 如果比较两个字符串，不会将其转换为数字进行比较，
    *			  而是会比较字符串中字符的Unicode编码
    * 
    * 		注意：
    * 			- 任何值和NaN作比较都是：false
    * 			- 比较来两个字符串时，比较的是字符串的字符编码
    * 			  比较字符串编码时，一位一位进行比较，
    * 			  如果两位一样，则比较下一位，所以借用它可以对英文进行排序
    * 
    * 			- 如果比较的是两个字符串类型，其中放的是数字，可能得到不可预期的结果
    * 			  所以在比较两个字符串类型的数字时，一定要转型。
    * 			
    */
script>

    • 在网页中使用Unicode编码输出字符

      DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script type="text/javascript">
			/**
			 * 在字符串中使用转义字符输入Unicode编码
			 * 	\u四位编码
			 */
			document.write("\u2620");
		script>
	head>
	<body>
		
		<h1>਼h1>
		<h1 style="font-size:100px;">☠h1>
		<h1 style="font-size:100px;">⚀h1>
	body>
html>

    • 相等运算符

      <script type="text/javascript">
    /**
    * 	相等运算符用来比较两个值是否相等
    * 	==
    * 		相等运算。
    * 		使用==比较两个值时，如果值的了类型不同，则会自动进行类型转换
    * 		将其转换成为相同类型，然后再比较
    * 	!= 不等运算
    * 		也会对变量进行自动的类型转换，转会后再判断
    * 
    * ===
    * 		判断两个值是否全等，但是它不会进行自动类型转换
    * 		如果两个值的类型不同，直接返回false
    * 
    * !==	
    * 		不全等
    * 		和全等类似，也不会进行自动类型转换。
    *		两个值的类型不同，则直接返回false
    * 
    * 
    * 注意：
    * 		undefined 衍生于 null，所以这两个值做==时，返回true
    * 		
    * 
    * 
    * 	NaN不和任何值相等，包括它本身
    * 		所以即使一个变量的值是NaN，也无法通过==判断它是否为NaN
    * 		只能通过idNaN()函数来判断一个值是否为NaN
    */
    var b = NaN;
    document.write(isNaN(b));//true
script>

    • 条件运算符 ，也叫：三元运算符

      <script type="text/javascript">
    /**
    * 条件运算符也叫三元运算符
    *	语法：
    * 		条件表达式?语句1:语句2
    * ——执行过程：
    * 		条件运算符在执行时，首先对条件表达式进行判断
    * 		- 如果条件表达式为：true，执行语句1，返回执行结果
    * 		- 如果条件表达式为：false，执行语句2，返回执行结果
    * 		- 如果条件的表达式的求职结果是一个非布尔值：
    * 			会将其转换为布尔值之后再判断
    */

    var a = 30;
    var b = 140;
    var c = 80;
    //a>b?alert("a牛"):alert("b牛");

    //获取a和b中的最大值
    var max = a > b ? a : b;
    //alert(max);//40

    //获取a b c中的最大值
    max = max > c? max : c;
    //alert(max);//80

    //合并（不推荐使用，阅读较难）
    max = a>b? a>c?a:c : b>c?b:c;
    //即：max = a>b?(a>c?a:c):(b>c?b:c);
    //分析：如果a>b,则执行a>c?a:c这个表达式
    //		反之执行b>c?b:c
    alert(max);	
script>

  7. 运算符的优先级
    Javascript基础_第1张图片

    <script type="text/javascript">
    //运算符,   使用,可以分割多个语句，一般可以在声明多个变量的时候使用

    //使用,可以同时声明多个变量
    //var a , b , c;

    //可以同时声明多个变量并赋值
    var a=1 , b=2 , c=3 ; 
    //alert(a);//1


    /**
    * 运算符的优先级，跟数学一样：先乘除再加减....
    * js中有一个运算符优先级的表：表中越靠上的优先级越高
    * 						哪个级别高哪个先运算
    * 						如果优先级一样高，则从左往右按顺序算
    * 	这个表不需要记忆，如果遇到优先级不清楚的，可以使用()来改变优先级
    */

    var result = 1||2&&3
    document.write(result);//1
    //分析：&&的优先级更高先计算2&&3，都为真，返回后判断的3，1||3，1为true不再继续返回1

    //可以使用()的方式改变优先级
    result = (1||2)&&3
    alert(result);
    //分析：1||2在()中，1是true不再继续判断返回1
    //然后执行1&&3，都为true，返回最后一个判断的数3
script>

  8. 代码块

    <script type="text/javascript">
    /**
    * 我们的程序是一条一条语句构成的
    * 	语句是按照自上向下的顺序一条一条执行的
    * 
    * 在js中可以使用{}来为语句进行分组
    * 		同一个{}中的语句我们称为是一组语句，要么都执行，要么都不执行
    * 一个{}中的语句也成为：一个代码块。代码快后面不用再编写;了
    * 
    * JS中的代码块，只具有分组的作用，没有其他的用途
    */

    console.log("我是一个语句");
    document.write("我也是一个语句");
    {
         
    console.log("我在一个代码块中");
    document.write("我也在这个代码块中");
    }

    //代码块不是域，不具有分割作用。内部的在外部也可以访问
    {
         
    var a="我在代码块内部，但是外部也可以访问我";
    }
    alert(a);
script>

  9. 流程控制语句

    概述

    <script type="text/javascript">
    /**
    * 	流程控制语句
    * 		- JS中的程序是从上到下逐行执行的
    * 		- 通过流程控制语句可以控制程序执行流程，使程序根据一定条件来选择执行
    * 	
    * 	流程控制语句的分类：
    * 		1、条件判断语句
    * 		2、条件分支语句
    * 		3、循环语句
    * 
    * 	- if语句
    *	——语法一：
    * 		if(条件表达式)
    * 		  语句
    * 		if语句在执行的时候，会先对条件表达式进行求值判断，
    * 		如果条件表达式的值为true，执行if后面的语句
    * 		如果为false，则不会执行if后面的语句。
    * 
    * 		if语句智能控制其后面跟着的一条语句
    * 			如果希望if语句可以控制多条语句，可以将这些语句放到一个代码块中
    * 		if语句后面的代码块不是必须的，但是在开发中尽量写上代码块，即使if后面只有一条语句
    * 
    */

    var a = 11;

    /* 			if(a>10)
    document.write("a比10大");
    document.write("谁也管不了我"); */

    //放到代码块中可以被统一控制
    /* 			if(a>10){
    document.write("a比10大");
    document.write("谁也管不了我"); 
    } */

    if(a>10 && a<=20){
         
    document.write("a>10 并且a<=20");
    }		
script>

    • if语句（简写、参考java）

      if语句
	语法二：
		if(条件表达式){
			语句
		}else{
			语句
		}
语法三：
	if(条件表达式){
	
	}else if(条件表达式){
	
	}else{
	
	}

    • prompt()函数

      prompt()可以弹出一个提示框，该提示框中会带有一个文本框，用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，该字符串将会作为提示框输入的文字

用户输入的内容会作为函数的返回值返回，可以定义一个变量来接受该内容
var score = prompt("请输入。。。")

    • 条件分支语句

      条件分支语句，也叫：switch语句
	语法：
		switch(条件表达式){
			case 表达式:
				语句...
				break;
            case 表达式:
				语句...
				break;
			case 表达式:
				语句...
				break;
			case 表达式:
				语句...
				break;
			default:
				语句...
				break;
				//break;语句用来推出switch语句
		}
		
执行流程；
	switch..case..语句
		在执行时会一次将case后的表达式的值和switch后的条件表达式的值进行全等比较
			- 如果比较结果为true，则执行当前case后的代码，知道break结束
			- 如果为false，则继续向下比较。
			- 如果所有的case都为false，则只执行default后的语句
			
switch和if功能实际上有重复的，使用switch可以实现if的功能，使用if也能实现switch的功能，使用时：根据自己的习惯选择。

    • while循环

      while循环
	语法：
		while(条件表达式){
			语句。。。
		}
		
	while执行原理
		先对条件表达式进行判断
			-如果为true，则执行循环体
				循环体执行完毕后，继续进行判断
					如果为true，继续执行循环体，类推
            -如果为false，则终止循环
            
    可以在循环体内使用break;来退出循环
    
    do..while循环
    	语法：
    		do{
    		
    		}while();
        执行流程：
        	先执行一次循环体，一次循环完毕后对while进行判断，如果为true，则一直执行，知道while		中为false时终止循环

    • for语句：也是一个循环语句，也称为一个for循环

      for循环中，提供了三个表达式
语法
	for(初始化表达式;条件表达式;更新表达式){
		循环体
	}
	执行流程：
	- 执行初始化表达式，初始化容量
      	- 执行条件表达式，判断是否执行循环
      		如果为true，继续循环
      		如果false，终止循环
      	-每次循环完成之后执行更新表达式，更新之后继续判断为true继续执行，一直循环直到为false

    • break和continue关键字

      break关键字可以用来推出switch或循环语句
break会立即终止离他最近的那个循环

可以为循环语句创建一个label，来标识当前的循环
label：循环语句
使用break语句时，可以在break后面跟一个label，这样break就会终止指定的循环，而不是最近的。

continue关键字可以用来跳过当前循环，同样continue也是默只会对离他最近的循环起作用

  10. 计时器

    需要测试程序的性能时，在程序执行前，开启计时器。
console.time("计时器的名字")可以用来开启一个计时器
//需要一个字符串作为参数，这个字符串将会作为计时器的标识

//开启计时器
console.time("text");
	所需执行的程序
//终止计时器
console.timeEnd("计时器的名字")用来停止一个计时器，需要一个计时器的名字作为参数。
console.timeEnd("text");

  11. 对象
    Javascript基础_第2张图片
    Javascript基础_第3张图片

    <script type="text/javascript">
    /**
    * JS中数据类型：
    * String字符串、Number数值、Boolean布尔值、Null空值、Undefined未定义
    * 		以上这五种类型属于基本数据类型，以后我们看到的值
    * 		，只要不是以上的5种，就都是对象
    * Object 对象
    * 
    * 基本数据类型都是单一的值"hello"、123、true，值和值之间没有任何联系
    * 
    * 在JS中来表示一个人的信息（name gender age）
    * 	var name="孙悟空"
    *  var gender="男"
    * 	var age="18"
    * 如果使用基本数据类型的数据，我们所创建的变量都是独立，不能成为一个属性。
    * 
    * 对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。
    * 
    * 对象的分类：
    * 		1、内建对象
    * 			- 由ES标准中定义的对象，在任何的ES视线中都可以使用
    * 			  比如：Math、String、Number、Boolean、Function、Object....
    * 		2、宿主对象
    * 			- 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
    * 			  比如：BOM:浏览器对象模型、DOM:文档对象模型。这是两组对象
    * 			  如：console.log()、document.write()，
    *	 			这两个对象用的时候不用创建，都是浏览器来提供的。
    * 		3、自定义对象
    * 				- 由开发人员自己创建的对象。
    * 
    * 
    */


    //创建对象
    /**
    * 使用new关键字调用的函数，是构造函数constructor，构造函数是专门用来创建对象的函数
    * 使用typeof 检查一个对象的时候，会返回object
    */
    var obj = new Object();
    //document.write(obj);//[object Object]
    //document.write(typeof obj)//object



    /**
    * 在对象中保存的值称为属性
    * 在对象中添加属性语法：对象.属性名 = 属性值;
    */
    //向对象中添加一个name属性
    obj.name = "孙悟空";
    //向对象中添加一个gender属性
    obj.gender = "男";
    //向对象中添加一个age属性
    obj.age = "18";
    //console.log(obj);// {name: "孙悟空", gender: "男", age: "18"}



    /**
    * 读取对象中的属性，语法：对象.属性名
    * 
    * 注意：如果读取对象中没有的属性，不会报错而是会返回undefined
    */
    document.write(obj.age);
    console.log(obj.gender);

    //读取对象中没有的值，返回：undefined。
    //console.log(obj.hello);//undefined



    /**
    * 修改对象的属性值
    * 语法：对象.属性名 = 新值。
    */

    obj.name = "tom";
    document.write(obj.name);


    /**
    * 删除对象的属性：
    * 	语法：delete 对象.属性名
    */
    delete obj.name;
    document.write(obj.name);//undefined
script>

    • 属性名和属性值

      <script type="text/javascript">
    /**
    * 向对象中添加属性
    * 	属性名:
    * 	- 对象的属性名不强制要求遵守标识符的规范，什么名字都可以使用
    * 	- 但是我们使用时还是尽量按照标识符的规范去命名
    */

    var obj = new Object;
    obj.name="孙悟空";
    obj.var="hello";
    console.log(obj.var);	//"hello"

    /**
    * 如果要使用特殊的属性名，不能采用.的方式
    * 	需要使用另一种方式：
    * 		语法：对象["属性名"]=属性值
    * 	读取时也需要采用这种方式
    * 
    */
    obj["123"] = 123;
    document.write(obj["123"]);//123

    /**
    * 使用[]这种形式去操作属性，更加的灵活
    * 在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性。
    */

    var n ="123";
    console.log(obj["123"]);//123
    console.log(obj[n]);	//123

    /**
    * 属性值：
    * 	JS对象的属性值，可以是任意的数据类型
    */

    obj.test = true;
    document.write(obj.test);//true

    obj.test = null;	//null
    document.write(obj.test);

    obj.test= undefined;
    document.write(obj.test);//undefined

    var obj2 = new Object();
    obj2.name="猪八戒";
    //将obj2设置为obj的属性
    obj.test = obj2;
    console.log(obj.test);// {name: "猪八戒"}
    console.log(obj.test.name);//猪八戒

    /**
    * in运算符
    * 	- 通过该运算符可以检查一个对象中是否含有指定的属性
    * 		如果有则返回true，没有则返回false
    * 	- 语法：
    * 		"属性名" in 对象
    */

    console.log("test2" in obj);	//false	
    console.log("test" in obj);		//true
    console.log("name" in obj);		//true
script>

  12. 基本和引用数据类型

    <script type="text/javascript">
    /**
    * 基本数据类型
    * 	String、Number、Boolean、Null、Undefined
    * 
    * 	引用数据类型
    * 	Object
    * 
    * JS中的变量都是保存到栈内存中的
    * 		基本数据类型的值直接在栈内存中存储
    * 		值与值之间是独立的，修改一个变量不会影响其他变量
    */

    var obj = new Object();
    obj.name = "sunsun";
    var obj2 = obj;	//这里是把obj中保存的内存地址复制了一份给了obj2，实际上他们都指向同一个对象。

    console.log(obj.name);//sunsun
    console.log(obj2.name);//sunsun
    //改变obj的name
    obj.name="zhuzhu"
    //obj与obj2指向同一个对象
    console.log(obj.name);//zhuzhu
    console.log(obj2.name);//zhuzhu

    //设置obj2为null
    obj2 = null;
    console.log(obj2);//null
    console.log(obj);//{name: "zhuzhu"}

    /**
    * 	==
    * 		- 比较两个基本数据类型的值的时候，就是比较值
    *  	- 比较两个引用数据类型时，他比较的是两个对象的内存地址。
    * 			如果两个对象的属性以及值相等，但是内存地址不同，就会返回false
    */
    var obj3 = new Object();
    var obj4 = new Object();
    obj3.name="ss";
    obj4.name="ss";
    console.log(obj3);// {name: "ss"}
    console.log(obj4);// {name: "ss"}
    console.log(obj3 == obj4);//false
script>

  13. 对象字面量

    <script type="text/javascript">
    /**
    * 创建对象的两种方式：
    * 		var obj = new Object();
    * 使用对象字面量来创建一个对象
    * 		var obj = {};
    */
    var obj = {
         };
    obj.name = "ss";
    console.log(obj);//{name:"ss"}

    /**
    * 使用对象字面量，可以再创建对象时，直接指定对象中的属性
    *  	语法：{属性名:属性值，属性名:属性值.....}
    * 	对象字面量的属性名可以加引号也可以不加，建议不加。
    * 		如果需要使用一些特殊的字符作为属性名时，则必须加引号
    * 
    * 	属性名和属性值是一组一组的名值对结构，
    * 		名和值之间使用：连接，多个名值对之间使用,隔开
    * 		如果一个属性之后没有其他的属性了，就不要写。
    */

    var obj2 = {
         
        name:"猪八戒",
        age:"28",
        gender:"男",
        test:{
         name:"沙和尚"}
    }

    console.log(obj2);//{name: "猪八戒", age: "28", gender: "男", test: {…}}
    console.log(obj2.test);//{name: "沙和尚"}

script>

函数

  1. 函数

    <script type="text/javascript">
    /**
    * 函数
    * 	- 函数也是一个对象
    * 	- 函数中可以封装一些功能(代码)，在需要时也可以执行这些功能。(代码)
    * 	- 函数中可以保存一些代码在需要的时候调用
    *  - 使用typeof检查一个函数对象时，会返回function
    */

    //创建一个函数对象
    //可以将要封装的代码以字符串的形式传递给构造函数。
    //实际开发中，很少使用构造函数来创建一个函数对象。
    var fun = new Function("console.log('hello 这是我的第一个函数')");

    //封装到函数中的代码不会立即执行，函数中的代码会在函数调用的时候执行。
    //调用函数语法：函数对象()，当调用函数时，函数中封装的代码回按照顺序执行。
    fun();//hello 这是我的第一个函数
    fun.hello = "nihao";
    console.log(fun.hello);//你好

    /**
    * 使用函数声明来创建一个函数
    * 	语法：
    * 		function 函数名([形参1，形参2,....形参N]){
    语句......
    }
    */

    function fun2(){
         
    console.log("这是我的第二个函数");
    alert("哈哈哈哈");
    	document.write("dfdkfsdlfjsdflksdj");
    }
    //console.log(fun2);
    fun2();

    /**
    * 使用函数表达式来创建一个函数
    * var 函数名 = function([形参1，形参2,....形参N]){
    语句......
    };
    */
    var fun3 = function(){
         
    	console.log("我是匿名函数中封装到代码");
    };
    fun3();
script>

  2. 函数的参数

    <script type="text/javascript">


    /**
    * 定义一个用来求两个数和的函数
    * 	可以在函数的()中指定一个或多个参数(形式参数)
    * 	多个形参之间使用,隔开   声明形参就相当于在函数内部声明了对应的变量，但是并不赋值
    */
    function sum(a,b){
         
        console.log(a);
        console.log(b);
        console.log(a+b);
    }


    /**
    * 在调用函数的时候，可以在()中传入实际参数(实参)
    * 	实参将会赋值给函数中对应的形参
    */
    sum(1,2);	//3
    sum(123,456);	//579



    /**
    * 调用函数时，解析器不会检查实参的类型。函数的实参可以是任意的数据类型
    * 	所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对参数进行类型的检查
    * 
    */
    sum(123,"hello");//123hello
    sum(true,false);//1



    /**
    * 调用函数时，解析器也不会检查实参的数量
    * 多余参数不会被赋值
    * 如果实参的数量少于形参的数量，则没有对应实参的形参是undefined
    */
    sum(123,456,"hello",true,null);//579
    sum(123);//undefined

script>

  3. 返回值

    <script type="text/javascript">
    /**
    * 创建一个函数，用来计算三个数的和
    * 
    * 可以使用return 来设置函数的返回值
    * 	语法：	
    * 		return 值
    * 		return后面可以跟任意类型的值
    * 
    * 	return后的值将会作为函数的执行结果返回
    * 		可以定义一个变量接收该结果。
    * 
    * 	并且函数中return后的语句都不会执行
    * 
    * 如果return语句后不跟任何值就相当于返回一个undefined
    * 	如果函数中不写return，则也会返回undefined
    */
    function sum(a, b ,c){
         
    	var d = a + b + c;
    	return d;
    }

    //调用函数
    //变量result的值就是函数的执行结果，函数返回什么result的值就是什么
    var result = sum(4,5,6);
    console.log(result);//15


    var result2 = alert("hello");
    console.log(result2);//undefined，说明alert函数没有返回值
script>

  4. 实参可以是函数也可以是对象

    <script type="text/javascript">
    /**
    * 实参可以是一个对象，也可以是一个函数
    * 
    */
    function fun(a){
         
   	 	console.log(a);
    }
    fun(123);

    fun(function(){
         });// function (){} 

    /**
    * fun()
    * 	- 调用函数
    *  - 相当于使用函数的返回值
    * 
    * fun
    * 	- 函数对象
    *  - 相当于直接使用函数对象
    */
script>

  5. 函数的返回值

    <script type="text/javascript">
    /**
    * 使用break可以退出当前循环
    *	 break;
    * 
    * 使用continue用于跳过当前循环
    * 	continue;
    * 
    * 使用return可以结束整个函数
    * 	retrun;
    */

    /**
    * 返回值可以是任意的数据类型
    * 	也可以是一个对象，或是一个函数
    */
script>

  6. 立即执行函数

    <script type="text/javascript">
    /**
    * 函数对象();
    * 		
    * 	立即执行函数
    * 		函数定义了以后，立即被调用，这种函数叫做立即执行函数
    * 立即执行函数往往只会执行一次
    */

    //使用()将匿名函数圈起来表示一个整体，然后再在最后面加一个()，即会立即执行。
    (function(){
         
    	alert("我是一个匿名函数");
    })();

    //后面的()还可以为匿名函数传递参数
    (function(a,b){
         
    	alert(a+b);
    })(123,456);
script>

  7. 方法

    <script type="text/javascript">
    //创建一个对象
    var obj = new Object();
    //向对象中添加属性
    obj.name = "孙悟空";
    obj.age = 18;

    //对象的属性值可以是任何数据的类型，也可以是个函数
    obj.printName = function(){
         
    	console.log(obj.name);
    }

    //调用该方法（函数作为对象的属性即为：方法）
    obj.printName();
    //调用函数
    //fun();


    /**
    * 函数也可以成为是对象的属性：
    * 	如果一个函数作为对象的属性保存，那么我们称这个函数是这个对象的方法
    * 调用这个函数就说调用对象的方法（method）
    * 
    * 但是他只是名称上的区别，没有其他区别。
    */

    //调用console对象的log()方法
    console.log()
    //调用document对象的方法
    document.write();

    var obj2 = {
         
        name:"猪八戒",
        age:18,
        printName:function(){
         
            console.log(obj2.name);
        }
    };
    //调用方法
    obj2.printName();

script>

  8. 枚举对象中的属性

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

  9. 全局作用域

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

  10. 变量、函数 的声明提前

    <script type="text/javascript">
			/**
			 * 变量的声明提前
			 * 		- 使用var关键字声明的变量，会在所有代码执行之前被声明（但不会赋值）
			 * 		  但如果声明变量时不使用var关键字，则变量不会被声明提前
			 * 
			 * 函数的声明提前
			 * 		- 使用函数声明形式创建的函数function函数(){}
			 * 		      会在所有的代码执行之前就被创建，所以我们可以在函数声明前就调用函数
			 * 		- 使用函数表达式创建的函数var fun2 = function{}
			 * 			  变量fun2声明提前了，但是函数不会被声明提前，所以不能在声明前被调用
			 */
			 
			 //变量的声明提前
			console.log(a);//undefined
			var a = 123;
			
			//函数的声明提前
			fun();	//fun函数
			//fun2();// Uncaught TypeError: fun2 is not a function
			
			//函数声明，会被提前
			function fun(){
         
				console.log("fun函数");
			}
			
			//函数表达式，不会被提前创建
			var fun2 = function(){
         
				console.log("fun2函数");
			}
script>

  11. 函数作用域

    <script type="text/javascript">
			/**
			 * 函数作用域
			 * 		- 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
			 * 		- 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
			 * 		- 在函数作用域中可以访问到全局作用域中的变量
			 * 			函数作用域中的变量只能在函数作用域中使用，外部无法使用。
			 * 		- 当在函数作用域操作一个变量时，他会现在自身作用域中寻找，如果有就直接使用
			 * 			如果没有则向上寻找，直到找到全局作用域，如果全局变量作用域中依然没有找到，则会报错ReferenceError
			 * 		- 在函数中要访问全局变量可以使用window对象
			 * 
			 * 
			 * 函数作用域中也有声明提前的特性：
			 * 		使用var关键字声明变量，会在函数中所有的代码块执行之前被声明。	
			 * 		函数声明也会在函数中所有的代码执行之前执行。
			 * 
			 * 在函数中，不使用var关键字声明的变量都会成为全局变量
			 * 
			 * 定义形参就相当于在函数作用域中声明了变量
			 */
			
			//创建一个变量
			var a = 10
			function fun(){
         
				var a = "函数中的变量a";
				console.log(a);//函数中的变量a
			}
			
			fun();
script>

  12. this

    <script type="text/javascript">
			/**
			 * 	解析器再调用函数时每次都会像函数内部传递进一个隐含的参数，这个隐含的参数就是this，
			 * 	this指向的是一个对象，这个对象我们称为函数执行的上下文对象
			 *  根据函数的调用方式不同，this会指向不同的对象：
			 * 		- 以函数的形式调用时，this永远都是window
			 * 		- 以方法的形式调用时，this就是调用方的那个对象
			 * 
			 * 	根据函数的调用方式的不同，this会指向不同的对象
			 */
			
			function fun(){
         
				console.log(this);
			}
			fun();
			
			//创建一个对象
			var obj ={
         
				name:"孙悟空",
				printName:fun
			}
			
			obj.printName();//object对象
script>

  13. 使用工厂方法创建对象

    <script type="text/javascript">
			/**
			 * 使用工厂方法创建对象
			 * 	通过该方法可以大批量的创建对象
			 */
			function createObject(name,age,gender){
         
				//创建一个新的对象
				var obj = new Object();
				
				//向对象中添加属性
				obj.name=name;
				obj.age=age;
				obj.gender=gender;
				obj.printName = function(){
         
					alert(this.name);
				}
				
				//将新的对象返回
				return obj;
			}
			var obj1 = createObject("猪八戒",28,"男");
			var obj2 = createObject("白骨精",18,"女");
			var obj3 = createObject("蜘蛛精",20,"女");
			console.log(obj1);
			console.log(obj2);
			console.log(obj3);
			
			obj1.printName();
    
    			/**
			 * 使用工厂创建的对象，使用的构造方法都是Object，所以创建的对象都是Object这个类型
			 * 	就导致我们无法区分出哪个对象是人对象，哪个对象是动物对象
			 * 
			 */
			//用来创建狗对象
			function createDog(name,age){
         
				var obj = new Object();
				obj.name = name;
				obj.age = age;
				obj.sayHello = function(){
         
					alert("汪汪~~~");
				}
				return obj;
			}
			
			//创建一个狗对象
			var dog = createDog("旺财",5);
			console.log(dog);
script>

  14. 构造函数

    <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,"男"); 
			console.log(per);
			
			var dog = new Dog();
			console.log(dog);
			
			/**
			 * 	使用instanceof可以检查一个对象是否属于某个类型（类）
			 * 语法：
			 * 		对象 instanceof 构造函数
			 * 		如果是返回：true，反之false
			 */
			console.log(per instanceof Person);//true
			console.log(dog instanceof Person);//false
			
			/**
			 * Object是所有类的根，所以任何对象都是Object类型的
			 */
			console.log(per instanceof Object);//true
script>

  15. 构造函数的修改

    <script type="text/javascript">
			/**
			 * 创建一个Person构造函数
			 * 		- 在Person构造函数中，为每一个对象都添加了一个printName方法
			 * 		  目前我们的方法是在构造函数内部创建的。也就是构造函数每执行一次
			 * 			就会创建一个新的printName方法。
			 * 		  这就导致了构造函数执行一次就会创建一个新的方法。
			 * 		 执行10000次就会创建10000个新的方法，而10000个方法都是一模一样的
			 * 		这是完全没有必要的，完全可以所有的对象共享一个方法。
			 */
			
			function Person(name,age,gender){
         
				this.name = name;
				this.age = age;
				this.gender = gender;
				//向对象中添加一个方法
				//this.printName = fun;
/* 				this.printName = function(){
					alert("hello，我是"+this.name);
				} */
			}
			//将printName方法定义在全局作用域中
			/**
			 * 出现的问题：将函数定义在全局作用域，污染了全局作用域的命名空间
			 * 	而且定义在全局作用域中也很不安全
			 */
/* 			function fun(){
				alert("hello，我是"+this.name);
			} */
			//向原型中添加printName()方法
			Person.prototype.printName = function(){
         
				alert("hello，我是"+this.name);
			}
			
			
			//创建一个Person实例
			var per = new Person("孙悟空",18,"男");
			per.printName();
script>

原型

Javascript基础_第4张图片

  1. 原型

    <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();
			console.log(mc.__proto__ == MyClass.prototype);//true
			
			console.log(mc.a);//123
			console.log(mc.sayHello());
script>

  2. 原型对象

    <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);//true
			
			//可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
			//使用该方法只有对象自身中含有该属性时，才会返回true，反之即使原型中有该属性，也返回false
			console.log(mc.hasOwnProperty("name"));//false
			console.log(mc.hasOwnProperty("age"));//true
			
			/**
			 * 原型对象也是对象，所以他也有原型
			 * 	当我们使用一个对象的属性或者方法时，会先在自身找，自身有，则直接使用。
			 * 	自身没有，去原型对象中找，如果原型对象中有，则使用
			 * 	如果没有则去原型对象的原型中找,直到找到Object对象的原型。
			 * 	Object对象的原型没有原型，如果在Object中依然没有找到，则返回undefined
			 */
			//在自身找
			console.log(mc.hasOwnProperty("hasOwnProperty"));//false
			//在原型中找
			console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));//false
			//在原型的原型中找
			console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//true
script>

  3. toString 方法

    <script type="text/javascript">
			function Person(name,age,gender){
         
				this.name = name;
				this.age = age;
				this.gendr = gender;
			}
			
			//创建一个Person实例
			var per = new Person("孙悟空",18,"男");
			
			//当我们直接在页面中打印一个对象时，事实上是输出对象的toString()方法的返回值
			//如果我们希望在输出对象时不输出[object,Object]，可以调用对象的toString方法
			console.log(per);//[object Object] 
			console.log(per.toString());//{"age":18,"gendr":"男","name":"孙悟空"} 
			
			//修改per 的toString 方法
/* 			per.toString = function(){
				return "我是一个快乐的小Person";
			} */
			console.log(per);//[object Object] 
			console.log(per.toString());//"我是一个快乐的小Person"
			
			//修改Person原型的同toString
			Person.prototype.toString = function(){
         
				return "我是原型中的toString";
			}
			console.log(per.toString());//"我是原型中的toString"
script>

  4. 垃圾回收机制

    <script type="text/javascript">
			/**
			 * 垃圾回收（GC）
			 * 	- 就像人生活的时间长了会产生垃圾一样，长须运行过程中也会产生垃圾
			 * 	  这些垃圾积攒过多以后，会导致程序运行的速度过慢。所以我们需要一个垃圾回收机制
			 * 	  来处理程序运行过程中产生的垃圾
			 * 
			 *  - 当一个对象没有任何的变量或属性对他进行引用，此时我们将永远无法操作该对象
			 * 		此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行过慢
			 * 		所以这种垃圾必须进行清理
			 * 
			 *  - 在JS中拥有自己的垃圾回收机制，会自动将这些垃圾对象从内存中销毁。
			 * 		我们不需要也不能进行垃圾回收的操作
			 * 
			 *  - 我们需要做的只是要将不再使用的对象设置为null即可。
			 */
script>

  5. 数组

    <script type="text/javascript">
			/**
			 * 内建对象
			 * 宿主对象
			 * 自定义对象
			 * 
			 * 数组（Array)
			 * 	- 数组也是一个对象
			 * 	- 她和我们普通对象功能类似，也是用来存储一些值的
			 * 	  不同：普通对象是使用字符串作为属性名
			 * 	  数组：使用数字类作为索引操作元素
			 * 
			 *  - 索引：从0开始，以1递增的整数。
			 *  - 数组的存储性能比普通对象更好，在开发中我们经常使用数组来存储一些数据。
			 * 
			 */
			
			//创建数组对象
			var arr = new Array(); 
			console.log(typeof arr);//object
			
			//向数组中添加对象。语法：数组[索引] = 值。
			arr[0] = 10;
			arr[1] = 20;
			arr[2] = 33;
			
			//读取数组中的元素。语法：数组[索引] 
			console.log(arr);//{"0":10,"1":20,"2":33,"length":3} 
			console.log(arr[2]);//3
			
			//如果读取不存在的索引，他不会报错，而是返回：undefined
			console.log(arr[3]);//undefined
			
			/**
			 * 使用length属性获取数组的长度（数组中元素的个数）
			 * 	语法：数组.length
			 * 
			 * 对于连续的数组，使用legth可以获取到数组的长度（元素的个数)
			 * 	
			 * 对于非连续的数组，使用length会获取到数组的最大索引+1
			 * 	没有添加的位置会空出来，浪费内存，所以尽量不要创建非连续数组
			 */
			console.log(arr.length);3
			
			var arr2 = new Array();
			arr2[10] = 11;
			console.log(arr2);//{"10":11,"length":11}
			console.log(arr2.length);//11
			
			/**
			 * 修改length
			 * 	- 如果修改的lenth大于原长度，则多余部分会空余出来
			 * 	- 如果修改的lenth小于原长度，则多余部分会删除。
			 */
			
			//arr2.length = 5;
			//console.log(arr2);// {"length":5}
			
			//向数组的最后一个位置添加元素
			//语法：数组[数组.length] = 值;
			arr[arr.length] = 70;
			arr[arr.length] = 80;
			arr[arr.length] = 90;
			//{"0":10,"1":20,"2":33,"3":70,"4":80,"5":90,"length":6}
script>

  6. 数组字面量

    <script type="text/javascript">
			/**
			 * 使用字面量创建数组
			 *  语法：[] 
			 *  var arr = [];
			 */
			
			//使用字面量创建数组时，可以在创建时就指定数组中的元素
			var arr = [1,3,5,10,20];
			console.log(arr);// {"0":1,"1":3,"2":5,"3":10,"4":20,"length":5}
			
			//使用构造函数创建数组时，也可以同时添加元素。将要添加的元素作为构造方法的参数传递
			//元素之间使用,隔开
			var arr2 = new Array(9,34,42);
			console.log(arr2);//{"0":9,"1":34,"2":42,"length":3}
			
			//创建一个数组，数组中只有一个元素10
			arr3 =[10];
			console.log(arr3);// {"0":10,"length":1} 
			
			//创建一个长度为10的数组
			var arr4 = new Array(10);
			console.log(arr4);//{"length":10}
			
			//数组中的元素可以是任意类型
			var arr5 = ["hello",1,true,null,undefined];
			document.write(arr5); //hello,1,true,,
			
			//数组中也可以放对象
			var obj = {
         name:"孙悟空"};
			arr5[arr.length] = obj;
			
			console.log(arr5[5],name);//{"name":"孙悟空"}
			
			//也可以是一个函数
			arr6 = [function(){
         },function(){
         }]
			console.log(arr6);//{"0":"function (){}","1":"function (){}","length":2}
			
			//数组中也可以放数组,这种数组称为：二维数组 
			arr7 = [[1,2,3],[4,5,6],[7,8,9]];
			console.log(arr7);
			//{"0":{"0":1,"1":2,"2":3,"length":3},"1":{"0":4,"1":5,"2":6,"length":3},"2":{"0":7,"1":8,"2":9,"length":3},"length":3}		
		script>

  7. 数组的方法

    <script type="text/javascript">

    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚"];

    /**
			 * push()
			 * 	- 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
			 *  - 可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾
			 *  - 该方法会将数组新的长度作为返回值返回。
			 * 
			 */

    var result = arr.push("唐僧","蜘蛛精","白骨精");
    console.log(arr);//{"0":"孙悟空","1":"猪八戒","2":"沙和尚","3":"唐僧","4":"蜘蛛精","5":"白骨精","length":6} 
    console.log("result="+result);//result=6 

    /**
			 * pop()
			 *  - 该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回
			 */

    result = arr.pop();//白骨精
    console.log(arr);//{"0":"孙悟空","1":"猪八戒","2":"沙和尚","3":"唐僧","length":4}
    console.log(result);  


    /**
			 * unshift();
			 * 	- 像数组开头添加一个或多个元素，并返回新的数组长度。
			 *  - 向前面插入元素以后，其他的元素会依次调整。
			 *  - 返回值为：添加元素后数组的长度
			 */
    var aa = arr.unshift("牛魔王");
    console.log(arr);//{"0":"牛魔王","1":"孙悟空","2":"猪八戒","3":"沙和尚","4":"唐僧","5":"蜘蛛精","length":6}
    console.log(aa);//6
    /**
			 *  shift();
			 *  - 可以删除数组的第一个元素，并将被删除的元素作为返回值返回。
			 */
    result = arr.shift();
    console.log(arr);//{"0":"孙悟空","1":"猪八戒","2":"沙和尚","3":"唐僧","4":"蜘蛛精","length":5}
    console.log(result);// 牛魔王
script>

  8. 数组的遍历

    <script type="text/javascript">

    //创建一个数组
    var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
    //遍历数组：就是把数组中所有的元素取出来
    for(var i=0 ;i<arr.length;i++){
         
        console.log(arr[i]);
    }
script>

  9. forEach

    <script type="text/javascript">
			/**
			 * 一般我们都是使用for循环去遍历数组
			 * JS中还为我们提供了一个方法，遍历数组
			 *  forEach()
			 * 	- 这个方法只支持IE8以上的浏览器
			 */
			
			//创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
			
			
			/**
			 * forEach()方法需要一个函数作为参数
			 *  - 像这种参数，由我们创建但不是由我们调用的，我们称之为回调函数
			 *  - 数组中有几个元素就会执行几次。每次执行时，浏览器会将遍历到的元素以
			 *   实参的形式传递进来，我们可以来定义形参，来读取这些内容.
			 *  - 浏览器会在回调函数中传递三个参数。
			 * 		第一个参数：就是当前正在遍历的元素。
			 * 		第二个参数：当前正在遍历的元素的索引
			 *  	第三个参数：就是正在遍历的数组。
			 */
			arr.forEach(function (name,index,obj){
         
				console.log(name+"  "+index+"  "+obj);
			});
			/*	
				孙悟空  0  孙悟空,猪八戒,沙和尚,唐僧 at 41、forEach增强for循环.html:29
				猪八戒  1  孙悟空,猪八戒,沙和尚,唐僧 at 41、forEach增强for循环.html:29
				沙和尚  2  孙悟空,猪八戒,沙和尚,唐僧 at 41、forEach增强for循环.html:29
				唐僧  3  孙悟空,猪八戒,沙和尚,唐僧	
			 */
script>

  10. 数组方法

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

  11. 数组去重

    <script type="text/javascript">
			//创建一个数组
			var arr = [1,2,3,2,2,2,2,2,1,2,2,2,1,3,3,1,3,4,2,5,6,5,8,74,1,4,45,5,5,5,5,566];
			//去除数组中重复的数字
			
			for(var i=0;i<arr.length;i++){
         
				//取出数组中的每一个元素
				for(var j=i+1;j<arr.length;j++){
         
					//让每一次传进来的数组元素与他之后的每个元素进行比较，相同的则删除重复出现的元素
					if(arr[i] == arr[j]){
         
						//相同则删除
						arr.splice(j,1);
						//当删除了当前j所在的元素后，后面的元素会自动补位。
						//此时如果下一个元素跟当前元素是相同的，补位后不会被比较，就会出现重复的数字
						j--
						//此时可以让k-1，然后重新跟这个元素比较，就不会再出现重复的东西了。 
					}
				}
			}
			document.write(arr);//1,2,3,4,5,6,874,45,566
script>

  12. 数组的剩余方法

    <script type="text/javascript">
			/**
			 * concat() 可以连接两个或多个数组，并将新的数组返回
			 *  - 该方法不会对原数组产生影响
			 */
			var arr = [1,2,3];
			var arr2 = [4,5,6];
			var result = arr.concat(arr2);
			console.log(result);//{"0":1,"1":2,"2":3,"3":4,"4":5,"5":6,"length":6}
			
			var arr3 = ["二郎神","哮天犬"];
			var result = arr.concat(arr2,arr3,"天王老儿","小鸡炖蘑菇");
			console.log(result);
			// {"0":1,"1":2,"2":3,"3":4,"4":5,"5":6,"6":"二郎神","7":"哮天犬","8":"天王老儿","9":"小鸡炖蘑菇","length":10}
			
			
			/**
			 * join()方法
			 * 	- 该方法可以将数组转换为一个字符串
			 * 	- 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
			 * 	- 在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
			 * 	- 如果不指定连接符，则默认使用,连接。
			 *  - 如果想他们拼串：join("")，可以传一个空串进去
			 */
			arr=["张三","李四","王五","赵六"];
			result = arr.join("and");
			console.log(result);//张三and李四and王五and赵六
			console.log(typeof result);//String
			
			result = arr.join("@@___@@");
			console.log(result);//张三@@___@@李四@@___@@王五@@___@@赵六
			
			
			/**
			 * reverse()
			 * 	 - 该方法用来反转数组（前面的转去后面，后面的去前面）
			 *   - 该方法会直接修改原数组
			 * 	
			 */
			arr.reverse();
			console.log(arr);//{"0":"赵六","1":"王五","2":"李四","3":"张三","length":4}
			
			/**
			 * sort()
			 * 	- 可以用来对数组中的元素进行排序
			 *  - 也会对原数组产生影响，默认会按照Unicode编码进行排序
			 */
			arr =["b","d","a","e","c"];
			arr.sort();
			console.log(arr);//{"0":"a","1":"b","2":"c","3":"d","4":"e","length":5}
			
			/**
			 * 即使对于纯数字的数组，使用sort方法排序时，也会按照Unicode编码来排序
			 * 对数字进行排序时，可能会得到错误的信息
			 */
			arr = [2,5,3,6,11,8,64];
			arr.sort();
			//document.write(arr);//11,2,3,5,6,64,8
			
			/**
			 * 对数字排序时，我们可以自己来指定排序规则
			 *  我们可以在sort()添加一个回调函数，来指定排序规则
			 * 		回调函数需要定义两个形参
			 * 		浏览器会分别使用数组中的元素作为实参去调用回调函数
			 * 		使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前面
			 * 	 - 浏览器会根据回调函数的返回值来决定元素的顺序
			 * 		如果返回一个大于0的值，则元素会交换位置
			 * 		如果返回一个小于0的值，则元素位置不变。
			 * 		如果返回一个等于0的值，也不交换位置
			 * 
					//升序排列
					return a-b;
					//如果a>b，则返回正数，交换位置；
					//如果a
			
/* 			arr.sort(function(a,b){	
				//从小到大
				if(a>b){
					return 1;
				}else if(ab){
					return -1;
				}else if(a
			
			
			//优化
			arr.sort(function(a,b){
         
				//升序排列
				return a-b;
				//如果a>b，则返回正数，交换位置；
				//如果a
				//如果a=b，返回0，位置不变
				
				//反之，就是降序排列
				//return b-a;
			})
			document.write(arr);//2,3,5,6,8,11,64
script>

  13. 函数对象的方法：call和apply

    <script type="text/javascript">
			/**
			 * caall()和apply()
			 *  - 这两个方法都是函数对象的方法，需要通过函数对象来调用。
			 *  - 当对函数调用call()和apply()时都会调用函数执行
			 *  
			 *  - 调用call()和apply()可以将一个对象指定为第一个参数
			 * 	 此时这个对象将会称为函数执行时的this
			 * 
			 *  - call()方法可以将实参在对象之后依次传递
			 *  - apply()方法需要将实参封装到一个数组中统一传递。
			 * 
			 *  - this的情况
			 * 	  1、以函数的形式调用，this永远都是window
			 * 	  2、以方法的形式调用，this时调用方法的对象
			 *    3、以构造函数形式调用，this是新创建的哪个对象
			 * 	  4、使用call和apply调用时，this是指定的那个对象
			 */
/* 			function fun(){ 
				console.log(this);
			} */
			fun.call();//window对象
			fun.apply();//window对象
			
			var obj ={
         
				name:"obj",
				printName:function(){
         
					alert(this.name);
				}
			};
			var obj2={
         
				name:"obj2"
			}
			//fun.call(obj);//object对象obj
			//fun.apply(obj);//object对象obj
			
			//obj.printName.apply(obj2);//obj2
			
			function fun(a,b){
         
				console.log("a:"+a);
				console.log("b:"+b);
			}
			
			//  - call()方法可以将实参在对象之后依次传递
			//  - apply()方法需要将实参封装到一个数组中统一传递。
			//fun.call(obj,1,2); //a:1、b:2
			fun.apply(obj,[2,3]);//a:2、b:3
			
script>

  14. arguments类数组对象

    <script type="text/javascript">
			/**
			 * 在调用函数时，浏览器每次都会传递两个隐含的参数：
			 * 		1、函数的上下文对象this
			 * 		2、封装实参的对象arguments
			 * 			- arguments是一个类数组对象
			 * 				他也可以通过索引来操作对象，也可以获取长度
			 * 			- 在调用函数时，我们所传递的参数都会在arguments中保存
			 *  		- arguments.length可以用来获取实参的长度
			 * 			- 我们即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦。
			 * 				  arguments[0] 表示第一个实参
			 * 				  arguments[1] 表示第二个实参
			 * 			- 它里面有一个属性叫：callee
			 * 			      这个属性对应一个函数对象，就是当前正在执行的函数的对象
			 */
			
			function fun(){
         
				//console.log(arguments);
				
				//方法Array.isArray()，判断是否是一个数组对象
				console.log(Array.isArray(arguments));//false

			}  
			fun();//false
			
			
			//arguments.length可以用来获取实参的长度
			function fun2(){
         
				console.log(arguments.length);
			}
			fun2("hello");//1
			
			
			//arguments[0] 表示第一个实参，arguments[1] 表示第二个实参
			//可以定义形参，也可以不定义
			function fun3(){
         
				console.log(arguments[0]);
				console.log(arguments[1]);
				console.log(arguments[2]);
			}
			fun3("hello",true);//hello、true、undefined
			
			
			//arguments的callee属性对应一个函数对象，就是当前正在执行的函数的对象
			function fun4(){
         
				console.log(arguments.callee);
				console.log(arguments.callee == fun4);//true
			}
			fun4("hello");//function fun4(){ console.log(arguments.callee); } 
			
script>

Date对象、Math对象、包装类、String相关内容

  1. Date对象

    <script type="text/javascript">
			/**
			 * Date对象
			 * 	  - 在JS中使用Date对象来表示一个时间
			 */
			
			//创建一个date对象
			//如果直接使用构造函数创建一个Date对象，则会封装当前代码执行时间
			var d = new Date();
			console.log(d);	//Tue Mar 30 2021 23:12:01 GMT+0800
			
			//创建一个指定的指定对象。需要在构造函数中传递一个表示时间的字符串作为对象
			//日期格式："月/日/年 时:分:秒"
			var d2 = new Date("03/30/2021 23:19:30");	
			console.log(d2);//Tue Mar 30 2021 23:19:30 GMT+0800	
			
			/**
			 * getDate();
			 * 	- 获取当前对象的日期是几月几日的：几日。
			 */
			var monday = d2.getDate();
			console.log("date= " + monday );//30
			
			/**
			 * getDay()
			 *  - 获取当前日期对象是周几
			 * 	- 会返回一个0~6的值：0表示周日、1表示周一。以此类推
			 */
			var weekday = d2.getDay();
			console.log("weekday = "+weekday);//2：表示星期二
			
			
			/**
			 * getMonth();会获取当前时间对象的月份。
			 *  - 会返回一个0~11的值。
			 * 0表示一月，1表示2月...11表示12月
			 */
			var month = d2.getMonth();
			console.log("month = "+month);//2：表示3月
			
			
			/**
			 * getFullYear()
			 *   - 获取当前对象的年份 
			 */
			var year = d2.getFullYear();
			console.log("year = "+ year);//2021
			
			/**
			 * getTime()
			 * 	- 获取当前对象的时间戳
			 *  - 时间戳：指的是从格林威治标准时间1970年1月1日0时0分0秒到当前日期所花费的毫秒数
			 * 		1秒 = 1000毫秒
			 *  - 计算机底层在保存时间时都是使用时间戳
			 */
			var time = d2.getTime();
			console.log(time);// 1617117570000毫秒
			console.log(time/1000/60/60/24/365);//51.2785年
			
			
			//利用时间戳来测试代码的执行的性能
			//获取当前的时间戳
			var start = Date.now();
			for(var i=0; i<100; i++){
         
				console.log(i);
			}
			var end = Date.now();      
			console.log("耗费时间"+(end-start)+"毫秒")//26毫秒
script>

  2. Math对象

    <script type="text/javascript">
			/**
			 * Math
			 *  - Math和其他对象不同，他不是一个构造函数
			 * 		它属于一个工具类，不用创建对象，它里面封装了数学运算的相关方法
			 *  - 比如：Math.PI 表示圆周率
			 */
			console.log(Math.PI);// 3.141592653589793
			
			//abs()用来计算一个数的绝对值。
			console.log(Math.abs(-34));//34
			
			//Math.ceil() 可以对一个数向上取整，小数位只要有值就自动进1
			console.log(Math.ceil(1.001));//2
			
			//Math.floor()  可以对一个数进行向下取整，小数部分会被舍掉
			console.log(Math.floor(1.99))//1
			
			//Math.round()  可以对一个数进行四舍五入取整
			//小数位后一位大于等于5向上进1
			console.log(Math.round(1.5));//2
			console.log(Math.round(1.4999));//1
			
			/**
			 * Math.random()
			 *   - 可以用来生成一个0~1之间的随机数
			 * 		把该方法嵌套进四舍五入的方法就可以得到整数
			 *   - 生成一个0~10之间的随机整数
			 *   Math.round(Math.random()*10);
			 * 
			 *   - 生成一个0~x之间的随机整数
			 *   Math.round(Math.random()*x);
			 * 
			 *   - 生成一个x~y之间的随机整数
			 *   Math.round(Math.random()*(y-x)+x);
			 */
			console.log(Math.random());// 0.0638895
			console.log(Math.random());//0.915273 
			
			//生成1~6之间的随机整数
			console.log(Math.round(Math.random()*5+1));//5
			
			
			//max() 可以获取多个数中的最大值
			var max = Math.max(10,78,62,452);
			console.log(max);//452
			
			//min() 获取多个数种的最小值
			var min = Math.min(10,12,1.2,120);
			console.log(min);//1.2
			
			//Math.pow(x,y)   返回x的y次幂
			console.log(Math.pow(2,3));//8
			
			//Math.sqrt() 用于对一个数进行开方运算
			console.log(Math.sqrt(9));//3
script>

  3. 包装类

    <script type="text/javascript">
			/**
			 * 	基本数据类型
			 * 	String 、Number、Boolean、Null、Undefined
			 * 
			 * 	引用数据类型 ——Object
			 * 
			 * 在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象。
			 * 	String()
			 * 		——可以将基本数据类型字符串转换为String对象
			 * 	Number()
			 * 		——可以将基本数据类型的数字转换为Number对象
			 * 	Boolean()
			 * 		——可以将基本数据类型的布尔值转换为Boolean对象
			 * 	但是注意：我们在实际应用中不会使用基本数据类型的对象
			 * 		如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果
			 */
			
			var a = 123;
			console.log(typeof a);//Number
			//创建一个Number类型的对象
			var num = new Number(3);
			var str = new String("hello");
			var flag = new Boolean(true);
			
			console.log(typeof num); //Object
			console.log(typeof str); //Object
			console.log(typeof flag); //Object
			
			//可以向对象中添加属性
			num.hello = "abc";
			console.log(num.hello);//abc
			
			/**
			 *  方法和属性只能添加给对象，不能添加给基本数据类型
			 *  当我们对一些基本数据类型的值取调用属性和方法时，浏览器会临时调用包装类将其转换为对象
			 * 	调用完以后，会将其再次转换为基本数据类型
			 */
				
			num = 123;
			num = num.toString();//浏览器临时调用包赚类调用同toString方法，然后将结果赋给num变量
			console.log(num);	//123
			console.log(typeof num);//String
			
			num.hello = "nihao"//这里浏览器调用包装类赋值给num的hello属性，调用完以后再次转换成了基本数据类型
			
			console.log(num.hello);//undefined//这里访问的跟上面赋值的那个不是同一个对象，所以访问不到上面定义的hello属性
			//这是浏览器访问该基本数据类型变量num时，临时调用包装类将其转换成对象，跟之前的没关系了，
			//因为每一个都是调用完后就重新转回基本数据类型。是一个新的对象，没定义就访问返回：underfined。
script>

  4. 字符串相关方法

    <script type="text/javascript">
			//创建一个字符串
			var str = "Hello world";
			
			/**
			 * 在底层字符串是以字符串数组的形式保存的
			 * ["H","e","e","l"]
			 * 
			 * length 属性——可以用来获取字符串的长度
			 */
			console.log(str[5]);//" "
			console.log(str[6]);//w
			console.log(str.length);//11
			
			
			/**
			 * charAt()
			 * 	返回字符串指定位置的字符,根据索引获取指定字符
			 */
			str = "hello world";
			var result = str.charAt(0);
			console.log(result);//h
			
			
			/**
			 * charCodeAt()
			 *  - 获取指定位置字符的字符编码（Unicode编码）
			 */
			result = str.charCodeAt(1);//101
			console.log(result);
			
			/**
			 * fromCharCode()
			 * 	- 可以根据字符编码去获取字符
			 */
			result = String.fromCharCode(101);
			console.log(result);//e
			
			/**
			 * concat()
			 * 	- 可以用来连接两个或多个字符串,作用和+一样
			 */
			result = str.concat("你好","kitty");//hello world你好kitty
			console.log(result);
			
			/**
			 * indexOf()
			 *  - 该方法可以检索一个字符串中是否含有指定内容
			 *  - 如果字符串中含有该内容，则会返回第一次出现的索引
			 *  - 如果没有找到指定的内容，则返回-1
			 *  - 可以指定第二个参数：指定开始查找的位置(包括指定的这个位置的索引)
			 * 
			 * lastIndexOf()
			 *  - 该方法用法与indexOf()一样
			 * 		不同的是indexOf是从前往后找、lastIndexOf是从后往前找
			 * 
			 *  - 也可以指定开始查找的位置
			 */
			str = "hello kittyhello"
			result = str.indexOf("e");
			console.log(result);//1
			
			result = str.indexOf("l");
			console.log(result);//2
			
			result = str.indexOf("a");
			console.log(result);//-1
			
			result = str.indexOf("l",3);
			console.log(result);//3
			
			result = str.indexOf("l",4);
			console.log(result);//13
			
			result = str.lastIndexOf("l");
			console.log(result);//14
			
			result = str.lastIndexOf("l",3);
			console.log(result);//3
			
			
			/**
			 * slice()
			 *   - 可以从字符串中截取指定的内容
			 *   - 不会影响原字符，而是将截取到的内容返回
			 *   - 参数：
			 * 			第一个：开始位置的索引（包括开始位置）
			 * 			第二个：结束位置的索引（包括结束位置）
			 * 	 - 如果省略第二个参数，则会截取到后边所有的字符。
			 *   - 也可以传递一个负数作为参数，负数的话将从后面开始计算.
			 * 		-1就是最后一个字符，不包括结束位置的。
			 */
			str = "abcdefghijk";
			result = str.slice(0,2);
			console.log(result);//ab
			
			result = str.slice(1,4);
			console.log(result);//bcd
			
			result = str.slice(3);
			console.log(result);// defghijk
			result = str.slice(3,-1);
			console.log(result);// defghij
			
			
			/**
			 * substring()
			 * 	- 可以用来截取一个字符串，与slice()类似
			 *  - 参数：
			 * 		也是第一个参数为：起始截取的索引位置
			 * 		第二个参数为：结束截取的索引位置
			 *   - 不同：substring()不能接收负值，如果传递了一个负数，则默认为0
			 *   - 而且该方法会自动调整参数位置，如果第二个参数小于第一个，会自动交换
			 * 		如：substring(1,0)  就成为：substring(0,1)
			 */
			
			result = str.substring(1,-10);
			console.log(result);//a
			
			result = str.substring(1,0);
			console.log(result);//a
			
			result = str.substring(3,1);
			console.log(result);//bc
			
			
			/**
			 * substr()
			 *  - 用来截取字符串
			 *  - 第一个参数：截取开始位置的索引。
			 * 	  第二个参数：截取的长度
			 */
			str = "abcdef"
			result = str.substr(4,2);
			console.log(result);//ef
			
			
			/**
			 * split()
			 *   - 可以将一个字符串拆分成一个数组
			 *   - 参数：
			 *        需要将一个字符串作为参数，将会根据该字符串去拆分数组
			 * 
			 *   - 如果传递一个空串作为参数，则会将每个字符都拆分称为数组中的一个元素
			 */
			
			str="abc-def-ghi-jkl";
			result = str.split("-");
			console.log(result);// {"0":"abc","1":"def","2":"ghi","3":"jkl","length":4} 
			console.log(Array.isArray(result));//true
			console.log(result.length);//4
			
			str ="abcde";
			result = str.split("");
			console.log(result);{
         "0":"a","1":"b","2":"c","3":"d","4":"e","length":5}
			
			
			/**
			 * toUpperCase()
			 *  - 将一个字符串转换为大写并返回
			 */
			str = "abcde"
			result = str.toUpperCase(str);
			console.log(result);//ABCDEF
			
			/**
			 * toLowerCase()
			 *  - 将一个字符串转换为小写并返回
			 */
			
			str = "ABCDEFGHIJK"
			result = str.toLowerCase(str);
			console.log(result);//abcdefghijk
			
script>

正则表达式

  1. 正则表达式简介

    <script type="text/javascript">
			/**
			 * 正则表达式：
			 * 	  - [email protected]
			 *      邮件的规则：
			 * 			1、前面可以是xxx
			 * 			2、跟着一个@
			 * 			3、后面可以是xxx
			 * 			4、.com
			 * 
			 * 正则表达式用于定义一些字符串的规则
			 * 		计算机可以根据正则表达式，来检查一个字符串是否符合规则
			 * 		获取字符串，其中符合规则的内容提取出来
			 */
			
			
			/**
			 * 创建正则表达式对象
			 * 语法：
			 * 	 -  var 变量 = new RegExp("正则表达式","匹配模式");
			 *   -  使用typeof检查正则对象，会返回object
			 * 
			 * 		- var reg = new RegExp("a");
			 * 	      这个正则表达式可以用来检查一个字符串中是否含有a
			 * 
			 *   - 在构造函数中可以传递一个匹配模式作为第二个参数。可以是：
			 * 		   "i" ：忽略大小写
			 * 		   "g" ：全局匹配模式
			 */
			var reg = new RegExp("a");
			console.log(reg); //  /a/
			console.log(typeof reg);//object
			
			/**
			 * 正则表达式的方法：
			 * test()
			 *   - 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则
			 *     如果符合规则返回true，否则返回false
			 */
			var result = reg.test("a");
			console.log(result);//true
			
			result = reg.test("cdabc");
			console.log(result);//true
			
			result = reg.test("cc");
			console.log(result);//false
			
			result = reg.test("AA");
			console.log(result);//false
			
			reg = new RegExp("a","i");
			result = reg.test("A");
			console.log(result);//true
script>

  2. 正则表达式语法

    <script type="text/javascript">
			/**
			 * 使用字面量来创建正则表达式
			 *   语法： var 变量 = /正则表达式/匹配模式
			 * 使用字面量的方式创建更加简单，但是使用字面量的方式创建更加灵活
			 */
			var reg = /a/i;
			console.log(typeof reg);//object
			console.log(reg.test("Abc")); //true
			
			/**
			 * 创建一个正则表达式，检查一个字符串中是否有a或b或c
			 * 使用 | 表示或者的意思
			 */
			reg = /a|b|c/;
			console.log(reg.test("adf"));//true
			console.log(reg.test("dfgbkj"));//true
			console.log(reg.test("oeirc"));//true
			
			
			/**
			 * 创建一个正则表达式检查一个字符串中是否有字母
			 */
			//reg =/a|b|c|d|e|f|g/; //这种方式需要一直写到z
			/**
			 * []中的内容也是或的关系
			 *  [ab] == a|b
			 * [a-z]表示：任意小写字母
			 * [A-Z]表示：任意大写字母
			 * [A-z]表示：任意字母
			 * [0-9]表示：任意数字
			 */
			reg = /[A-z]/;
			console.log(reg.test("Z"));//true
			
			//检查一个字符串中是否含有abc或adc或aec
			//reg = /abc|adc|aec/
			reg =/a[bde]c/;//等同于reg = /a[b-e]c/;
			console.log(reg.test("aec"));//true
			
			/**
			 * [^ab]  除了
			 */
			//检查一个字符串中除了a和b字母外否有别的字符
			reg = /[^ab]/;
			console.log(reg.test("c"));//true
			console.log(reg.test("a"));//false
			console.log(reg.test("abc"));//true
			
			/**
			 * [0-9]表示：任意数字
			 */
			
			reg = /[0-9]/;
			console.log(reg.test("123"));//true
			
			//除了数字有没有别的字符
			reg = /[^0-9]/;
			console.log(reg.test("123"));//false
			console.log(reg.test("12a3"));//true
script>

  3. 字符串和正则相关的方法

    <script type="text/javascript">
			/**
			 * split()
			 *   - 可以将一个字符串拆分成为一个数组
			 *   - 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
			 *   - 这个方法即使不指定全局匹配，也会全部拆分。
			 */
			var str="1a2b3c4d5e6f7";
			
			//根据字母c拆
			var result = str.split("c");
			console.log(result);//{"0":"1a2b3","1":"4d5e6f","length":2}
			
			//根据任意字母拆
			result = str.split(/[A-z]/);
			console.log(result);//{"0":"1","1":"2","2":"3","3":"4","4":"5","5":"6","6":"7","length":7}
			
			/**
			 * search()
			 *   - 可以搜索字符串中是否含有指定内容
			 *   - 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1
			 *   - 它可以接收一个正则表达式作为参数，然后根据正则表达式去检索字符串
			 *   - search()即使设置了全局匹配，也只查找第一个。
			 */ 
			str = "hello abc hello abc";
			result = str.search("abc");
			console.log(result);// 6
			 
			result = str.search("abcd");
			console.log(result);//-1
			
			//接收正则表达式作为参数
			str = "hello helloaec afc aac abc";
			//搜索字符串aac、abc、aec、afc
			result = str.search(/a[b-f]c/); 
			console.log(result);//11
			
			
			/**
			 * match()
			 *   - 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
			 *   - 默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
			 *      我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
			 * 		可以为一个正则表达式设置多个匹配模式，且顺序无所谓
			 *   - match()会将匹配到的内容封装到一个数组中返回，即使只查到一个结果
			 */
			str = "1a2b3c4d5e6f7";
			
			//默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
			result = str.match(/[A-z]/);
			console.log(result);//只提取出一个：a
			
			// 我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
			str = "1a2b3c4d5e6f7A8B9C";
			result = str.match(/[A-z]/g);
			console.log(result);
			//{"0":"a","1":"b","2":"c","3":"d","4":"e","5":"f","6":"A","7":"B","8":"C","length":9} 
			
			//还可以这样
			result = str.match(/[a-z]/gi);//i和g没有顺序要求 等同于str.match(/[A-z]/g);
			console.log(result);
			//{"0":"a","1":"b","2":"c","3":"d","4":"e","5":"f","6":"A","7":"B","8":"C","length":9} 
			
			//macth()以数组形式返回结果
			console.log(typeof result);//object
			console.log(Array.isArray(result));//true
			
			
			/**
			 * replace()
			 * 	 - 可以将参数中指定的内容替换为新的内容
			 *   - 参数：
			 * 		 1、被替换的内容
			 * 		 2、新的内容
			 *   - 默认只会替换第一个
			 */
			str = "1a2a3a4a5A6A7A";
			result = str.replace("a","@@@");
			
			//默认只会替换第一个
			console.log(result);//1@@@2a3a4a5A6A7A
			
			//使用正则表达式作为参数，全局匹配模式：g。即可全部替换
			result = str.replace(/a/g,"@_@");
			console.log(result);//1@_@2@_@3@_@4@_@5A6A7A 
			
			//再加上忽略大小写的：i
			result = str.replace(/a/gi,"_@_");
			console.log(result);//1_@_2_@_3_@_4_@_5_@_6_@_7_@_
			
			
			//替换任意字母：
			str = "1a2B3C4D5F6e7f8888"
			result = str.replace(/[A-z]/gi,"_@_");
			console.log(result);//1_@_2_@_3_@_4_@_5_@_6_@_7_@_8888
			
			//删除字母，传一个空串：""（中间不能有空格）
			result = str.replace(/[A-z]/gi,"");//12345678888 
			console.log(result);
script>

  4. 正则表达式语法

    <script type="text/javascript">
			/**
			 * 创建一个正则表达式检查一个字符串中是否含有aaa
			 * 
			 * 量词：
			 * 	  - 通过量词可以设置一个内容出现的次数 。
			 *    - 注意：量词只对它前面的一个字符起作用。
			 * 			♥表示任意字符，如：a
			 *		 - ♥{n}：正好出现n次
			 *       - ♥{m,n}：正好出现m-n次，如果超过n次则报错
			 *       - ♥{m,}：出现m次及m次以上
			 *       - ♥+ ：至少出现一次，相当于{1,}
			 *     	 - ♥* ：0个或多个，相当于{0,}。有没有都行
			 *    	 - ♥? ：0个或1个，相当于{0,1}。
			 * 		如果想要多个字符出现多次，则需要把这几个字符用小括号括起来
			 *      
			 *    
			 */
			//检查一个字符串中是否有连续的3个a
			var reg = /a{3}/;
			console.log(reg.test("naadd"));//false
			console.log(reg.test("naaad"));//true
			
			//量词只对它前面的一个字符起作用
			reg = /ab{3}/;
			console.log(reg.test("dfabbb"));//true
			
			//如果想要判断为：连续的三次ab，则需要在ab上加()
			reg = /(ab){3}/;
			console.log(reg.test("abbb"));//false
			console.log(reg.test("sdfabababfd"));//true
			
			//{m,n}：正好出现m-n次，如果超过n次则报错
			reg = /ab{1,3}c/;
			console.log(reg.test("abc"));//true
			console.log(reg.test("abbbbc"));//false
			
			//- {m,} :出现m次及m次以上
			reg = /ab{3,}c/;
			console.log(reg.test("abbc"));//false
			console.log(reg.test("abbbc"));//true
			console.log(reg.test("abbbbbbbbc"));//true
			
			//+ 最少出现一此
			reg = /ab+c/;
			console.log(reg.test("efabcer"));//true
			console.log(reg.test("efabbbbbbbbbbbc"));//true
			
			//* ：0个或多个，相当于{0,}。有没有都行
			reg = /ab*c/;
			console.log(reg.test("reace"));//true
			console.log(reg.test("erdabbbbbbbbbc"));//true
			
			//? ：0个或1个，相当于{0,1}。
			reg = /ab?c/;
			console.log(reg.test("eqac"));//true
			console.log(reg.test("eqabc"));//true
			console.log(reg.test("eqabbc"));//false
			
			
			/**
			 * 检查一个字符串是否以a开头
			 *   ^表示开头
			 */
			reg = /^a/;
			console.log(reg.test("badcdaac"));//false
			console.log(reg.test("acb"));//true
			
			/**
			 * 检查一个字符串是否以a结尾
			 *  $ 表示结尾
			 */
			reg = /a$/;
			console.log(reg.test("aac"));//false
			console.log(reg.test("bca"));//true
			
			/**
			 * 如果正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式
			 */
			reg = /^a$/;//表示以a开头并且以a结尾，只能是一个a，不能是aa或aaa
			console.log(reg.test("aa"));//false
			console.log(reg.test("a"));//true
			
			//如果需要以a开头或者以a结尾，则需要在中间加|，如：/^a|a$/
			reg = /^a|a$/;
			console.log(reg.test("abc"));//true
			console.log(reg.test("bca"));//true
			
			/**
			 * 检查一个正则表达式，用来检查一个字符串是否是一个合法的手机号
			 * 
			 * 手机号规则:
			 *    - 以1开头：^1
			 * 	  - 第二位3-9的任意数字：[3-9]
			 *    - 三位以后任意数字9个,并且结尾：[0-9]{9}$
			 */
			var phoneStr = "13735925921";
			//这里的^和$必须有
			var reg =/^1[3-9][0-9]{9}$/;
			console.log(reg.test(phoneStr)); 			
			
			//如果不使用^和$进行限制则会出现问题
			//如：一下这个虽然电话号是对的，但是两边还有字母以及数字。
			//所以一定要加^和$进行开头结尾的限制
			phoneStr = "sdfsd1373592592134";
			var reg =/1[3-9][0-9]{9}/; //
			console.log(reg.test(phoneStr));//true
script>

  5. 正则表达式语法续

    <script type="text/javascript">
			/**
			 * 检查一个字符串中是否含有 字符.
			 *  .是特殊字符，表示任意字符
			 *  在正则表达式中使用\作为转义字符
			 *   \.表示：字符.
			 *   \\表示：\
			 * 
			 * 注意：如果是使用构造函数，由于它的参数是一个字符串，而/是字符串中的转义字符
			 * 	如果要使用\来进行转义，则需要使用：\\
			 *  如果需要使用字符\作为正则中的字符，使用构造函数需要传进入\\\\
			 *  字符串中转义后是：\\，\\传入正则再转义：就是字符\
			 */
			var reg = /./;
			console.log(reg.test("a"))//true;
			
			reg = /\./;
			console.log(reg.test("a"));//false
			console.log(reg.test("a."));//true
			console.log(reg.test(".b"));//true
			
			//使用构造函数
			reg = new RegExp("\.")//转义后\.还是.，传入正则的只有一个.即表示：任意字符
			console.log(reg.test("a"));//true
			
			//解决问题
			reg = new RegExp("\\.")//转移后是\.，\.传入正则再转义即表示：字符.
			console.log(reg.test("a"));//fasle
			console.log(reg.test("a."));//ture
			
			
			/**
			 * \w   表示：任意字母、数字、下划线_ 
			 * \W   表示：除了字母、数字、_之外的其他字符
			 * \d   表示：任意数字
			 * \D 	表示：除了数字
			 * \s   表示：空格
			 * \S	表示：除了空格
			 * \b 	表示：单词边界
			 * \B	表示：除了单词边界
			 */
			
			//  \w   表示：任意字母、数字、下划线_ 
			reg = /\w/;
			console.log(reg.test("z"));//true
			console.log(reg.test("8"));//true
			console.log(reg.test("_"));//true
			
			//\W   表示：除了字母、数字、_之外的其他字符
			reg = /\W/;
			console.log(reg.test("z"));//false
			console.log(reg.test("#"));//true
			console.log(reg.test("@"));//true
			
			//\d   表示：任意数字
			reg = /\d/;
			console.log(reg.test("123"));//true
			console.log(reg.test("z"));//false
			console.log(reg.test("@"));//false
			
			//  \D 表示：除了数字
			reg = /\D/;
			console.log(reg.test("123"));//false
			console.log(reg.test("z"));//true
			console.log(reg.test("@"));//true
			
			
			//\s 表示：空格
			reg = /\s/;
			console.log(reg.test("de2"));//false
			console.log(reg.test("12 3"));//true
			console.log(reg.test(" "));//true
	
			//\S 表示：除了空格
			reg = /\S/;
			console.log(reg.test("de2"));//true
			console.log(reg.test("12 3"));//true
			console.log(reg.test(" "));//false
			
			
			/**
			 * 创建一个正则表达式检查一个字符串中是否含有单词child
			 * 		 \b 表示：单词边界 这个单词两边都必须是空格
			 * 		 \B表示：除了单词边界 ，这个单词旁边不能有空格
			 */
			reg = /\bchild\b/;
			console.log(reg.test("hello children"));//false
			console.log(reg.test("hello child"));//true
			
			reg = /\Bchild\B/;
			console.log(reg.test("hello dfchildren"));//true
			console.log(reg.test("hello child"));//false
			
			//去除字符串中所有的空格：使用""代替空格
			var str = "   h  e  l  lo      ";
			console.log(str);//   h  e  l  lo       
			str = str.replace(/\s/g,"");
			console.log(str);//hello 字符串中的空格也被去除了
			
			//去除开头的空格
			str = "   h  e  l  lo      ";
			str = str.replace(/^\s*/,"");
			console.log(str);//h  e  l  lo      
			//去除结尾的空格
			str = "   h  e  l  lo      ";
			str = str.replace(/\s*$/,"");
			console.log(str);//    h  e  l  lo 
			//只去除字符串前后的空格  /^\s*|\s*$/g 匹配开头和结尾的空格
			str = "   h  e  l  lo      ";
			str = str.replace(/^\s*|\s*$/g,"");
			console.log(str);//h  e  l  lo
			
			//接收用户键盘输入
			str = prompt("请输入你的用户名：");
			console.log(str);
script>

  6. 邮件的正则

    <script type="text/javascript">
			/**
			 * 电子邮件
			 * 	[email protected]   
			 * 任意字符数字下划线 . 任意字符下划线@任意字母数字.任意字母(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));//true
script>

DOM查询

DOM全称：Document Object Model 文档对象模型

  • 文档：表示的就是整个HTML网页文档
  • 对象：表示将网页中的每一个部分都转换为了一个对象
  • 模型：使用模型来表示对象之间的关系，这样方便我们获取对象

节点：

Javascript基础_第5张图片
Javascript基础_第6张图片
Javascript基础_第7张图片
Javascript基础_第8张图片
Javascript基础_第9张图片
Javascript基础_第10张图片
Javascript基础_第11张图片

  1. 获取button对象，修改其中的文字

    <body>
    <button id="btn">我是一个按钮button>
    <script type="text/javascript">
        /**
			 * 浏览器已经为我们提供文档节点对象，这个对象是window属性
			 * 	可以在页面中直接使用，文档节点代表的是整个网页
			 */
        //console.log(document);//#document 

        //获取button对象
        var btn = document.getElementById("btn");

        //获取按钮中的文字，使用属性innerHTML
        console.log(btn.innerHTML);//我是一个按钮
        //修改按钮的文字
        btn.innerHTML = "我是button";
        console.log(btn.innerHTML);//我是button
    script>
body>

  2. 事件

    
<body>
    

    
    

    <button id="btn">我是一个按钮button>
    <script type="text/javascript">

        //获取按钮对象
        var btn =document.getElementById("btn");
        /**
		 * 可以为按钮的对应时间绑定处理函数的形式来响应事件
		 */
        //绑定一个单击事件
        //像这种为单击事件绑定的函数，我们成为单击响应函数。
        btn.onclick = function(){
         
            alert("你还点~~~");
        };
    script>

body>

  3. 文档的加载

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script type="text/javascript">
			
			/**
			 * 浏览器在加载一个界面时，是按照自上向下的顺序加载的
			 *   读取到一行就运行一行，如果将script标签写道页面的上边
			 *   代码执行时，页面没有加载，页面加载不了DOM对象，也无法获取
			 * 所以要写在下面。写在下面就是为了在页面加载完毕以后再执行js代码
			 * 
			 *onload事件会在整个页面加载完成之后才触发
			 *  为window绑定一个onload事件.
			 * 	 该事件对应的响应函数将会在页面加载完成之后执行
			 *   这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。
			 */
			window.onload= function(){
         
				//获取id为btn的按钮
				var btn = document.getElementById("btn");
				//为按钮绑定一个单击响应函数
				btn.onclick = function(){
         
					alert("hello");
				};
			};
		script>
	head>
	<body>
		<button id="btn">点我一下button>

	body>
html>

  4. 获取元素节点

    • 获取元素节点

      通过document对象调用
1、getElementById() ——通过id属性获取一个元素节点对象
2、getElementsByTagName()——通过标签名获取一组元素节点对象
3、getElementsByName()——通过name属性获取一组元素节点对象

    • dom查询练习

      DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
<title>Untitled Documenttitle>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			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");
					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(){
           
					//查找nam = gender的所有节点
					var inputs = document.getElementsByName("gender");
					
					//遍历
					/**
					 * innerHTML用于获取元素内部的HTML代码，对于自结束标签，这个属性没有意义
					 * inputs[i].innerHTML
					 * 
					 * 如果需要读取元素属性，直接使用元素.属性名
					 * 	例如：元素.name 、元素.id 、元素.value
					 * 注意：class属性不能使用：元素.class。
					 * 		要使用：元素.className
					 */
					for(var i=0;i<inputs.length;i++){
           
						//alert(inputs[i].innerHTML);
						alert(inputs[i].value);
					}
					
				};
				
				
				//查找#city下所有li节点
				//返回#city的所有子节点
				//返回#phone的第一个子节点
				//返回#bj的父节点
				//返回#android的前一个兄弟节点
				//读取#username的value属性值
				//设置#username的value属性值
				//返回#bj的文本值
				
			};
			
		
		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>IOSli><li id="android">Androidli><li>Windows Phoneli>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>

  5. 图片轮播/切换

    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">
			/**
			 * 点击按钮切换图片
			 * 切换图片就是要修改img标签的src属性
			 */
			window.onload = function(){
         
				//获取两个按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				//获取img标签,获取到以后返回一个类数组对象，[0]表示取第一个
				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)+"张";
				
				//分别为两个按钮绑定单击响应函数
				//修改img标签的src属性：元素.属性 = 属性值
				prev.onclick = function(){
         
					//切换到上一张，数组索引-1 ，即：index--
					//如果index<0的话跳转到最后一张，即数组索引为length-1
					if(--index < 0){
         
						index = imgArr.length-1;
					}
					img.src = imgArr[index];
					info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
				};
				next.onclick =function(){
         
					//切换到下一张，数组索引+1
					if(++index > imgArr.length-1){
         
						index = 0;
					}
					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>

  6. 获取元素节点的子节点

    通过具体的元素节点调用
- getElementsByTagName()   方法，返回当前节点的指定标签名后代节点
- childNodes     属性，表示当前节点的所有子节点
- firstChild     属性，表示当前节点的第一个子节点
- lastChild 	 属性，表示当前节点的最后一个子节点

    练习

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
<title>Untitled Documenttitle>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			window.onload = function(){
         
				
				//为id为btn04的按钮绑定一个单击响应函数
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
         
					//获取id为city的元素
					var city = document.getElementById("city");
					//查找#city下所有li节点
					var lis = city.getElementsByTagName("li");
					
					//遍历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 citys = city.childNodes;
					for(var i=0 ; i<citys.length ;i++){
         
						alert(citys[i].innerHTML);
					};
					
					/**
					 * children属性可以获取当前元素的所有子元素
					 * 	不会出现两个标签之间的空白部分了
					 */
					var citys2 = city.children;
					alert(citys2.length);//4
				};
				
				//为id为btn06的按钮绑定一个单击响应函数
				var btn06 = document.getElementById("btn06");
				btn06.onclick = function(){
         
					//获取id为phone的子元素
					var phone = document.getElementById("phone");
					//返回phone的第一个子节点
					//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
					var fir = phone.firstChild;
					alert(fir);
					
					/**
					 * firstElementChild获取当前元素的第一个子元素(不包含空白文本节点)
					 * 不支持IE8及以下的浏览器，如果需要兼容，则尽量不使用
					 */
					
					fir = phone.firstElementChild;
					alert(fir);
				};
                
				//返回#bj的父节点
				//返回#android的前一个兄弟节点
				//读取#username的value属性值
				//设置#username的value属性值
				//返回#bj的文本值
				
			};
			
		
		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>IOSli><li id="android">Androidli><li>Windows Phoneli>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>

  7. 获取父节点和兄弟节点

    通过具体的节点调用
 - parentNode  属性，表示当前节点的父节点
 - previousSibling  属性，表示当前节点的前一个兄弟节点
 - nextSibling    属性，表示当前节点的后一个兄弟节点

    练习

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
<title>Untitled Documenttitle>
		<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(){
         

				//为btn07按钮绑定一个单击响应函数
				myClick("btn07",function(){
         
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					//返回#bj的父节点
					var bjparent = bj.parentNode;
					alert(bjparent.innerHTML);
					/**
					 * innerText
					 * 	- 该属性可以获取到元素内部的文本内容
					 *  - 它和innerHTML类似，不同的是它会自动将html标签抹除，只剩下文本
					 */
					alert(bjparent.innerText);
				});
				
				//为btn08的按钮绑定一个单击响应函数
				myClick("btn08",function(){
         
					//获取id为android的元素
					var android =document.getElementById("android");
					//返回#android的前一个兄弟节点（也可能获取到空白文本）
					var andpre =android.previousSibling;
					alert(andpre.innerHTML);
					//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
					andpre = android.previousElementSibling;
					alert(andpre.innerHTML);
					
				})
				
				//为btn09的按钮绑定一个单击响应函数
				myClick("btn09",function(){
         
					//获取id为username的元素
					var uname = document.getElementById("username");
					//读取#username的value属性值
					alert(uname.value);
				});
				
				//为btn10的按钮设置一个单击响应事件
				myClick("btn10",function(){
         
					//获取id为username的元素
					var uname = document.getElementById("username");
					//设置#username的value属性值
					uname.value = "阳光明媚";
				});
				
				//返回#bj的文本值
				myClick("btn11",function(){
         
					//获取id为bj的元素
					var bj = document.getElementById("bj");
					alert(bj.innerHTML);
					alert(bj.innerText);
					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>IOSli><li id="android">Androidli><li>Windows Phoneli>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>

  8. 全选练习

    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");

		//1.#checkedAllBtn
		//为id为	#checkedAllBtn的按钮绑定一个单击响应函数
		var checkedAllBtn = document.getElementById("checkedAllBtn");
		checkedAllBtn.onclick = function(){
         		
			//遍历items
			for(var i=0 ; i<items.length ;i++){
         
				//通过多选框的checked属性设置多选框的选中状态
				//设置四个多选框为选中状态
				items[i].checked=true;
			}
			//全选按钮里：设置checkedAllBox为选中状态
			checkedAllBox.checked = true;
		};
		
		
		/**
		 * 全不选：点击按钮以后，四个多选框都变成没选中的状态
		 */
		//2.#checkedNoBtn  //为id为checkedNoBtn的按钮绑定一个单击响应函数
		var checkedNoBtn = document.getElementById("checkedNoBtn");
		checkedNoBtn.onclick = function(){
         
			//遍历items
			for(var i=0 ; i<items.length ;i++){
         
				//通过多选框的checked属性设置多选框的选中状态
				//设置四个多选框为选中状态
				items[i].checked=false;
			}
			//全不选按钮里：设置checkedAllBox为取消状态
			checkedAllBox.checked = false;
		}
		
		
		//反选按钮：选中的变没选中，没选中的变选中
		//3.#checkedRevBtn
		var checkedRevBtn = document.getElementById("checkedRevBtn");
		checkedRevBtn.onclick = function(){
         
			for(var i=0 ; i<items.length ;i++){
         
				//先判断该多选框的选中状态，如果为true，则设置为false
/* 				if(items[i].checked){
					items[i].checked=false;
				}else{//反之，就是为false，则设置为true
					items[i].checked=true;
				} */
				
				//或者使用三目运算符
				//items[i].checked?items[i].checked=false:items[i].checked=true;
				
				//或者取反
				items[i].checked = !items[i].checked;
			}
			//取反后判断是否为全选，如果为全选则checkedAllBox为选中状态，反之为false
			//每一个多选框一旦选中，随即设置checkedAllBox为选中状态
			checkedAllBox.checked = true;
				
			//然后开始循环，判断四个多选框是否都为选中状态，只要有一个不是选中状态就不是全选
			for(var j=0 ; j<items.length; j++){
         
				if(!items[j].checked){
         
					//一旦进入判断即：非全选状态，则设置checkAllBox为false
					checkedAllBox.checked = false;
					//一旦进入判断，取消选中之后，即可结束循环
					break;
				}
			}
		}
		
		//4.#sendBtn	 提交按钮：将所有的多选框的value属性值弹出
		//为sendBtn绑定单击响应函数
		var sendBtn = document.getElementById("sendBtn");
		sendBtn.onclick = function(){
         
			for(var i = 0 ; i<items.length;i++){
         
				if(items[i].checked){
         
					alert(items[i].value);
				}
			}
		};

		//5.#checkedAllBox    全选/全不选多选框：当它选中时：所有的都选中；取消时，所有的都取消
		//为checkedAllBox绑定单击响应函数
		var checkedAllBox = document.getElementById("checkedAllBox");
		checkedAllBox.onclick = function(){
         
			//设置多选框的选中状态
			for(var i = 0 ; i<items.length ; i++){
         
				//这四个多选框的状态与checkedAllBox这个多选框的状态保持一致即可。
				//items[i].checked = checkedAllBox.checked;
				//在事件的响应函数中，响应函数是给谁绑定的，this就是谁
				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){
         
						//一旦进入判断即：非全选状态，则设置checkAllBox为false
						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>

  9. DOM查询的其他方法

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

  10. DOM的增删改

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Untitled Documenttitle>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			window.onload = function() {
         
				//创建一个广州节点，添加到#city下
				myClick("btn01",function(){
         
					//创建广州节点：
  11. 广州
    12. 
					/**
					 * 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);
					
					//获取bj节点
					var bj = document.getElementById("bj");
					
					//获取city节点
					var city = document.getElementById("city");
					
					/**
					 * replaceChild()
					 * 	- 可以使用指定的子节点替换已有的子节点
					 *  - 语法：父节点.replaceChild(新节点,旧节点)；
					 */
					city.replaceChild(li,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");
					//获取其中的html代码：
					alert(city.innerHTML);
				});
				
				//设置#bj内的html代码
				myClick("btn06",function(){
         
					//获取bj
					var bj = document.getElementById("bj");
					bj.innerHTML="昌平"
				});
				
				//使用innerHTML为city中添加广州节点
				myClick("btn07",function(){
         
					var city = document.getElementById("city");
					/**
					 * 使用innerHTML也可以完成DOM的增删改查的操作
					 */
					
					//这种方法相当于改动了整个id为city的ul标签。一般不这么使用
					//city.innerHTML += "
  12. 广州
    13. "    
					
					//一般我们会两种方式结合使用
					//先创建一个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>

  13. 添加删除记录练习

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加删除记录练习title>
		<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
		<script type="text/javascript">
			
			window.onload = function(){
         
				//点击超链接以后，删除一个员工信息
				
				//删除tr的响应函数
				function del(){
         
					/**
					 * 点击超链接以后，需要删除超链接所在的那行
					 * 这里我们点击哪个超链接，this就是谁
					 */
					//获取当前的tr
					var tr = this.parentNode.parentNode;
					
					//获取要删除的员工的名字
					//var name = tr.children[0].innerHTML;
					var name = tr.getElementsByTagName("td")[0].innerHTML;
					
					/**
					 * 删除之前弹出一个提示框
					 * confirm()用于弹出一个带有确认和取消按钮的提示框
					 *  需要一个字符串作为参数，该字符串将会作为提示文字显示出来
					 * 如果用户点击确认返回true，点击取消返回：false
					 */
					var flag = confirm("确认删除"+name+"吗？");
					
					//如果用户确认删除则删除
					if(flag){
         
						//tr再获取它的父节点，通过removeChild()方法删除自己
						tr.parentNode.removeChild(tr);
					}
						
					/**
					 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为
					 * 但是此时我们不希望出现默认行为，可以通过在响应函数的最后
					 * return false 来取消默认行为
					 */
					
					return false;
				};
				
				//获取所有的超链接
				var allA = document.getElementsByTagName("a");
				//为每个超链接都绑定一个单击响应函数
				for(var i = 0 ; i<allA.length;i++){
         
					/**
					 * for循环会在页面加载完成之后立即执行，而响应函数会在超链接被点击时才执行
					 * 当响应函数执行时，for循环早已执行完毕
					 */
					allA[i].onclick = del;
				}
				
				//添加员工的功能：点击按钮之后，将员工的信息添加到表格中
				
				//为提交按钮绑定一个单击响应函数
				var addEmpButton = document.getElementById("addEmpButton");
				addEmpButton.onclick=function(){
         
					//获取用户添加的员工信息
					
					//获取员工的名字、email、salary
					var name = document.getElementById("empName").value;
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;
					
					//将获取到的信息保存到tr中
					var tr = document.createElement("tr");
					//设置tr中的内容
					tr.innerHTML =  ""+name+""+
									""+email+""+
									""+salary+""+
									"Delete"
									
					//获取刚刚添加的a元素，并为其绑定单击响应函数
					var a = tr.getElementsByTagName("a")[0];
					a.onclick = del;
					
					//获取table
					var employeeTable = document.getElementById("employeeTable");
					//获取employeeTable中的tbody
					var tbody = employeeTable.getElementsByTagName("tbody")[0];
					//将tr添加到tbody中
					tbody.appendChild(tr);
				};
			};
				
		script>
	head>
	
	<body>

		<table id="employeeTable">
			<tr>
				<th>Nameth>
				<th>Emailth>
				<th>Salaryth>
				<th> th>
			tr>
			<tr>
				<td>Tomtd>
				<td>[email protected]td>
				<td>5000td>
				<td><a href="javascript:;">Deletea>td>
			tr>
			<tr>
				<td>Jerrytd>
				<td>[email protected]td>
				<td>8000td>
				<td><a href="deleteEmp?id=002">Deletea>td>
			tr>
			<tr>
				<td>Bobtd>
				<td>[email protected]td>
				<td>10000td>
				<td><a href="deleteEmp?id=003">Deletea>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" value="abc">
							Submit
						button>
					td>
				tr>
			table>

		div>

	body>
html>

  14. 使用DOM操作CSS

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			#box1{
         
				width:200px;
				height:200px;
				background-color: red;
			}
		style>
		
		<script type="text/javascript">
			window.onload = function(){
         
				//点击按钮以后，修改box1的大小
				//获取box1
				var box1 = document.getElementById("box1");
				//为按钮绑定单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
         
					//修改box1的宽度
					/**
					 * 通过js修改元素的样式；
					 *  语法：元素.style.样式名 = 样式值
					 * 
					 * 注意：如果CSS的央视中含有-
					 * 	这种名称在js中是不合法的，比如：background-color
					 * 需要将这种样式名修改为驼峰命名法：去掉-,然后将-后的字母大写
					 * 
					 * 我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级
					 * 所以通过js修改的样式往往会立即显示
					 * 
					 * 但是如果在样式中加了：!important，则此时样式会有最高的优先级，
					 * 即使通过JS也不能覆盖该样式，此时会导致JS修改样式失效
					 * 所以尽量不要为样式添加!important
					 */
					box1.style.width = "300px";
					box1.style.height = "300px";
					box1.style.backgroundColor = "yellow";
					
				};
				
				//点击按钮2以后，读取元素的样式
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
         
					//读取box1的样式
					/**
					 * 语法：元素.style.样式名
					 * 通过style属性设置和读取的都是内联样式，无法读取样式表中的样式
					 */
					alert(box1.style.width);//300px;
					
				};
			};
		script>
	head>
	<body>
		<button id="btn01">点我一下button>
		<button id="btn02">获取样式button>
		<br>
		<div id="box1">div>
	body>
html>

  15. 读取元素的样式

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			#box1{
         
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
		style>
		<script type="text/javascript">
			window.onload=function(){
         
				//点击按钮以后读取box1的样式
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
         
					/**
					 * 获取元素当前显示的样式
					 * 语法：元素.currentStyle.样式名
					 * 它可以用来读取当前正在显示的样式。如果当前元素没有设置该样式，则获取它的默认值
					 * 
					 * 注意：currentStyle只有IE浏览器支持，其他的浏览器不支持
					 */
					
					//alert(box1.currentStyle.width);
					
					/**
					 * 在其他的浏览器中可以使用：
					 * 		getComputedStyle()这个方法来获取元素当前的样式
					 * 		这个方法时window的方法，可以直接使用。
					 * 有两个参数：
					 * 		第一个：要获取样式的元素
					 * 		第二个：可以传一个伪元素，一般都传null
					 * 
					 * 该方法会返回一个对象，对象中封装了当前元素对应的样式
					 * 可以通过对象.样式名来读取样式：getComputedStyle(box1,null).width
					 * 
					 * 如果获取的样式没有设置，则会获取到真实的值，而不是默认值，
					 * 例如：没有设置width，他不会获取到auto，而是一个长度px值
					 * 注意：该方法不支持IE8及以下的浏览器
					 * 
					 * 通过currentStyle和ComputedStyle()读取到的样式都是只读的，不能修改
					 * 	如果要修改，必须通过style属性
					 */
					//var obj = getComputedStyle(box1,null);
					//alert(getComputedStyle(box1,null).width);//100px
					
					//alert(getStyle(box1,"width"));
					
					var w = getStyle(box1,"width");
					alert(w);
					
					
				};
			};
			
			/**
			 * 定义一个函数，用来获取指定元素当前的样式
			 * 参数：
			 * 	- obj：要获取样式的元素
			 *  - name：要获取的样式名
			 */
			function getStyle(obj ,name){
         
				//这里加个window，getComputedStyle就是一个属性了，属性没定义返回undefined
				if(window.getComputedStyle){
         //正常浏览器里有getComputedStyle()方法
					//这里的name是变量，需要放在[] 里传递
					return getComputedStyle(obj,null)[name];
				}else{
         
					//IE浏览器
					return obj.currentStyle[name];
				}
				
				//简化，但使用以上代码结构更清晰
				//return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
			}
		script>
	head>
	<body>
		<button id="btn01">点我一下button>
		<br>
		<div id="box1">div>
	body>
html>

  16. 其他样式操作的属性

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			#box1{
         
				width: 100px;
				height: 100px;
				background-color: red;
				padding:10px;
				border:10px solid yellow;
			}
			#box2{
         
				padding:100px;
				background-color: #bfa;
			}
			#box4{
         
				width: 200px;
				height: 300px; 
				background-color: #FF0000;
				overflow: auto;
			}
			#box5{
         
				width:450px;
				height:600px;
				background-color: yellow;
			}
		style>
		<script type="text/javascript">
			
			window.onload = function(){
         
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				var box4 = document.getElementById("box4");
				
				btn01.onclick = function(){
         
					/**
					 * clientWidth
					 * clientHeight
					 *  - 这两个属性可以获取元素的可见宽度和高度
					 *  - 这些属性都是不带px的，返回值是一个数字，可以直接进行计算
					 *  - 会获取元素宽度和高度，包括内容和内边距。不包括边框
					 *  - 这些属性都是只读的，不能修改
					 */
					//alert(box1.clientWidth);
					
					/**
					 * offsetWidth
					 * offsetHeight
					 *  - 获取元素的整个宽度和高度，包括内容区、内边距和边框。
					 */
					//alert(box1.offsetWidth);
					
					/**
					 * offsetParent
					 * 	 - 可以用来获取当前元素的定位父元素
					 *   - 会获取到离当前元素最近的开启了定位的祖先元素。
					 *     如果所有的祖先元素都没有开启定位，则返回body
					 */
					var op = box1.offsetParent;
					//alert(op);
					
					/**
					 * offsetLeft
					 *  - 当前元素当对于其定位父元素的水平偏移量
					 * offsetTop
					 *  - 当前元素当对于其定位父元素的垂直偏移量
					 */
					//alert(box1.offsetLeft);
					
					/**
					 * scrollWidth
					 * scrollHeight
					 *  - 可以获取元素整个滚动区域的宽度和高度
					 */
					alert(box4.scrollHeight);
					
					/**
					 * scrollLeft
					 *  - 可以获取水平滚动条滚动的距离
					 * scrollTop
					 *  - 可以获取垂直滚动条滚动的距离
					 */
					//当满足scrollHeight - scrollTop == clientHeight 时，说明垂直滚动条到底了
					//当满足scrollWidth - scrollLeft == clientWidth 时，说明水平滚动条滚动到底了
					
				};
			};
			
		script>
	head>
	<body>
		<button id="btn01">点我一下button>
		<br />
		<div id="box4">
			<div id="box5">div>
		div>
		<br />
		<div id="box2" style="position:relative;">
			<div id = "box1">div>
		div>
	body>
html>

  17. 事件对象

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
<title>Insert title heretitle>
<style type="text/css">

	#areaDiv {
         
		border: 1px solid black;
		width: 300px;
		height: 50px;
		margin-bottom: 10px;
	}
	
	#showMsg {
         
		border: 1px solid black;
		width: 300px;
		height: 20px;
	}

style>
<script type="text/javascript">

	window.onload = function(){
         
		//当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
		
		//获取两个div
		var areaDiv = document.getElementById("areaDiv");
		var showMsg = document.getElementById("showMsg");
		
		/**
		 * onmousemove 
		 * 	- 该事件将会在鼠标在元素中移动时被触发
		 * 
		 * 事件对象
		 *  - 当事件的响应函数被触发时，浏览器每次都会讲一个事件对象作为实际参数传递进响应函数
		 *  	在事件对象中封装了当前事件相关的一切信息，如：鼠标的坐标、键盘那个按键被按下、鼠标滚轮滚动的方向
		 * 
		 */
		areaDiv.onmousemove = function(event){
         
			/**
			 * 在IE8中，响应函数被触发时，浏览器不会传递事件对象
			 * 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
			 */
			//判断浏览器中是否有event对象，如果没有则让event = window.event 
/* 			if(!event){
				event = window.event;
			} */
			//或者这样写：
			//解决事件对象的兼容性问题
			event = event || window.event;
			
			/**
			 * clientX可以获取鼠标指针的水平坐标
			 * clientY可以获取鼠标指针的垂直坐标
			 */
			var x = event.clientX;
			var y = event.clientY;
			
			//在showMsg中显示鼠标的坐标
			showMsg.innerHTML = "x="+x+"，  y="+y;
		}

	};

script>
head>
<body>

	<div id="areaDiv">div>
	<div id="showMsg">div>

body>
html>

  18. div跟随鼠标移动。

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			body{
         
				height: 1500px;
				width: 2000px;
			}
			#box1{
         
				width:100px;
				height:100px;
				background-color: aquamarine;
				/*开启box1的绝对定位*/
				position:absolute;
			}
		style>
		<script type="text/javascript">
			window.onload = function(){
         
				//使div跟随鼠标移动
				
				//获取box1
				var box1 = document.getElementById("box1");
				//绑定鼠标移动事件：需要绑定在整个界面上，这样只要鼠标不移出浏览器界面
				//不管向哪个方向移动，div都会随着移动
				document.onmousemove = function(event){
         
					//解决兼容性问题
					event = event || window.event;
					
					/**
					 * 获取滚动条滚动的距离
					 * 
					 * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
					 * 火狐等浏览器认为浏览器的滚动条是html的
					 */
					//垂直
					var st = document.body.scrollTop || document.documentElement.scrollTop;
					//水平
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
					
					
					//获取到鼠标的坐标
					/**
					 * clientX 和ClientY
					 * 	用于获取鼠标在当前的可见窗口的坐标。div的偏移量，是相对于整个页面的
					 * 
					 * pageX和pageY可以获取鼠标相对于当前页面的坐标
					 * 	但是这两个属性在IE8中不支持，所以要兼容IE8，则不要使用
					 */
					var left = event.clientX;
					var top = event.clientY;
					
					//设置div的偏移量
					box1.style.left = left + sl + "px";
					box1.style.top = top + st +"px";
				};
			};
		script>
	head>
	<body>
		<div id="box1">
			
		div>
	body>
html>

  19. 事件的冒泡

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			#box1{
         
				width: 200px;
				height: 200px;
				background-color: yellowgreen;
			}
			
			#s1{
         
				background-color: yellow;
			}
			
			
		style>
		<script type="text/javascript">
			
			window.onload = function(){
         
				/**
				 * 事件的冒泡(Bubble)
				 *  - 所谓事件的冒泡就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
				 *  - 在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡
				 */
				
				//为s1绑定一个单击响应函数
				var s1 = document.getElementById("s1");
				s1.onclick = function(event){
         
					event = event || window.event;
					alert("我是span的单击响应函数");
					
					//取消冒泡：将事件对象的cancelBubble设置为true，即可取消冒泡
					event.cancelBubble = true;
				};
				
				//为box1绑定一个单击响应函数
				var box1 = document.getElementById("box1");
				box1.onclick = function(event){
         
					event = event || window.event;
					alert("我是div的单击响应函数");
					
					//取消冒泡：将事件对象的cancelBubble设置为true，即可取消冒泡
					event.cancelBubble = true;
				};
				
				//为body绑定一个单击响应函数
				document.body.onclick = function(){
         
					alert("我是body的单击响应函数");
				};
			};

		script>
	head>
	<body>
		
		<div id="box1">
			我是box1
			<span id="s1">我是spanspan>
		div>
		
	body>
html>

  20. 事件的委派

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script type="text/javascript">
			
			window.onload = function(){
         
				
				var u1 = document.getElementById("u1");
				
				//点击按钮以后添加超链接
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
         
					//创建一个li
					var li = document.createElement("li");
					li.innerHTML = "新建的超链接";
					
					//将li添加到ul中
					u1.appendChild(li);
				};
				
				
				/*
				 * 为每一个超链接都绑定一个单击响应函数
				 * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
				 * 	而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
				 */
				//获取所有的a
				var allA = document.getElementsByTagName("a");
				//遍历
				/*for(var i=0 ; i
				
				/*
				 * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
				 * 我们可以尝试将其绑定给元素的共同的祖先元素
				 * 
				 * 事件的委派
				 * 	- 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
				 * 		从而通过祖先元素的响应函数来处理事件。
				 *  - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
				 */
				
				//为ul绑定一个单击响应函数
				u1.onclick = function(event){
         
					event = event || window.event;
					
					/*
					 * target
					 * 	- event中的target表示的触发事件的对象
					 */
					//alert(event.target);
					
					
					//如果触发事件的对象是我们期望的元素，则执行否则不执行
					if(event.target.className == "link"){
         
						alert("我是ul的单击响应函数");
					}
					
				};
				
			};
			
		script>
	head>
	<body>
		<button id="btn01">添加超链接button>
		
		<ul id="u1" style="background-color: #bfa;">
			<li>
				<p>我是p元素p>
			li>
			<li><a href="javascript:;" class="link">超链接一a>li>
			<li><a href="javascript:;" class="link">超链接二a>li>
			<li><a href="javascript:;" class="link">超链接三a>li>
		ul>
		
	body>
html>

  21. 事件的绑定

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<script type="text/javascript">
			
			window.onload = function(){
         
				
				/*
				 * 点击按钮以后弹出一个内容
				 */
				//获取按钮对象
				var btn01 = document.getElementById("btn01");
				
				/*
				 * 使用 对象.事件 = 函数 的形式绑定响应函数，
				 * 	它只能同时为一个元素的一个事件绑定一个响应函数，
				 * 	不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
				 */
				
				//为btn01绑定一个单击响应函数
				/*btn01.onclick = function(){
					alert(1);
				};*/
				
				//为btn01绑定第二个响应函数
				/*btn01.onclick = function(){
					alert(2);
				};*/
				
				/*
				 * addEventListener()
				 * 	- 通过这个方法也可以为元素绑定响应函数
				 *  - 参数：
				 * 		1.事件的字符串，不要on
				 * 		2.回调函数，当事件触发时该函数会被调用
				 * 		3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
				 * 
				 * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
				 * 	这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
				 * 
				 * 这个方法不支持IE8及以下的浏览器
				 */
				/*btn01.addEventListener("click",function(){
					alert(1);
				},false);
				
				btn01.addEventListener("click",function(){
					alert(2);
				},false);
				
				btn01.addEventListener("click",function(){
					alert(3);
				},false);*/
				
				/*
				 * attachEvent()
				 * 	- 在IE8中可以使用attachEvent()来绑定事件
				 *  - 参数：
				 * 		1.事件的字符串，要on
				 * 		2.回调函数
				 * 
				 *  - 这个方法也可以同时为一个事件绑定多个处理函数，
				 * 		不同的是它是后绑定先执行，执行顺序和addEventListener()相反
				 */
				/*btn01.attachEvent("onclick",function(){
					alert(1);
				});
				
				btn01.attachEvent("onclick",function(){
					alert(2);
				});
				
				btn01.attachEvent("onclick",function(){
					alert(3);
				});*/
				
				/*btn01.addEventListener("click",function(){
					alert(this);
				},false);*/
				
				/*btn01.attachEvent("onclick",function(){
					alert(this);
				});*/
				
				bind(btn01 , "click" , function(){
         
					alert(this);
				});
			
				
			};
			
			//定义一个函数，用来为指定元素绑定响应函数
			/*
			 * addEventListener()中的this，是绑定事件的对象
			 * attachEvent()中的this，是window
			 *  需要统一两个方法this
			 */
			/*
			 * 参数：
			 * 	obj 要绑定事件的对象
			 * 	eventStr 事件的字符串(不要on)
			 *  callback 回调函数
			 */
			function bind(obj , eventStr , callback){
         
				if(obj.addEventListener){
         
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr , callback , false);
				}else{
         
					/*
					 * this是谁由调用方式决定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on"+eventStr , function(){
         
						//在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
			}
			
		script>
	head>
	<body>
		
		<button id="btn01">点我一下button>
	body>
html>

  22. 事件的传播

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			
			#box1{
         
				width: 300px;
				height: 300px;
				background-color: yellowgreen;
			}
			
			#box2{
         
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
			
			#box3{
         
				width: 150px;
				height: 150px;
				background-color: skyblue;
			}
			
		style>
		
		<script type="text/javascript">
			
			window.onload = function(){
         
				
				/*
				 * 分别为三个div绑定单击响应函数
				 */
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var box3 = document.getElementById("box3");
				
				/*
				 * 事件的传播
				 * 	- 关于事件的传播网景公司和微软公司有不同的理解
				 * 	- 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，
				 * 		然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
				 *  - 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，
				 * 		然后在向内传播给后代元素
				 * 	- W3C综合了两个公司的方案，将事件传播分成了三个阶段
				 * 		1.捕获阶段
				 * 			- 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
				 * 		2.目标阶段
				 * 			- 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
				 * 		3.冒泡阶段
				 * 			- 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
				 * 
				 * 		- 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
				 * 			一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
				 * 
				 * 	- IE8及以下的浏览器中没有捕获阶段
				 */
				
				bind(box1,"click",function(){
         
					alert("我是box1的响应函数")
				});
				
				bind(box2,"click",function(){
         
					alert("我是box2的响应函数")
				});
				
				bind(box3,"click",function(){
         
					alert("我是box3的响应函数")
				});
				
			};
			
			
			function bind(obj , eventStr , callback){
         
				if(obj.addEventListener){
         
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr , callback , true);
				}else{
         
					/*
					 * this是谁由调用方式决定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on"+eventStr , function(){
         
						//在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
			}
			
		script>
	head>
	
	<body>
		
		<div id="box1">
			<div id="box2">
				<div id="box3">div>
			div>
		div>
		
	body>
html>

  23. 拖拽

    • 1

      DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			
			#box1{
           
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			#box2{
           
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				
				left: 200px;
				top: 200px;
			}
			
		style>
		
		<script type="text/javascript">
			
			window.onload = function(){
           
				/*
				 * 拖拽box1元素
				 *  - 拖拽的流程
				 * 		1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				 * 		2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
				 * 		3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				//为box1绑定一个鼠标按下事件
				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				box1.onmousedown = function(event){
           
					event = event || window.event;
					//div的偏移量 鼠标.clentX - 元素.offsetLeft
					//div的偏移量 鼠标.clentY - 元素.offsetTop
					var ol = event.clientX - box1.offsetLeft;
					var ot = event.clientY - box1.offsetTop;
					
					
					//为document绑定一个onmousemove事件
					document.onmousemove = function(event){
           
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						//修改box1的位置
						box1.style.left = left+"px";
						box1.style.top = top+"px";
						
					};
					
					//为document绑定一个鼠标松开事件
					document.onmouseup = function(){
           
						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
					};
				};		
			};
			
			
		script>
	head>
	<body>
		<div id="box1">div>
		
		<div id="box2">div>
	body>
html>

    • 2

      DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			
			#box1{
           
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			#box2{
           
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				
				left: 200px;
				top: 200px;
			}
			
		style>
		
		<script type="text/javascript">
			
			window.onload = function(){
           
				/*
				 * 拖拽box1元素
				 *  - 拖拽的流程
				 * 		1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				 * 		2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
				 * 		3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				//为box1绑定一个鼠标按下事件
				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				box1.onmousedown = function(event){
           
					
					//设置box1捕获所有鼠标按下的事件
					/*
					 * setCapture()
					 * 	- 只有IE支持，但是在火狐中调用时不会报错，
					 * 		而如果使用chrome调用，会报错
					 */
					/*if(box1.setCapture){
						box1.setCapture();
					}*/
					box1.setCapture && box1.setCapture();
					
					
					event = event || window.event;
					//div的偏移量 鼠标.clentX - 元素.offsetLeft
					//div的偏移量 鼠标.clentY - 元素.offsetTop
					var ol = event.clientX - box1.offsetLeft;
					var ot = event.clientY - box1.offsetTop;
					
					
					//为document绑定一个onmousemove事件
					document.onmousemove = function(event){
           
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						//修改box1的位置
						box1.style.left = left+"px";
						box1.style.top = top+"px";
						
					};
					
					//为document绑定一个鼠标松开事件
					document.onmouseup = function(){
           
						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
						//当鼠标松开时，取消对事件的捕获
						box1.releaseCapture && box1.releaseCapture();
					};
					
					/*
					 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
					 * 	此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
					 * 	如果不希望发生这个行为，则可以通过return false来取消默认行为
					 * 
					 * 但是这招对IE8不起作用
					 */
					return false;
					
				};
				
				
				
			};
			
			
		script>
	head>
	<body>
		
		我是一段文字
		
		<div id="box1">div>
		
		<div id="box2">div>
	body>
html>

    • 测试IE8

      DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<script type="text/javascript">
			
			window.onload = function(){
           
				//分别为两个按钮绑定单击响应函数
				var btn01 = document.getElementById("btn01");
				var btn02 = document.getElementById("btn02");
				
				btn01.onclick = function(){
           
					alert(1);
				};
				
				btn02.onclick = function(){
           
					alert(2);
				};
				
				//设置btn01对鼠标按下相关的事件进行捕获
				//当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上
				btn01.setCapture();
			};
			
		script>
	head>
	<body>
		<button id="btn01">按钮01button>
		<button id="btn02">按钮02button>
	body>
html>

    • 3

      DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			
			#box1{
           
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			#box2{
           
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				
				left: 200px;
				top: 200px;
			}
			
		style>
		
		<script type="text/javascript">
			
			window.onload = function(){
           
				/*
				 * 拖拽box1元素
				 *  - 拖拽的流程
				 * 		1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				 * 		2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
				 * 		3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var img1 = document.getElementById("img1");
				
				//开启box1的拖拽
				drag(box1);
				//开启box2的
				drag(box2);
				
				drag(img1);
				
				
				
				
			};
			
			/*
			 * 提取一个专门用来设置拖拽的函数
			 * 参数：开启拖拽的元素
			 */
			function drag(obj){
           
				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				obj.onmousedown = function(event){
           
					
					//设置box1捕获所有鼠标按下的事件
					/*
					 * setCapture()
					 * 	- 只有IE支持，但是在火狐中调用时不会报错，
					 * 		而如果使用chrome调用，会报错
					 */
					/*if(box1.setCapture){
						box1.setCapture();
					}*/
					obj.setCapture && obj.setCapture();
					
					
					event = event || window.event;
					//div的偏移量 鼠标.clentX - 元素.offsetLeft
					//div的偏移量 鼠标.clentY - 元素.offsetTop
					var ol = event.clientX - obj.offsetLeft;
					var ot = event.clientY - obj.offsetTop;
					
					
					//为document绑定一个onmousemove事件
					document.onmousemove = function(event){
           
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						//修改box1的位置
						obj.style.left = left+"px";
						obj.style.top = top+"px";
						
					};
					
					//为document绑定一个鼠标松开事件
					document.onmouseup = function(){
           
						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
						//当鼠标松开时，取消对事件的捕获
						obj.releaseCapture && obj.releaseCapture();
					};
					
					/*
					 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
					 * 	此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
					 * 	如果不希望发生这个行为，则可以通过return false来取消默认行为
					 * 
					 * 但是这招对IE8不起作用
					 */
					return false;
					
				};
			}
			
			
		script>
	head>
	<body>
		
		我是一段文字
		
		<div id="box1">div>
		
		<div id="box2">div>
		
		<img src="img/an.jpg" id="img1" style="position: absolute;"/>
	body>
html>

  24. 滚轮事件

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			
			#box1{
         
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
		style>
		<script type="text/javascript">
			
			window.onload = function(){
         
				
				
				//获取id为box1的div
				var box1 = document.getElementById("box1");
				
				//为box1绑定一个鼠标滚轮滚动的事件
				/*
				 * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
				 * 	但是火狐不支持该属性
				 * 
				 * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
				 * 	注意该事件需要通过addEventListener()函数来绑定
				 */
				
				
				box1.onmousewheel = function(event){
         
					
					event = event || window.event;
					
					
					//event.wheelDelta 可以获取鼠标滚轮滚动的方向
					//向上滚 120   向下滚 -120
					//wheelDelta这个值我们不看大小，只看正负
					
					//alert(event.wheelDelta);
					
					//wheelDelta这个属性火狐中不支持
					//在火狐中使用event.detail来获取滚动的方向
					//向上滚 -3  向下滚 3
					//alert(event.detail);
					
					
					/*
					 * 当鼠标滚轮向下滚动时，box1变长
					 * 	当滚轮向上滚动时，box1变短
					 */
					//判断鼠标滚轮滚动的方向
					if(event.wheelDelta > 0 || event.detail < 0){
         
						//向上滚，box1变短
						box1.style.height = box1.clientHeight - 10 + "px";
						
					}else{
         
						//向下滚，box1变长
						box1.style.height = box1.clientHeight + 10 + "px";
					}
					
					/*
					 * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
					 * 需要使用event来取消默认行为event.preventDefault();
					 * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错
					 */
					event.preventDefault && event.preventDefault();
					
					
					/*
					 * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
					 * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
					 */
					return false;
					
					
					
					
				};
				
				//为火狐绑定滚轮事件
				bind(box1,"DOMMouseScroll",box1.onmousewheel);
				
				
			};
			
			
			function bind(obj , eventStr , callback){
         
				if(obj.addEventListener){
         
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr , callback , false);
				}else{
         
					/*
					 * this是谁由调用方式决定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on"+eventStr , function(){
         
						//在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
			}
			
		script>
	head>
	<body style="height: 2000px;">
		
		<div id="box1">div>
		
	body>
html>

  25. 键盘事件

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<script type="text/javascript">
			
			window.onload = function(){
         
				
				/*
				 * 键盘事件：
				 * 	onkeydown
				 * 		- 按键被按下
				 * 		- 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
				 * 		- 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快
				 * 			这种设计是为了防止误操作的发生。
				 * 	onkeyup
				 * 		- 按键被松开
				 * 
				 *  键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
				 */
				
				document.onkeydown = function(event){
         
					event = event || window.event;
					
					/*
					 * 可以通过keyCode来获取按键的编码
					 * 	通过它可以判断哪个按键被按下
					 * 除了keyCode，事件对象中还提供了几个属性
					 * 	altKey
					 * 	ctrlKey
					 * 	shiftKey
					 * 		- 这个三个用来判断alt ctrl 和 shift是否被按下
					 * 			如果按下则返回true，否则返回false
					 */
					
					//console.log(event.keyCode);
					
					//判断一个y是否被按下
					//判断y和ctrl是否同时被按下
					if(event.keyCode === 89 && event.ctrlKey){
         
						console.log("ctrl和y都被按下了");
					}
					
					
				};
				
				/*document.onkeyup = function(){
					console.log("按键松开了");
				};*/
				
				//获取input
				var input = document.getElementsByTagName("input")[0];
				
				input.onkeydown = function(event){
         
					
					event = event || window.event;
					
					//console.log(event.keyCode);
					//数字 48 - 57
					//使文本框中不能输入数字
					if(event.keyCode >= 48 && event.keyCode <= 57){
         
						//在文本框中输入内容，属于onkeydown的默认行为
						//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
						return false;
					}
					
					
				};
			};
			
			
		script>
	head>
	<body>
		
		<input type="text" />
		
	body>
html>

  26. 上下左右键控制div移动练习

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			#box1{
         
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			
		style>
		
		<script type="text/javascript">
			
			//使div可以根据不同的方向键向不同的方向移动
			/*
			 * 按左键，div向左移
			 * 按右键，div向右移
			 * 。。。
			 */
			window.onload = function(){
         
				
				//为document绑定一个按键按下的事件
				document.onkeydown = function(event){
         
					event = event || window.event;
					
					//定义一个变量，来表示移动的速度
					var speed = 10;
					
					//当用户按了ctrl以后，速度加快
					if(event.ctrlKey){
         
						speed = 500;
					}
					
					/*
					 * 37 左
					 * 38 上
					 * 39 右
					 * 40 下
					 */
					switch(event.keyCode){
         
						case 37:
							//alert("向左"); left值减小
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 39:
							//alert("向右");
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 38:
							//alert("向上");
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 40:
							//alert("向下");
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
					
				};
				
			};
			
			
		script>
	head>
	<body>
		<div id="box1">div>
	body>
html>

BOM

  1. BOM概述

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script type="text/javascript">
			/*
			 * BOM
			 * 	- 浏览器对象模型
			 * 	- BOM可以使我们通过JS来操作浏览器
			 * 	- 在BOM中为我们提供了一组对象，用来完成对浏览器的操作
			 * 	- BOM对象
			 * 		Window
			 * 			- 代表的是整个浏览器的窗口，同时window也是网页中的全局对象
			 * 		Navigator
			 * 			- 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
			 * 		Location
			 * 			- 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
			 * 		History
			 * 			- 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
			 * 				由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页
			 * 				而且该操作只在当次访问时有效
			 * 		Screen
			 * 			- 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
			 * 
			 * 
			 * 		这些BOM对象在浏览器中都是作为window对象的属性保存的，
			 * 			可以通过window对象来使用，也可以直接使用
			 * 
			 * 		
			 */
			
			//console.log(navigator);
			//console.log(location);
			//console.log(history);
			
			/*
			 * Navigator
			 * 	- 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
			 * 	- 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
			 * 	- 一般我们只会使用userAgent来判断浏览器的信息，
			 * 		userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，
			 * 		不同的浏览器会有不同的userAgent
			 * 
			 * 火狐的userAgent
			 * 	Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
			 * 
			 * Chrome的userAgent
			 *  Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
			 * 
			 * IE8
			 * 	Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
			 * 
			 * IE9
			 * 	Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
			 * 
			 * IE10
			 * 	Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
			 * 
			 * IE11
			 * 	Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
			 * 	- 在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了
			 */
			
			//alert(navigator.appName);
			
			var ua = navigator.userAgent;
			
			console.log(ua);
			
			if(/firefox/i.test(ua)){
         
				alert("你是火狐！！！");
			}else if(/chrome/i.test(ua)){
         
				alert("你是Chrome");
			}else if(/msie/i.test(ua)){
         
				alert("你是IE浏览器~~~");
			}else if("ActiveXObject" in window){
         
				alert("你是IE11，枪毙了你~~~");
			}
			
			/*
			 * 如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息
			 * 比如：ActiveXObject
			 */
			/*if("ActiveXObject" in window){
				alert("你是IE，我已经抓住你了~~~");
			}else{
				alert("你不是IE~~~");
			}*/
			
			/*alert("ActiveXObject" in window);*/
			
			
			
		script>
	head>
	<body>
		
	body>
html>

  2. History对象

    test01

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<h1>TEST01h1>
		<a href="test02.html">去test02a>
	body>
html>

    test02

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<h1>TEST02h1>
		<a href="02.History.html">去02.History.htmla>
	body>
html>

    History的使用

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<script type="text/javascript">
			/*
			 * History
			 * 	- 对象可以用来操作浏览器向前或向后翻页
			 */
			window.onload = function(){
         
				
				//获取按钮对象
				var btn = document.getElementById("btn");
				
				btn.onclick = function(){
         
					/*
					 * length
					 * 	- 属性，可以获取到当成访问的链接数量
					 */
					//alert(history.length);
					
					/*
					 * back()
					 * 	- 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
					 */
					//history.back();
					
					/*
					 * forward()
					 * 	- 可以跳转下一个页面，作用和浏览器的前进按钮一样
					 */
					//history.forward();
					
					/*
					 * go()
					 * 	- 可以用来跳转到指定的页面
					 * 	- 它需要一个整数作为参数
					 * 		1:表示向前跳转一个页面 相当于forward()
					 * 		2:表示向前跳转两个页面
					 * 		-1:表示向后跳转一个页面
					 * 		-2:表示向后跳转两个页面
					 */
					history.go(-2);
				};
				
			};
			
		script>
	head>
	<body>
		
		<button id="btn">点我一下button>
		
		<h1>Historyh1>
		
		<a href="01.BOM.html">去BOMa>
	body>
html>

  3. location对象

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<script type="text/javascript">
			/*
			 * Location
			 * 	- 该对象中封装了浏览器的地址栏的信息
			 */
			window.onload = function(){
         
				
				//获取按钮对象
				var btn = document.getElementById("btn");
				
				btn.onclick = function(){
         
					
					//如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
					//alert(location);
					
					/*
					 * 如果直接将location属性修改为一个完整的路径，或相对路径
					 * 	则我们页面会自动跳转到该路径，并且会生成相应的历史记录
					 */
					//location = "http://www.baidu.com";
					//location = "01.BOM.html";
					
					/*
					 * assign()
					 * 	- 用来跳转到其他的页面，作用和直接修改location一样
					 */
					//location.assign("http://www.baidu.com");
					
					/*
					 * reload()
					 * 	- 用于重新加载当前页面，作用和刷新按钮一样
					 * 	- 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
					 */
					//location.reload(true);
					
					/*
					 * replace()
					 * 	- 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
					 * 		不会生成历史记录，不能使用回退按钮回退
					 */
					location.replace("01.BOM.html");
					
				};
				
			};
			
		script>
	head>
	<body>
		
		<button id="btn">点我一下button>
		
		<h1>Locationh1>
		
		<input type="text" />
		<a href="01.BOM.html">去BOMa>
	body>
html>

  4. 定时调用

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<script type="text/javascript">
			
			window.onload = function(){
         
				
				//获取count
				var count = document.getElementById("count");
				
				//使count中的内容，自动切换
				/*
				 * JS的程序的执行速度是非常非常快的
				 * 	如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
				 */
				/*for(var i=0 ; i<10000 ; i++){
					count.innerHTML = i;
					
					alert("hello");
				}*/
				
				/*
				 * setInterval()
				 * 	- 定时调用
				 * 	- 可以将一个函数，每隔一段时间执行一次
				 * 	- 参数：
				 * 		1.回调函数，该函数会每隔一段时间被调用一次
				 * 		2.每次调用间隔的时间，单位是毫秒
				 * 
				 * 	- 返回值：
				 * 		返回一个Number类型的数据
				 * 		这个数字用来作为定时器的唯一标识
				 */
				var num = 1;
				
				var timer = setInterval(function(){
         
					
					count.innerHTML = num++;
					
					if(num == 11){
         
						//关闭定时器
						clearInterval(timer);
					}
					
				},1000);
				
				//console.log(timer);
				
				//clearInterval()可以用来关闭一个定时器
				//方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
				//clearInterval(timer);
				
			};
			
			
		script>
	head>
	<body>
		<h1 id="count">h1>
	body>
html>

  5. 切换图片练习

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<script type="text/javascript">
			
			window.onload = function(){
         
				
				/*
				 * 使图片可以自动切换
				 */
				
				//获取img标签
				var img1 = document.getElementById("img1");
				
				//创建一个数组来保存图片的路径
				var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
				
				//创建一个变量，用来保存当前图片的索引
				var index = 0;
				
				//定义一个变量，用来保存定时器的标识
				var timer;
				
				//为btn01绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
         
					
					/*
					 * 目前，我们每点击一次按钮，就会开启一个定时器，
					 * 	点击多次就会开启多个定时器，这就导致图片的切换速度过快，
					 * 	并且我们只能关闭最后一次开启的定时器
					 */
					
					//在开启定时器之前，需要将当前元素上的其他定时器关闭
					clearInterval(timer);
					
					/*
					 * 开启一个定时器，来自动切换图片
					 */
					timer = setInterval(function(){
         
						//使索引自增
						index++;
						//判断索引是否超过最大索引
						/*if(index >= imgArr.length){
							//则将index设置为0
							index = 0;
						}*/
						index %= imgArr.length;
						//修改img1的src属性
						img1.src = imgArr[index];
						
					},1000);
				};
				
				//为btn02绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
         
					//点击按钮以后，停止图片的自动切换，关闭定时器
					/*
					 * clearInterval()可以接收任意参数，
					 * 	如果参数是一个有效的定时器的标识，则停止对应的定时器
					 * 	如果参数不是一个有效的标识，则什么也不做
					 */
					clearInterval(timer);
					
				};
				
				
			};
			
		script>
	head>
	<body>
		
		<img id="img1" src="img/1.jpg"/>
		<br /><br />
		<button id="btn01">开始button>
		<button id="btn02">停止button>
	body>
html>

  6. 移动div的优化

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			#box1{
         
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			
		style>
		
		<script type="text/javascript">
			
			//使div可以根据不同的方向键向不同的方向移动
			/*
			 * 按左键，div向左移
			 * 按右键，div向右移
			 * 。。。
			 */
			window.onload = function(){
         
				
					
				//定义一个变量，来表示移动的速度
				var speed = 10;
				
				//创建一个变量表示方向
				//通过修改dir来影响移动的方向
				var dir = 0;
				
				//开启一个定时器，来控制div的移动
				setInterval(function(){
         
					/*
					 * 37 左
					 * 38 上
					 * 39 右
					 * 40 下
					 */
					switch(dir){
         
						case 37:
							//alert("向左"); left值减小
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 39:
							//alert("向右");
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 38:
							//alert("向上");
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 40:
							//alert("向下");
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
				},30);
				
				
				
				//为document绑定一个按键按下的事件
				document.onkeydown = function(event){
         
					event = event || window.event;
					
					//当用户按了ctrl以后，速度加快
					if(event.ctrlKey){
         
						speed = 500;
					}else{
         
						speed = 10;
					}
					
					//使dir等于按键的值
					dir = event.keyCode;
				};
				
				//当按键松开时，div不再移动
				document.onkeyup = function(){
         
					//设置方向为0
					dir = 0;
				};
				
			};
			
			
		script>
	head>
	<body>
		<div id="box1">div>
	body>
html>

  7. 延时调用

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<script type="text/javascript">
			
			var num = 1;
			
			//开启一个定时器
			/*setInterval(function(){
				console.log(num++);
			},3000);*/
			
			
			/*
			 * 延时调用，
			 * 	延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
			 * 
			 * 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
			 * 
			 * 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择
			 */
			var timer = setTimeout(function(){
         
				console.log(num++);
			},3000);
			
			//使用clearTimeout()来关闭一个延时调用
			clearTimeout(timer);
			
		script>
	head>
	<body>
	body>
html>

  8. 定时器

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			
			*{
         
				margin: 0;
				padding: 0;
			}
			
			#box1{
         
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
			}
			
		style>
		
		<script type="text/javascript">
			
			window.onload = function(){
         
				
				//获取box1
				var box1 = document.getElementById("box1");
				//获取btn01
				var btn01 = document.getElementById("btn01");
				
				//定义一个变量，用来保存定时器的标识
				var timer;
				
				//点击按钮以后，使box1向右移动（left值增大）
				btn01.onclick = function(){
         
					
					//关闭上一个定时器
					clearInterval(timer);
					
					//开启一个定时器，用来执行动画效果
					timer = setInterval(function(){
         
						
						//获取box1的原来的left值
						var oldValue = parseInt(getStyle(box1,"left"));
						
						//在旧值的基础上增加
						var newValue = oldValue + 1;
						
						//判断newValue是否大于800
						if(newValue > 800){
         
							newValue = 800;
						}
						
						//将新值设置给box1
						box1.style.left = newValue + "px";
						
						//当元素移动到800px时，使其停止执行动画
						if(newValue == 800){
         
							//达到目标，关闭定时器
							clearInterval(timer);
						}
						
						
					},30);
					
					
				};
				
			};
			
			
			/*
			 * 定义一个函数，用来获取指定元素的当前的样式
			 * 参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */
			function getStyle(obj , name){
         
				
				if(window.getComputedStyle){
         
					//正常浏览器的方式，具有getComputedStyle()方法
					return getComputedStyle(obj , null)[name];
				}else{
         
					//IE8的方式，没有getComputedStyle()方法
					return obj.currentStyle[name];
				}
				
			}
			
			
		script>
	head>
	<body>
		
		<button id="btn01">点击按钮以后box1向右移动button>
		
		<br /><br />
		
		<div id="box1">div>
		
		<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;">div>
		
	body>
html>

  9. 定时器2

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			
			*{
         
				margin: 0;
				padding: 0;
			}
			
			#box1{
         
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
			}
			
		style>
		
		<script type="text/javascript">
			
			window.onload = function(){
         
				
				//获取box1
				var box1 = document.getElementById("box1");
				//获取btn01
				var btn01 = document.getElementById("btn01");
				
				//获取btn02
				var btn02 = document.getElementById("btn02");
				
				
				//点击按钮以后，使box1向右移动（left值增大）
				btn01.onclick = function(){
         
					move(box1 , 800 , 10);
				};
				
				
				//点击按钮以后，使box1向左移动（left值减小）
				btn02.onclick = function(){
         
					move(box1 , 0 , 10);
				};
				
			};
			
			//定义一个变量，用来保存定时器的标识
			var timer;
			
			//尝试创建一个可以执行简单动画的函数
			/*
			 * 参数：
			 * 	obj:要执行动画的对象
			 * 	target:执行动画的目标位置
			 * 	speed:移动的速度(正数向右移动，负数向左移动)
			 */
			function move(obj , target ,speed){
         
				//关闭上一个定时器
				clearInterval(timer);
				
				//获取元素目前的位置
				var current = parseInt(getStyle(obj,"left"));
				
				//判断速度的正负值
				//如果从0 向 800移动，则speed为正
				//如果从800向0移动，则speed为负
				if(current > target){
         
					//此时速度应为负值
					speed = -speed;
				}
				
				//开启一个定时器，用来执行动画效果
				timer = setInterval(function(){
         
					
					//获取box1的原来的left值
					var oldValue = parseInt(getStyle(obj,"left"));
					
					//在旧值的基础上增加
					var newValue = oldValue + speed;
					
					//判断newValue是否大于800
					//从800 向 0移动
					//向左移动时，需要判断newValue是否小于target
					//向右移动时，需要判断newValue是否大于target
					if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
         
						newValue = target;
					}
					
					//将新值设置给box1
					obj.style.left = newValue + "px";
					
					//当元素移动到0px时，使其停止执行动画
					if(newValue == target){
         
						//达到目标，关闭定时器
						clearInterval(timer);
					}
					
					
				},30);
			}
			
			
			/*
			 * 定义一个函数，用来获取指定元素的当前的样式
			 * 参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */
			function getStyle(obj , name){
         
				
				if(window.getComputedStyle){
         
					//正常浏览器的方式，具有getComputedStyle()方法
					return getComputedStyle(obj , null)[name];
				}else{
         
					//IE8的方式，没有getComputedStyle()方法
					return obj.currentStyle[name];
				}
				
			}
			
			
		script>
	head>
	<body>
		
		<button id="btn01">点击按钮以后box1向右移动button>
		<button id="btn02">点击按钮以后box1向左移动button>
		
		<br /><br />
		
		<div id="box1">div>
		
		<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;">div>
		
	body>
html>

  10. 定时器3

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			
			*{
         
				margin: 0;
				padding: 0;
			}
			
			#box1{
         
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
			}
			
			#box2{
         
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 0;
				top: 200px;
			}
			
		style>
		<script type="text/javascript" src="js/tools.js">script>
		<script type="text/javascript">
			
			window.onload = function(){
         
				
				//获取box1
				var box1 = document.getElementById("box1");
				//获取btn01
				var btn01 = document.getElementById("btn01");
				
				//获取btn02
				var btn02 = document.getElementById("btn02");
				
				
				//点击按钮以后，使box1向右移动（left值增大）
				btn01.onclick = function(){
         
					move(box1 ,"left", 800 , 20);
				};
				
				
				//点击按钮以后，使box1向左移动（left值减小）
				btn02.onclick = function(){
         
					move(box1 ,"left", 0 , 10);
				};
				
				
				//获取btn03
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
         
					move(box2 , "left",800 , 10);
				};
				
				//测试按钮
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
         
					//move(box2 ,"width", 800 , 10);
					//move(box2 ,"top", 800 , 10);
					//move(box2 ,"height", 800 , 10);
					move(box2 , "width" , 800 , 10 , function(){
         
						move(box2 , "height" , 400 , 10 , function(){
         
							move(box2 , "top" , 0 , 10 , function(){
         
								move(box2 , "width" , 100 , 10 , function(){
         
							
								});
							});
						});
					});
				};
			};
			
			//定义一个变量，用来保存定时器的标识
			/*
			 * 目前我们的定时器的标识由全局变量timer保存，
			 * 	所有的执行正在执行的定时器都在这个变量中保存
			 */
			//var timer;
			
			
			
			
		script>
	head>
	<body>
		
		<button id="btn01">点击按钮以后box1向右移动button>
		<button id="btn02">点击按钮以后box1向左移动button>
		<button id="btn03">点击按钮以后box2向右移动button>
		<button id="btn04">测试按钮button>
		
		<br /><br />
		
		<div id="box1">div>
		<div id="box2">div>
		
		<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;">div>
		
	body>
html>

  11. 轮播图

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		
		<style type="text/css">
			*{
         
				margin: 0;
				padding: 0;
			}
			
			/*
			 * 设置outer的样式
			 */
			#outer{
         
				/*设置宽和高*/
				width: 520px;
				height: 333px;
				/*居中*/
				margin: 50px auto;
				/*设置背景颜色*/
				background-color: greenyellow;
				/*设置padding*/
				padding: 10px 0;
				/*开启相对定位*/
				position: relative;
				/*裁剪溢出的内容*/
				overflow: hidden;
			}
			
			/*设置imgList*/
			#imgList{
         
				/*去除项目符号*/
				list-style: none;
				/*设置ul的宽度*/
				/*width: 2600px;*/
				/*开启绝对定位*/
				position: absolute;
				/*设置偏移量*/
				/*
				 * 每向左移动520px，就会显示到下一张图片
				 */
				left: 0px;
			}
			
			/*设置图片中的li*/
			#imgList li{
         
				/*设置浮动*/
				float: left;
				/*设置左右外边距*/
				margin: 0 10px;
			}
			
			/*设置导航按钮*/
			#navDiv{
         
				/*开启绝对定位*/
				position: absolute;
				/*设置位置*/
				bottom: 15px;
				/*设置left值
				 	outer宽度  520
				 	navDiv宽度 25*5 = 125
				 		520 - 125 = 395/2 = 197.5
				 * */
				/*left: 197px;*/
			}
			
			#navDiv a{
         
				/*设置超链接浮动*/
				float: left;
				/*设置超链接的宽和高*/
				width: 15px;
				height: 15px;
				/*设置背景颜色*/
				background-color: red;
				/*设置左右外边距*/
				margin: 0 5px;
				/*设置透明*/
				opacity: 0.5;
				/*兼容IE8透明*/
				filter: alpha(opacity=50);
			}
			
			/*设置鼠标移入的效果*/
			#navDiv a:hover{
         
				background-color: black;
			}
		style>
		
		
		<script type="text/javascript" src="js/tools.js">script>
		<script type="text/javascript">
			window.onload = function(){
         
				//获取imgList
				var imgList = document.getElementById("imgList");
				//获取页面中所有的img标签
				var imgArr = document.getElementsByTagName("img");
				//设置imgList的宽度
				imgList.style.width = 520*imgArr.length+"px";
				
				/*设置导航按钮居中*/
				//获取navDiv
				var navDiv = document.getElementById("navDiv");
				//获取outer
				var outer = document.getElementById("outer");
				//设置navDiv的left值
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
				
				//默认显示图片的索引
				var index = 0;
				//获取所有的a
				var allA = document.getElementsByTagName("a");
				//设置默认选中的效果
				allA[index].style.backgroundColor = "black";
				
				/*
				 	点击超链接切换到指定的图片
				 		点击第一个超链接，显示第一个图片
				 		点击第二个超链接，显示第二个图片
				 * */
				
				//为所有的超链接都绑定单击响应函数
				for(var i=0; i<allA.length ; i++){
         
					
					//为每一个超链接都添加一个num属性
					allA[i].num = i;
					
					//为超链接绑定单击响应函数
					allA[i].onclick = function(){
         
						
						//获取点击超链接的索引,并将其设置为index
						index = this.num;
						
						//切换图片
						/*
						 * 第一张  0 0
						 * 第二张  1 -520
						 * 第三张  2 -1040
						 */
						//imgList.style.left = -520*index + "px";
						//设置选中的a
						setA();
						
						//使用move函数来切换图片
						move(imgList , "left" , -520*index , 20 , function(){
         
							
						});
						
					};
				}
				
				//创建一个方法用来设置选中的a
				function setA(){
         
					
					//遍历所有a，并将它们的背景颜色设置为红色
					for(var i=0 ; i<allA.length ; i++){
         
						allA[i].style.backgroundColor = "";
					}
					
					//将选中的a设置为黑色
					allA[index].style.backgroundColor = "black";
				};
				
				
			};
			
		script>
	head>
	<body>
		
		<div id="outer">
			
			<ul id="imgList">
				<li><img src="img/1.jpg"/>li>
				<li><img src="img/2.jpg"/>li>
				<li><img src="img/3.jpg"/>li>
				<li><img src="img/4.jpg"/>li>
				<li><img src="img/5.jpg"/>li>
			ul>
			
			<div id="navDiv">
				<a href="javascript:;">a>
				<a href="javascript:;">a>
				<a href="javascript:;">a>
				<a href="javascript:;">a>
				<a href="javascript:;">a>
			div>
		div>
	body>
html>

  12. 轮播图

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		
		<style type="text/css">
			*{
         
				margin: 0;
				padding: 0;
			}
			
			/*
			 * 设置outer的样式
			 */
			#outer{
         
				/*设置宽和高*/
				width: 520px;
				height: 333px;
				/*居中*/
				margin: 50px auto;
				/*设置背景颜色*/
				background-color: greenyellow;
				/*设置padding*/
				padding: 10px 0;
				/*开启相对定位*/
				position: relative;
				/*裁剪溢出的内容*/
				overflow: hidden;
			}
			
			/*设置imgList*/
			#imgList{
         
				/*去除项目符号*/
				list-style: none;
				/*设置ul的宽度*/
				/*width: 2600px;*/
				/*开启绝对定位*/
				position: absolute;
				/*设置偏移量*/
				/*
				 * 每向左移动520px，就会显示到下一张图片
				 */
				left: 0px;
			}
			
			/*设置图片中的li*/
			#imgList li{
         
				/*设置浮动*/
				float: left;
				/*设置左右外边距*/
				margin: 0 10px;
			}
			
			/*设置导航按钮*/
			#navDiv{
         
				/*开启绝对定位*/
				position: absolute;
				/*设置位置*/
				bottom: 15px;
				/*设置left值
				 	outer宽度  520
				 	navDiv宽度 25*5 = 125
				 		520 - 125 = 395/2 = 197.5
				 * */
				/*left: 197px;*/
			}
			
			#navDiv a{
         
				/*设置超链接浮动*/
				float: left;
				/*设置超链接的宽和高*/
				width: 15px;
				height: 15px;
				/*设置背景颜色*/
				background-color: red;
				/*设置左右外边距*/
				margin: 0 5px;
				/*设置透明*/
				opacity: 0.5;
				/*兼容IE8透明*/
				filter: alpha(opacity=50);
			}
			
			/*设置鼠标移入的效果*/
			#navDiv a:hover{
         
				background-color: black;
			}
		style>
		
		
		<script type="text/javascript" src="js/tools.js">script>
		<script type="text/javascript">
			window.onload = function(){
         
				//获取imgList
				var imgList = document.getElementById("imgList");
				//获取页面中所有的img标签
				var imgArr = document.getElementsByTagName("img");
				//设置imgList的宽度
				imgList.style.width = 520*imgArr.length+"px";
				
				
				/*设置导航按钮居中*/
				//获取navDiv
				var navDiv = document.getElementById("navDiv");
				//获取outer
				var outer = document.getElementById("outer");
				//设置navDiv的left值
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
				
				//默认显示图片的索引
				var index = 0;
				//获取所有的a
				var allA = document.getElementsByTagName("a");
				//设置默认选中的效果
				allA[index].style.backgroundColor = "black";
				
				/*
				 	点击超链接切换到指定的图片
				 		点击第一个超链接，显示第一个图片
				 		点击第二个超链接，显示第二个图片
				 * */
				
				//为所有的超链接都绑定单击响应函数
				for(var i=0; i<allA.length ; i++){
         
					
					//为每一个超链接都添加一个num属性
					allA[i].num = i;
					
					//为超链接绑定单击响应函数
					allA[i].onclick = function(){
         
						
						//关闭自动切换的定时器
						clearInterval(timer);
						//获取点击超链接的索引,并将其设置为index
						index = this.num;
						
						//切换图片
						/*
						 * 第一张  0 0
						 * 第二张  1 -520
						 * 第三张  2 -1040
						 */
						//imgList.style.left = -520*index + "px";
						//设置选中的a
						setA();
						
						//使用move函数来切换图片
						move(imgList , "left" , -520*index , 20 , function(){
         
							//动画执行完毕，开启自动切换
							autoChange();
						});
						
					};
				}
				
				
				//开启自动切换图片
				autoChange();
				
				
				//创建一个方法用来设置选中的a
				function setA(){
         
					
					//判断当前索引是否是最后一张图片
					if(index >= imgArr.length - 1){
         
						//则将index设置为0
						index = 0;
						
						//此时显示的最后一张图片，而最后一张图片和第一张是一摸一样
						//通过CSS将最后一张切换成第一张
						imgList.style.left = 0;
					}
					
					//遍历所有a，并将它们的背景颜色设置为红色
					for(var i=0 ; i<allA.length ; i++){
         
						allA[i].style.backgroundColor = "";
					}
					
					//将选中的a设置为黑色
					allA[index].style.backgroundColor = "black";
				};
				
				//定义一个自动切换的定时器的标识
				var timer;
				//创建一个函数，用来开启自动切换图片
				function autoChange(){
         
					
					//开启一个定时器，用来定时去切换图片
					timer = setInterval(function(){
         
						
						//使索引自增
						index++;
						
						//判断index的值
						index %= imgArr.length;
						
						//执行动画，切换图片
						move(imgList , "left" , -520*index , 20 , function(){
         
							//修改导航按钮
							setA();
						});
						
					},3000);
					
				}
				
				
			};
			
		script>
	head>
	<body>
		
		<div id="outer">
			
			<ul id="imgList">
				<li><img src="img/1.jpg"/>li>
				<li><img src="img/2.jpg"/>li>
				<li><img src="img/3.jpg"/>li>
				<li><img src="img/4.jpg"/>li>
				<li><img src="img/5.jpg"/>li>
				<li><img src="img/1.jpg"/>li>
			ul>
			
			<div id="navDiv">
				<a href="javascript:;">a

你可能感兴趣的:(Web前端,css,html,html5,javascript,css3)

  • 事件循环_经典面试题 还是鼠鼠 javascriptajax前端vscodehtml5
    目录代码分析代码解读执行顺序执行结果结论文件名：在JavaScript中，理解事件循环（EventLoop）是掌握异步编程的基础。事件循环决定了代码的执行顺序，包括宏任务（Macrotasks）和微任务（Microtasks）的调度。为了更好地理解事件循环，我们通过一个经典的面试题来展示JavaScript中的异步执行顺序。代码分析这是一个简单的HTML文件，包含了一段JavaScript代码，我
  • JavaScript 系列之：函数 程序员SKY JavaScriptjavascript
    函数的定义方式函数声明functionadd(a,b){returna+b;}函数声明的最重要的一个特征是函数声明提升，它允许你在函数声明之前调用该函数。add(1,2);functionadd(a,b){returna+b;}函数表达式//普通的函数表达式letadd=function(a,b){returna+b;}add(1,2)//函数表达式也可以有函数名，这个函数名不能在函数外面用，只能
  • 前端架构设计 weixin_34266504 前端测试javascriptViewUI
    最近在拜读一本《前端架构设计》的书，该书讲到前端架构师的用户是开发人员。所选择的工具、编写的代码、创建的流程，都是为了让开发人员能够构建出最高效的、不出错的、可扩展的和可持续优化的系统。一、HTML1）标签规范化div乱炖是指嵌套多层div元素。为了保持简洁，语义化的标签是首选，应用样式所依靠的是HTML5元素名称和它们的层级关系，在标记中没有类名，往往写出层级的后代选择器。2）模块化方法前端开发
  • 深入理解 JSP：从基础知识到实战技巧的全面解析 CarlowZJ java开发语言
    JSP（JavaServerPages）是一种基于Java的服务器端技术，用于开发动态Web应用。它通过将Java代码嵌入到HTML页面中，简化了Web开发的复杂性。JSP是JavaWeb开发的重要组成部分，与Servlet、JavaBean等技术紧密集成，广泛应用于企业级Web应用开发。本文将从基础知识、核心特性、生命周期、与Servlet的关系、框架支持、最佳实践等方面对JSP进行详细解析，帮
  • React - 兄弟互传 - 消息订阅 - 发布机制 来一碗刘肉面 Reactreact.js前端javascript
    pubsub-js是一个轻量级的JavaScript库，用于实现发布-订阅（Pub/Sub）模式。该模式使得组件间的通信变得简单和高效，特别适用于React中的兄弟组件之间通信。通过pubsub-js，一个组件可以发布消息，其他组件可以订阅这些消息以获得更新。1.安装pubsub-jsnpminstallpubsub-js//或者yarnaddpubsub-js2.基本概念发布（Publish）:
  • HTML学习笔记 誓死守护发际线 html学习笔记
    文章目录(一)HTML简介一、网页1.什么是网页2.什么是HTML二、常用的浏览器1.常用的浏览器2.浏览器内核（渲染引擎）3.web标准(二)HTML标签一、HTML语法规范1.基本语法概述2.标签的关系二、HTML基本结构标签三、网页开发工具1.VSCode的使用：2.vsCode工具生成骨架标签新增代码1）标签2）lang语言3）charset字符集四、HTML常用标签1.语义化标签：2.标
  • XSL是指可扩展样式表语言 (EXtensible Stylesheet Language) 万事俱备，就差一个程序员了
    XSLXSL是指可扩展样式表语言(EXtensibleStylesheetLanguage)，是一种用于以可读格式呈现XML数据的语言。目录简介语法XSL是否与XML相同用途应用简介XSL之于XML,就像CSS之于HTML。它是指可扩展样式表语言(EXtensibleStylesheetLanguage)。这是一种用于以可读格式呈现XML数据的语言。xsl是一种标记语言，表示如何将xml文档的内容
  • HTML AI 编程助手 wjs2024 开发语言
    HTMLAI编程助手引言随着人工智能技术的飞速发展，编程领域也迎来了新的变革。HTML，作为网页制作的基础语言，与AI技术的结合，为开发者带来了前所未有的便利。本文将探讨HTMLAI编程助手的功能、应用场景以及如何利用它提高编程效率。HTMLAI编程助手概述HTMLAI编程助手是一种基于人工智能技术的辅助工具，旨在帮助开发者快速、高效地完成HTML代码编写。通过学习大量的HTML代码，AI编程助手
  • javaScript-系统知识点【 常见问题及其解决办法】 大麦大麦 2025前端面经javascript开发语言ecmascript前端面试
    会造成内存泄漏的情况（中级）setTimeout的第⼀个参数使⽤字符串⽽非函数的话，会引发内存泄漏。//setTimeout的错误使用setTimeout('666',100)//setTimeout的正确用法setTimeout(()=>{console.log('666')},1000)前端常见内存泄漏及解决方案如何捕获JS程序的异常？两种方式trycatchwindow.onerror//手
  • JavaScript 系列八：同步与异步 XHSRookies JavaScriptjavascript
    快来加入我们吧！"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们(https://xhs-rookies.com/)进行学习，及时获取最新文章。"Codetailor"，如果您对我们文章感兴趣、或是想提一些建议，微信关注“小和山的菜鸟们”公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！
  • 第三百七十二节 JavaFX教程 - JavaFX HTMLEditor 程序猿小D java前端服务器
    JavaFX教程-JavaFXHTMLEditorHTMLEditor控件是一个富文本编辑器，具有以下功能。粗体斜体下划线删除线字体系列字体大小前景色背景颜色缩进项目符号列表编号列表对齐水平线复制文本片段粘贴文本片段HTMLEditor类返回HTML字符串中的编辑内容。创建HTML编辑器importjavafx.application.Application;importjavafx.scene.
  • 爬虫：一文掌握JavaScript hook的详细使用 数据知道 2025年爬虫和逆向教程爬虫javascript开发语言python数据采集前端
    文章目录一、什么是JavaScriptHook？二、JavaScriptHook的常见用途三、常见的JavaScriptHook技术3.1函数劫持（FunctionHooking）3.2代理对象（Proxy）3.3MutationObserver3.4EventListenerHook四、在爬虫中的应用4.1使用Puppeteer拦截AJAX请求4.2使用Playwright注入Hook4.3表单
  • Node.js学习01-初识Node.js与内置模块 Meowmow nodejsnode.js学习javascript
    目录初识Node.js在Node.js环境执行js代码内置模块fs文件系统模块路径动态拼接问题path路径模块http模块request请求对象初识Node.jsNode.js是基于ChromeV8引擎的JavaScript运行环境，无法调用DOM和BOM等浏览器内置API。使用Node.js可以：基于Express框架快速搭建web应用基于Electron框架构建跨平台的桌面应用基于restif
  • html data-src和src的区别,img 的data-src 属性实现懒加载 薄辉 htmldata-src和src的区别
    一、什么是图片懒加载？当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次)，当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。通俗一点：1、就是创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1*1px的图片路径。2、当页面滚动直至此图片出现在可
  • 浅谈流媒体技术在无线网络中的应用 chenjie19891104 流媒体技术网络流媒体服务器服务器interneth.264路由器
    原文地址：http://info.broadcast.hc360.com/2009/10/100913135646.shtml流媒体即媒体内容通过数据网络传送到客户端的同时，在客户端播放的一种机制。流媒体技术首先出现在固定网络通信中，在网络上传送音视频等多媒体信息的方法主要采用下载和流式两种传送方式。对于下载方式而言，由于大文件往往需要大量的存储容量，同时受到网络带宽的限制，下载常常会花数分钟甚至
  • 使用Windows系统进行Node.js离线安装 YOUFDJ windowsnode.js编程
    Node.js是一个基于ChromeV8引擎的JavaScript运行时，广泛用于服务器端开发。通常情况下，我们可以通过官方网站下载安装程序进行Node.js的安装，但有时候在没有网络连接的情况下，我们需要进行离线安装。本文将详细介绍如何在Windows系统下进行Node.js的离线安装。以下是进行Node.js离线安装的步骤：第一步：下载Node.js安装包首先，我们需要从官方网站或其他可信来源
  • 前端面试100问！！ 一只松 javascriptes6
    面试造火箭，工作拧螺丝！在技术圈毕竟只有百分之一的人能进入BAT，百分之九九的小伙伴只能在普通公司做这普通的事情，厌烦哪些标题党，我们抛开那些高大上的台词，回归到面试的本质。本课程帮助小伙伴们快速梳理知识，不会涉及到具体的很细节的知识点，关注面试本身。公司一般会从以下5个方面考察一个人的能力，本课程的100问是总结了最近2-3年常问的面试题，适合初中级前端工程师。1、HTML(5)和CSS3方面1
  • nuxt常用组件库html-validator应用解析 垣宇 vue.js
    html-validator主要用于自动验证nuxt服务器呈现的HTML(SSR和SSG)，以检测可能导致水合错误的HTML常见问题，有助于减少水合错误，检测常见的可访问性错误。安装npxnuxi@latestmoduleaddhtml-validator配置若自动更新nuxt.config.ts配置文件失败，可手动添加下面代码:nuxt3defineNuxtConfig({modules:['@
  • 前端面试题---2022 每日一小知识 前端htmlnpmvscodenode.js
    *集大成之面试题，我们不做面试题的创作者，只做面试题的搬运工（侵必删）〇理论一个完整的URL解析过程1用户输入URL地址。2对URL地址进行DNS域名解获得IP地址。3建立TCP连接（三次握手）。4浏览器向web服务器发送一个HTTP请求报文。5服务器返回HTTP响应报文给客户端。6关闭TCP连接（四次挥手）。7浏览器解析文档资源并渲染页面。解析过程：浏览器解析的资源（html，svg,Xhtml
  • 大白话html第五章HTML5 新增表单元素和属性 IT木昜 大白话htmlhtmlhtml5前端
    大白话html第五章HTML5新增表单元素和属性HTML5给表单带来了很多新的小伙伴，让我们收集用户信息变得更方便、更智能。新增表单元素：这个就像一个自带日历的小框框，用户可以直接在里面选择日期，不用手动输入。你的生日：：专门用来收集用户邮箱地址的，浏览器会自动检查用户输入的是不是一个合法的邮箱格式。你的邮箱：：当你需要用户输入网址的时候，用这个标签。浏览器会检查输入的是不是一个合法的网址。你的网
  • 深入探索CSS：从基础到高级，解锁网页设计的无限可能 斯~内克 csscss前端
    CSS（层叠样式表）是现代网页设计中不可或缺的一部分，它不仅决定了网页的外观和风格，还极大地影响了用户体验和交互效果。从简单的文本样式到复杂的布局设计，CSS的灵活性和强大功能使其成为前端开发的核心技术之一。本文将从CSS的基础概念出发，逐步深入到高级应用，带你全面了解CSS的魅力和实用性。一、CSS简介：网页设计的基石CSS是一种用于描述HTML或XML文档外观和格式的样式表语言。它的主要作用是
  • 终极指南：styled-components 深度解析与实战对比 ox0080 #北漂+滴滴出行WebVIP激励styled-comCSS
    一、CSS-in-JS革命：现代Web样式新范式1.1传统CSS的三大痛点全局污染：class命名冲突导致"样式战争"状态隔离：动态样式需要操作DOM类名架构割裂：样式文件与组件逻辑分离//传统CSS的典型问题实例//Button.css.btn{background:blue;}//全局作用域//App.css.btn{padding:10px;}//意外覆盖1.2CSS-in-JS的核心优势真
  • 前端：HTML 00&00 前端前端html
    HTML（超文本标记语言，HyperTextMarkupLanguage）是构建网页的标准标记语言。它被广泛用于创建和设计网页内容，使得文本、图像、链接、表格等元素能够在浏览器中以结构化的形式展示。以下是HTML的详细介绍：1.HTML的基本结构HTML文档通常由一系列嵌套的元素和标签构成，具有以下基本结构：      文档标题  欢迎使用HTML！  这是一个段落。``：声明文档类型，告知浏览器
  • 【大数据】es ElasticSearch常用操作：查询与聚合篇 roshy 大数据
    0说明基于es5.4和es5.6，列举的是个人工作中经常用到的查询（只是工作中使用的是JavaAPI），如果需要看完整的，可以参考官方相关文档https://www.elastic.co/guide/en/elasticsearch/reference/5.4/search.html。1查询先使用一个快速入门来引入，然后后面列出的各种查询都是用得比较多的（在我的工作环境是这样），其它没怎么用的这里
  • 前端必知必会-Vue动画Animations-Transition ‘name‘ 属性 编程岁月 前端vue.jsjavascript
    文章目录Transition'name'属性Transition‘name’属性如果您有多个组件，但您希望至少一个组件具有不同的动画，则需要为组件指定不同的名称以区分它们。我们可以使用name属性选择组件的名称，这也会更改过渡类的名称，以便我们可以为该组件设置不同的CSS动画规则。如果过渡名称属性值设置为‘swirl’，则自动可用的类现在将以‘swirl-’而不是‘v-’开头：swirl-ente
  • 【Jenkins】个人向-Jenkinsfile如何写 luojiaao 汽车软件开发-工具链jenkins运维
    官方参考：https://www.jenkins.io/doc/book/pipeline/syntax/PipelineUtilitySteps插件：https://birdbook.com.cn/ops/ci/jenkins/plugins/pipeline%20utility%20steps.html常用环境变量含义表达式备注params，传入参数传入参数params.都可以用env.来访问
  • python数据分析之爬虫基础：爬虫介绍以及urllib详解 web13765607643 python数据分析爬虫
    前言在数据分析中，爬虫有着很大作用，可以自动爬取网页中提取的大量的数据，比如从电商网站手机商品信息，为市场分析提供数据基础。也可以补充数据集、检测动态变化等一系列作用。可以说在数据分析中有着相当大的作用！页面结构介绍这里主要介绍HTML的一些简单结构，需要一点前端的知识，可以根据情况直接跳过。Title姓名年龄性别张三18男铁锅炖大鹅小鸡炖蘑菇锅包肉奖励自己睡觉起床读书学习爬虫相关概念1、爬虫的概
  • java计算机毕业设计企业销售管理系统源代码+数据库+系统+lw文档 今晚的月亮真好看 java开发语言
    java计算机毕业设计企业销售管理系统源代码+数据库+系统+lw文档java计算机毕业设计企业销售管理系统源代码+数据库+系统+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：https://p
  • VUE实现日历记录事件 yu_zheng5163 vue.jsjavascriptecmascript
    el-calendarHTML代码段可以根据自己的需要显示内容，样式-1?'lar-is-selected':'lar-no-selected'"@click="holidayUpdate(data,date)">班-1&&queryDate.indexOf(data.day)!=-1"style="color:#f73131">休 -1?'color:#F73131;text-alig
  • HTML---css选择器 lh_freak htmlcss前端
    CSS指层叠样式表，是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，CSS文件扩展名为.css。使用CSS我们可以大大提升网页开发的工作效率！插入样式表的方法有三种:外部样式(Externalstylesheet)内部样式(Internalstylesheet)内联样式(Inlinestyle)内联样式（行内样式）hello样式直接写入到本元素标签中
  • 统一思想认识 永夜-极光 思想
    1.统一思想认识的基础,才能有的放矢  原因:    总有一种描述事物的方式最贴近本质,最容易让人理解.    如何让教育更轻松,在于找到最适合学生的方式.          难点在于,如何模拟对方的思维基础选择合适的方式.   &
  • Joda Time使用笔记 bylijinnan javajoda time
    Joda Time的介绍可以参考这篇文章： http://www.ibm.com/developerworks/cn/java/j-jodatime.html 工作中也常常用到Joda Time，为了避免每次使用都查API，记录一下常用的用法：     /** * DateTime变化（增减） */ @Tes
  • FileUtils API eksliang FileUtilsFileUtils API
    转载请出自出处：http://eksliang.iteye.com/blog/2217374 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • 各种新兴技术 不懂事的小屁孩 技术
    1:gradle Gradle 是以 Groovy 语言为基础，面向Java应用为主。基于DSL（领域特定语言）语法的自动化构建工具。 现在构建系统常用到maven工具，现在有更容易上手的gradle， 搭建java环境: http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/ 搭建android环境： http://m
  • tomcat6的https双向认证 酷的飞上天空 tomcat6
    1.生成服务器端证书 keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36
  • 托管虚拟桌面市场势不可挡 蓝儿唯美
    用户还需要冗余的数据中心，dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台，提供服务或者MSP也可以自己来控制。 在某些情况下，MSP会在dinCloud的云服务上进行服务分层，如监控和补丁管理。 MSP的利润空间将根据其参与的程度而有所不同，Din说。 “我们有一些合作伙伴负责将我们推荐给客户作为个
  • spring学习——xml文件的配置 a-john spring
    在Spring的学习中，对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中，采用XML配置也是最常见的。以下是一个简单的XML配置文件： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.or
  • HDU 4342 History repeat itself 模拟 aijuans 模拟
    来源：http://acm.hdu.edu.cn/showproblem.php?pid=4342 题意：首先让求第几个非平方数，然后求从1到该数之间的每个sqrt(i)的下取整的和。 思路：一个简单的模拟题目，但是由于数据范围大，需要用__int64。我们可以首先把平方数筛选出来，假如让求第n个非平方数的话，看n前面有多少个平方数，假设有x个，则第n个非平方数就是n+x。注意两种特殊情况，即
  • java中最常用jar包的用途 asia007 java
    java中最常用jar包的用途 jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口，提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法，以及接收和处理SOAP错误的方法.  w
  • ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法 百合不是茶 jsjson编码返回异常
    一:ajax获取自定义Struts框架中的json编码  出现以下 问题:       1,强制flush输出  json编码打印在首页 2, 不强制flush js会解析json 打印出来的是错误的jsp页面   却没有跳转到错误页面 3,  ajax中的dataType的json 改为text 会
  • JUnit使用的设计模式 bijian1013 java设计模式JUnit
    JUnit源代码涉及使用了大量设计模式 1、模板方法模式（Template Method）         定义一个操作中的算法骨架，而将一些步骤延伸到子类中去，使得子类可以不改变一个算法的结构，即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构，也就是步骤，而步骤的实现可以在子类中完成。   
  • Linux常用命令（摘录） sunjing crondchkconfig
    chkconfig --list   查看linux所有服务 chkconfig --add servicename 添加linux服务 netstat -apn | grep 8080  查看端口占用 env 查看所有环境变量 echo $JAVA_HOME 查看JAVA_HOME环境变量   安装编译器 yum install -y gcc
  • 【Hadoop一】Hadoop伪集群环境搭建 bit1129 hadoop
     结合网上多份文档，不断反复的修正hadoop启动和运行过程中出现的问题，终于把Hadoop2.5.2伪分布式安装起来，跑通了wordcount例子。Hadoop的安装复杂性的体现之一是，Hadoop的安装文档非常多，但是能一个文档走下来的少之又少，尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布，但是它的配置跟2.5.0，2.5.1没有分别。 &nb
  • Anychart图表系列五之事件监听 白糖_ chart
    创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。 以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下： <script> //创建AnyChart var chart = new AnyChart(); //添加钻取操作&quo
  • Web前端相关段子 braveCS web前端
    Web标准：结构、样式和行为分离   使用语义化标签 0）标签的语义：使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页结构，抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。 1）div和span是没有语义的：只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时，才会适当添加div
  • 编程之美-24点游戏 bylijinnan 编程之美
    import java.util.ArrayList; import java.util.Arrays; import java.util.HashSet; import java.util.List; import java.util.Random; import java.util.Set; public class PointGame { /**编程之美
  • 主页面子页面传值总结 chengxuyuancsdn 总结
    1、showModalDialog returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值 主界面 var sonValue=window.showModalDialog("son.jsp"); 子界面 window.retu
  • [网络与经济]互联网+的含义 comsci 互联网+
          互联网+后面是一个人的名字 = 网络控制系统       互联网+你的名字 =  网络个人数据库       每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不
  • oracle 创建视图 with check option daizj 视图vieworalce
    我们来看下面的例子： create or replace view testview as select empno,ename from emp where ename like ‘M%’ with check option; 这里我们创建了一个视图，并使用了with check option来限制了视图。 然后我们来看一下视图包含的结果： select * from testv
  • ToastPlugin插件在cordova3.3下使用 dibov Cordova
        自己开发的Todos应用，想实现“ 再按一次返回键退出程序 ”的功能，采用网上的ToastPlugins插件，发现代码或文章基本都是老版本，运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。       ToastPlugin.java package&nbs
  • C语言22个系统函数 dcj3sjt126com cfunction
    C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分（尾数）x和 以2位的指数部分n，即num=x*2n，指数n存放在exp指向的变量中，返回x。D
  • 开发一个类的流程 dcj3sjt126com 开发
    本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件，并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库，供以后复用。   以下是开发流程： 1. 明确类的功能，抽象出类的大概结构 2. 初步设想类的接口 3. 类名设计（驼峰式命名） 4. 属性设置(权限设置) 判断某些变量是否有必要作为成员属
  • java 并发 shuizhaosi888 java 并发
    能够写出高伸缩性的并发是一门艺术   在JAVA SE5中新增了3个包 java.util.concurrent java.util.concurrent.atomic java.util.concurrent.locks 在java的内存模型中，类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享，局部变量与方法参数都是线程私有的，不会被共享。
  • Spring Security（11）——匿名认证 234390216 Spring SecurityROLE_ANNOYMOUS匿名
    匿名认证 目录 1.1     配置 1.2     AuthenticationTrustResolver          对于匿名访问的用户，Spring Security支持为其建立一个匿名的AnonymousAuthenticat
  • NODEJS项目实践0.2[ express,ajax通信...] 逐行分析JS源代码 Ajaxnodejsexpress
      一、前言         通过上节学习，我们已经        ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务 及 mongodb的存取，但写着写着，web端就
  • 在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值 lhbthanks javahtmlstrutscheckbox
    第一种方法：获取结果String类型 在 Action 中获得的是一个 String 型数据，每一个被选中的 checkbox 的 value 被拼接在一起，每个值之间以逗号隔开(,)。 所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。 以下是实现的代码： 前台 HTML 代码：
  • 003.Kafka基本概念 nweiren hadoopkafka
    Kafka基本概念：Topic、Partition、Message、Producer、Broker、Consumer。 Topic：             消息源（Message）的分类。 Partition：             Topic物理上的分组，一
  • Linux环境下安装JDK roadrunners jdklinux
    1、准备工作 创建JDK的安装目录： mkdir -p /usr/java/   下载JDK，找到适合自己系统的JDK版本进行下载： http://www.oracle.com/technetwork/java/javase/downloads/index.html   把JDK安装包下载到/usr/java/目录，然后进行解压： tar -zxvf jre-7
  • Linux忘记root密码的解决思路 tomcat_oracle linux
    1：使用同版本的linux启动系统，chroot到忘记密码的根分区passwd改密码 　　2：grub启动菜单中加入init=/bin/bash进入系统，不过这时挂载的是只读分区。根据系统的分区情况进一步判断. 　　3: grub启动菜单中加入 single以单用户进入系统. 　　4:用以上方法mount到根分区把/etc/passwd中的root密码去除 　　例如: 　　ro
  • 跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现 xueyou jsonpjquery框架UIhtml5
    postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样，前者是前端擅长跨域文档数据即时通讯，后者擅长针对跨域服务端数据通讯，p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他