js学习day09

﹏ヽ暗。殇╰゛Y 2023-02-26 08:22 21阅读 0赞

<!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8" />
      <title></title>
      <script type="text/javascript">
       
       var str = prompt("请输出任意的内容:");
       
       //var arr = str.split("");
       
       //arr.reverse();
       
       //str = arr.join("");
       
       str = str.split("").reverse().join("");
       
       alert(str);
       
      </script>
     </head>
     <body>
      
     </body>
    </html>
    
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			
    			/* * 创建一个正则表达式检查一个字符串中是否含有aaa */
    			
    			/* * 量词 * - 通过量词可以设置一个内容出现的次数 * - 量词只对它前边的一个内容起作用 * - {n} 正好出现n次 * - {m,n} 出现m-n次 * - {m,} m次以上 * - + 至少一个，相当于{1,} * - * 0个或多个，相当于{0,} * - ? 0个或1个，相当于{0,1} */
    			var reg = /a{ 3}/; //ababab reg = /(ab){ 3}/; reg = /b{ 3}/; reg = /ab{ 1,3}c/; reg = /ab{ 3,}c/;
    			
    			reg = /ab+c/;
    			
    			reg = /ab*c/;
    			
    			reg = /ab?c/;
    			
    			//console.log(reg.test("abbc"));
    			
    			/* * 检查一个字符串中是否以a开头 * ^ 表示开头 * $ 表示结尾 */
    			reg = /^a/; //匹配开头的a
    			
    			reg = /a$/; //匹配结尾的a
    			
    			//console.log(reg.test("abcabca"));
    			
    			/* * 如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式 */
    			reg = /^a$/;
    			
    			//console.log(reg.test("bbca"));
    			
    			/* * 创建一个正则表达式，用来检查一个字符串是否是一个合法手机号 * * 手机号的规则： * 1 3 567890123 （11位） * * 1. 以1开头 * 2. 第二位3-9任意数字 * 3. 三位以后任意数字9个 * * ^1 [3-9] [0-9]{9}$ * */
    			
    			var phoneStr = "13067890123"; var phoneReg = /^1[3-9][0-9]{ 9}$/;
    			
    			console.log(phoneReg.test(phoneStr));
    			
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>
    
    
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			
    			/* * 检查一个字符串中是否含有 . * . 表示任意字符 * 在正则表达式中使用\作为转义字符 * \. 来表示. * \\ 表示\ * * 注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符， * 如果要使用\则需要使用\\来代替 */
    			var reg = /\./;
    			
    			reg = /\\/;
    			
    			reg = new RegExp("\\.");
    			reg = new RegExp("\\\\");
    			
    			/* * \w * - 任意字母、数字、_ [A-z0-9_] * \W * - 除了字母、数字、_ [^A-z0-9_] * \d * - 任意的数字 [0-9] * \D * - 除了数字 [^0-9] * \s * - 空格 * \S * - 除了空格 * \b * - 单词边界 * \B * - 除了单词边界 */
    			
    			reg = /\w/;
    			reg = /\W/;
    			
    			reg = /\d/;
    			reg = /\D/;
    			
    			reg = /\s/;
    			reg = /\S/;
    			
    			/* * 创建一个正则表达式检查一个字符串中是否含有单词child */
    			
    			reg = /\bchild\b/;
    			
    			//console.log(reg.test("hello child "));
    			
    			//接收一个用户的输入
    			//var str = prompt("请输入你的用户名:");
    			
    			var str = " he llo ";
    			
    			//去除掉字符串中的前后的空格
    			//去除空格就是使用""来替换空格
    			console.log(str);
    			
    			//str = str.replace(/\s/g , "");
    			
    			//去除开头的空格
    			//str = str.replace(/^\s*/, "");
    			//去除结尾的空格
    			//str = str.replace(/\s*$/, "");
    			// /^\s*|\s*$/g 匹配开头和结尾的空格
    			str = str.replace(/^\s*|\s*$/g,"");
    			
    			
    			console.log(str);
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>
    
    
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    			
    			/* * 电子邮件 * hello .nihao @ abc .com.cn * * 任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母（2-5位） .任意字母（2-5位） * * \w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2} */
    			
    			var emailReg = /^\w{ 3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{ 2,5}){ 1,2}$/;
    			
    			var email = "abc.hello@163.com";
    			
    			console.log(emailReg.test(email));
    			
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>
    
    
    
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<button id="btn">我是一个按钮</button>
    		<script type="text/javascript">
    			
    			/* * 浏览器已经为我们提供 文档节点 对象这个对象是window属性 * 可以在页面中直接使用，文档节点代表的是整个网页 */
    			//console.log(document);
    			
    			//获取到button对象
    			var btn = document.getElementById("btn");
    			
    			//修改按钮的文字
    			btn.innerHTML = "I'm Button";
    			
    			
    		</script>
    	</body>
    </html>
    
    
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		
    		<button id="btn">我是一个按钮</button>
    		<script type="text/javascript">
    			
    			/* * 事件，就是用户和浏览器之间的交互行为， * 比如：点击按钮，鼠标移动、关闭窗口。。。 */
    			
    			
    			
    			//获取按钮对象
    			var btn = document.getElementById("btn");
    			
    			/* * 可以为按钮的对应事件绑定处理函数的形式来响应事件 * 这样当事件被触发时，其对应的函数将会被调用 */
    			
    			//绑定一个单击事件 //像这种为单击事件绑定的函数，我们称为单击响应函数 btn.onclick = function(){ 
    				alert("你还点~~~");
    			};
    			
    			
    		</script>
    	</body>
    </html>
    
    
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript">
    		
    			/* * 浏览器在加载一个页面时，是按照自上向下的顺序加载的， * 读取到一行就运行一行,如果将script标签写到页面的上边， * 在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载 * 会导致无法获取到DOM对象 */
    			
    			
    			
    			/* * 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>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="style/css.css" /> <script type="text/javascript"> window.onload = function(){ 
    				
    				//为id为btn01的按钮绑定一个单击响应函数
    				var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ 
    					//查找#bj节点
    					var bj = document.getElementById("bj");
    					//打印bj
    					//innerHTML 通过这个属性可以获取到元素内部的html代码
    					alert(bj.innerHTML);
    				};
    				
    				
    				//为id为btn02的按钮绑定一个单击响应函数
    				var btn02 = document.getElementById("btn02"); btn02.onclick = function(){ 
    					//查找所有li节点
    					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
    					//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
    					//即使查询到的元素只有一个，也会封装到数组中返回
    					var lis = document.getElementsByTagName("li");
    					
    					//打印lis
    					//alert(lis.length);
    					
    					//变量lis
    					for(var i=0 ; i<lis.length ; i++){ 
    						alert(lis[i].innerHTML);
    					}
    				};
    				
    				
    				//为id为btn03的按钮绑定一个单击响应函数
    				var btn03 = document.getElementById("btn03"); btn03.onclick = function(){ 
    					//查找name=gender的所有节点
    					var inputs = document.getElementsByName("gender");
    					
    					//alert(inputs.length);
    					
    					for(var i=0 ; i<inputs.length ; i++){ 
    						/* * innerHTML用于获取元素内部的HTML代码的 * 对于自结束标签，这个属性没有意义 */
    						//alert(inputs[i].innerHTML);
    						/* * 如果需要读取元素节点属性， * 直接使用 元素.属性名 * 例子：元素.id 元素.name 元素.value * 注意：class属性不能采用这种方式， * 读取class属性时需要使用 元素.className */
    						alert(inputs[i].className);
    					}
    				};
    				
    				
    				
    				//查找#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>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul> </div> <div class="inner"> gender: <input class="hello" type="radio" name="gender" value="male"/> Male <input class="hello" type="radio" name="gender" value="female"/> Female <br> <br> name: <input type="text" name="name" id="username" value="abcde"/> </div> </div> <div id="btnList"> <div><button id="btn01">查找#bj节点</button></div> <div><button id="btn02">查找所有li节点</button></div> <div><button id="btn03">查找name=gender的所有节点</button></div> <div><button id="btn04">查找#city下所有li节点</button></div> <div><button id="btn05">返回#city的所有子节点</button></div> <div><button id="btn06">返回#phone的第一个子节点</button></div> <div><button id="btn07">返回#bj的父节点</button></div> <div><button id="btn08">返回#android的前一个兄弟节点</button></div> <div><button id="btn09">返回#username的value属性值</button></div> <div><button id="btn10">设置#username的value属性值</button></div> <div><button id="btn11">返回#bj的文本值</button></div> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ 
    				margin: 0;
    				padding: 0;
    			}
    			
    			#outer{ 
    				width: 500px;
    				margin: 50px auto;
    				padding: 10px;
    				background-color: greenyellow;
    				/*设置文本居中*/
    				text-align: center;
    			}
    		</style> <script type="text/javascript"> window.onload = function(){ 
    				
    				/* * 点击按钮切换图片 */
    				
    				//获取两个按钮
    				var prev = document.getElementById("prev");
    				var next = document.getElementById("next");
    				
    				/* * 要切换图片就是要修改img标签的src属性 */
    				
    				//获取img标签
    				var img = document.getElementsByTagName("img")[0];
            
            
            //这里是因为获取tagname是直接获取的一个数组，所以如果想
            //要直接获取到的是img的标签，必须取下标是0
    				
    				//创建一个数组，用来保存图片的路径
    				var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];
    				
    				//创建一个变量，来保存当前正在显示的图片的索引
    				var index = 0;
    				
    				//获取id为info的p元素
    				var info = document.getElementById("info");
    				//设置提示文字
    				info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张"; //分别为两个按钮绑定单击响应函数 prev.onclick = function(){ 
    					
    					/* * 切换到上一张，索引自减 */
    					index--; //判断index是否小于0 if(index < 0){ 
    						index = imgArr.length - 1;
    					}
    					
    					img.src = imgArr[index];
    					
    					//当点击按钮以后，重新设置信息
    					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
    				}; next.onclick = function(){ 
    					
    					/* * 切换到下一张是index自增 */
    					index++; if(index > imgArr.length - 1){ 
    						index = 0;
    					}
    					
    					//切换图片就是修改img的src属性
    					//要修改一个元素的属性 元素.属性 = 属性值
    					img.src = imgArr[index];
    					
    					//当点击按钮以后，重新设置信息
    					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
    					
    				};
    				
    				
    			};
    			
    			
    		</script>
    	</head>
    	<body>
    		<div id="outer">
    			
    			<p id="info"></p>
    			
    			<img src="img/1.jpg" alt="冰棍" />
    			
    			<button id="prev">上一张</button>
    			<button id="next">下一张</button>
    			
    		</div>
    	</body>
    </html>
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>Untitled Document</title>
    		<link rel="stylesheet" type="text/css" href="style/css.css" />
    		<script type="text/javascript">
    		
    			/* * 定义一个函数，专门用来为指定元素绑定单击响应函数 * 参数： * idStr 要绑定单击响应函数的对象的id属性值 * fun 事件的回调函数，当单击元素时，该函数将会被触发 */
    			function myClick(idStr , fun){ 
    				var btn = document.getElementById(idStr);
    				btn.onclick = fun;
    			}
    		
    			window.onload = function(){ 
    				
    				//为id为btn01的按钮绑定一个单击响应函数
    				var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ 
    					//查找#bj节点
    					var bj = document.getElementById("bj");
    					//打印bj
    					//innerHTML 通过这个属性可以获取到元素内部的html代码
    					alert(bj.innerHTML);
    				};
    				
    				
    				//为id为btn02的按钮绑定一个单击响应函数
    				var btn02 = document.getElementById("btn02"); btn02.onclick = function(){ 
    					//查找所有li节点
    					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
    					//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
    					//即使查询到的元素只有一个，也会封装到数组中返回
    					var lis = document.getElementsByTagName("li");
    					
    					//打印lis
    					//alert(lis.length);
    					
    					//变量lis
    					for(var i=0 ; i<lis.length ; i++){ 
    						alert(lis[i].innerHTML);
    					}
    				};
    				
    				
    				//为id为btn03的按钮绑定一个单击响应函数
    				var btn03 = document.getElementById("btn03"); btn03.onclick = function(){ 
    					//查找name=gender的所有节点
    					var inputs = document.getElementsByName("gender");
    					
    					//alert(inputs.length);
    					
    					for(var i=0 ; i<inputs.length ; i++){ 
    						/* * innerHTML用于获取元素内部的HTML代码的 * 对于自结束标签，这个属性没有意义 */
    						//alert(inputs[i].innerHTML);
    						/* * 如果需要读取元素节点属性， * 直接使用 元素.属性名 * 例子：元素.id 元素.name 元素.value * 注意：class属性不能采用这种方式， * 读取class属性时需要使用 元素.className */
    						alert(inputs[i].className);
    					}
    				};
    				
    				//为id为btn04的按钮绑定一个单击响应函数
    				var btn04 = document.getElementById("btn04"); btn04.onclick = function(){ 
    					
    					//获取id为city的元素
    					var city = document.getElementById("city");
    					
    					//查找#city下所有li节点
    					var lis = city.getElementsByTagName("li");
    					
    					for(var i=0 ; i<lis.length ; i++){ 
    						alert(lis[i].innerHTML);
    					}
    					
    				};
    				
    				//为id为btn05的按钮绑定一个单击响应函数
    				var btn05 = document.getElementById("btn05"); btn05.onclick = function(){ 
    					//获取id为city的节点
    					var city = document.getElementById("city");
    					//返回#city的所有子节点
    					/* * childNodes属性会获取包括文本节点在呢的所有节点 * 根据DOM标签标签间空白也会当成文本节点 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点， * 所以该属性在IE8中会返回4个子元素而其他浏览器是9个 */
    					var cns = city.childNodes;
    					
    					//alert(cns.length);
    					
    					/*for(var i=0 ; i<cns.length ; i++){ alert(cns[i]); }*/
    					
    					/* * children属性可以获取当前元素的所有子元素 */
    					var cns2 = city.children;
    					alert(cns2.length);
    				};
    				
    				//为id为btn06的按钮绑定一个单击响应函数
    				var btn06 = document.getElementById("btn06"); btn06.onclick = function(){ 
    					//获取id为phone的元素
    					var phone = document.getElementById("phone");
    					//返回#phone的第一个子节点
    					//phone.childNodes[0];
    					//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
    					var fir = phone.firstChild;
    					
    					//firstElementChild获取当前元素的第一个子元素
    					/* * firstElementChild不支持IE8及以下的浏览器， * 如果需要兼容他们尽量不要使用 */
    					//fir = phone.firstElementChild;
    					
    					alert(fir);
    				}; //为id为btn07的按钮绑定一个单击响应函数 myClick("btn07",function(){ 
    					
    					//获取id为bj的节点
    					var bj = document.getElementById("bj");
    					
    					//返回#bj的父节点
    					var pn = bj.parentNode;
    					
    					alert(pn.innerHTML);
    					
    					/* * innerText * - 该属性可以获取到元素内部的文本内容 * - 它和innerHTML类似，不同的是它会自动将html去除 */
    					//alert(pn.innerText);
    					
    					
    				}); //为id为btn08的按钮绑定一个单击响应函数 myClick("btn08",function(){ 
    					
    					//获取id为android的元素
    					var and = document.getElementById("android");
    					
    					//返回#android的前一个兄弟节点（也可能获取到空白的文本）
    					var ps = and.previousSibling;
    					
    					//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
    					//var pe = and.previousElementSibling;
    					
    					alert(ps);
    					
    				}); //读取#username的value属性值 myClick("btn09",function(){ 
    					//获取id为username的元素
    					var um = document.getElementById("username");
    					//读取um的value属性值
    					//文本框的value属性值，就是文本框中填写的内容
    					alert(um.value);
    				}); //设置#username的value属性值 myClick("btn10",function(){ 
    					//获取id为username的元素
    					var um = document.getElementById("username");
    					
    					um.value = "今天天气真不错~~~";
    				}); //返回#bj的文本值 myClick("btn11",function(){ 
    					
    					//获取id为bj的元素
    					var bj = document.getElementById("bj");
    					
    					//alert(bj.innerHTML);
    					//alert(bj.innerText);
    					
    					//获取bj中的文本节点
    					/*var fc = bj.firstChild; alert(fc.nodeValue);*/
    					
    					alert(bj.firstChild.nodeValue);
    					
    					
    				});
    				
    			};
    			
    		
    		</script>
    	</head>
    	<body>
    		<div id="total">
    			<div class="inner">
    				<p>
    					你喜欢哪个城市?
    				</p>
    
    				<ul id="city">
    					<li id="bj">北京</li>
    					<li>上海</li>
    					<li>东京</li>
    					<li>首尔</li>
    				</ul>
    
    				<br>
    				<br>
    
    				<p>
    					你喜欢哪款单机游戏?
    				</p>
    
    				<ul id="game">
    					<li id="rl">红警</li>
    					<li>实况</li>
    					<li>极品飞车</li>
    					<li>魔兽</li>
    				</ul>
    
    				<br />
    				<br />
    
    				<p>
    					你手机的操作系统是?
    				</p>
    
    				<ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul>
    			</div>
    
    			<div class="inner">
    				gender:
    				<input class="hello" type="radio" name="gender" value="male"/>
    				Male
    				<input class="hello" type="radio" name="gender" value="female"/>
    				Female
    				<br>
    				<br>
    				name:
    				<input type="text" name="name" id="username" value="abcde"/>
    			</div>
    		</div>
    		<div id="btnList">
    			<div><button id="btn01">查找#bj节点</button></div>
    			<div><button id="btn02">查找所有li节点</button></div>
    			<div><button id="btn03">查找name=gender的所有节点</button></div>
    			<div><button id="btn04">查找#city下所有li节点</button></div>
    			<div><button id="btn05">返回#city的所有子节点</button></div>
    			<div><button id="btn06">返回#phone的第一个子节点</button></div>
    			<div><button id="btn07">返回#bj的父节点</button></div>
    			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
    			<div><button id="btn09">返回#username的value属性值</button></div>
    			<div><button id="btn10">设置#username的value属性值</button></div>
    			<div><button id="btn11">返回#bj的文本值</button></div>
    		</div>
    	</body>
    </html>
    
    
    
    
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>全选练习</title> <script type="text/javascript"> window.onload = function(){ 
    		
    		
    		//获取四个多选框items
    		var items = document.getElementsByName("items");
    		//获取全选/全不选的多选框
    		var checkedAllBox = document.getElementById("checkedAllBox");
    		
    		/* * 全选按钮 * - 点击按钮以后，四个多选框全都被选中 */
    		
    		//1.#checkedAllBtn
    		//为id为checkedAllBtn的按钮绑定一个单击响应函数
    		var checkedAllBtn = document.getElementById("checkedAllBtn"); checkedAllBtn.onclick = function(){ 
    			
    			
    			//遍历items
    			for(var i=0 ; i<items.length ; i++){ 
    				
    				//通过多选框的checked属性可以来获取或设置多选框的选中状态
    				//alert(items[i].checked);
    				
    				//设置四个多选框变成选中状态
    				items[i].checked = true;
    			}
    			
    			//将全选/全不选设置为选中
    			checkedAllBox.checked = true;
    			
    			
    		};
    		
    		/* * 全不选按钮 * - 点击按钮以后，四个多选框都变成没选中的状态 */
    		//2.#checkedNoBtn
    		//为id为checkedNoBtn的按钮绑定一个单击响应函数
    		var checkedNoBtn = document.getElementById("checkedNoBtn"); checkedNoBtn.onclick = function(){ 
    			
    			for(var i=0; i<items.length ; i++){ 
    				//将四个多选框设置为没选中的状态
    				items[i].checked = false;
    			}
    			
    			//将全选/全不选设置为不选中
    			checkedAllBox.checked = false;
    			
    		};
    		
    		/* * 反选按钮 * - 点击按钮以后，选中的变成没选中，没选中的变成选中 */
    		//3.#checkedRevBtn
    		var checkedRevBtn = document.getElementById("checkedRevBtn"); checkedRevBtn.onclick = function(){ 
    			
    			//将checkedAllBox设置为选中状态
    			checkedAllBox.checked = true;
    			
    			for(var i=0; i<items.length ; i++){ 
    				
    				//判断多选框状态
    				/*if(items[i].checked){ //证明多选框已选中，则设置为没选中状态 items[i].checked = false; }else{ //证明多选框没选中，则设置为选中状态 items[i].checked = true; }*/
    				
    				items[i].checked = !items[i].checked; //判断四个多选框是否全选 //只要有一个没选中则就不是全选 if(!items[i].checked){ 
    					//一旦进入判断，则证明不是全选状态
    					//将checkedAllBox设置为没选中状态
    					checkedAllBox.checked = false;
    				}
    			}
    			
    			//在反选时也需要判断四个多选框是否全都选中
    			
    			
    			
    		};
    		
    		/* * 提交按钮： * - 点击按钮以后，将所有选中的多选框的value属性值弹出 */
    		//4.#sendBtn
    		//为sendBtn绑定单击响应函数
    		var sendBtn = document.getElementById("sendBtn"); sendBtn.onclick = function(){ 
    			//遍历items
    			for(var i=0 ; i<items.length ; i++){ 
    				//判断多选框是否选中 if(items[i].checked){ 
    					alert(items[i].value);
    				}
    			}
    		};
    		
    		
    		//5.#checkedAllBox
    		/* * 全选/全不选 多选框 * - 当它选中时，其余的也选中，当它取消时其余的也取消 * * 在事件的响应函数中，响应函数是给谁绑定的this就是谁 */
    		//为checkedAllBox绑定单击响应函数 checkedAllBox.onclick = function(){ 
    			
    			//alert(this === checkedAllBox);
    			
    			//设置多选框的选中状态
    			for(var i=0; i <items.length ; i++){ 
    				items[i].checked = this.checked;
    			}
    			
    		};
    		
    		//6.items
    		/* * 如果四个多选框全都选中，则checkedAllBox也应该选中 * 如果四个多选框没都选中，则checkedAllBox也不应该选中 */
    		
    		//为四个多选框分别绑定点击响应函数
    		for(var i=0 ; i<items.length ; i++){ 
    			items[i].onclick = function(){ 
    				
    				//将checkedAllBox设置为选中状态
    				checkedAllBox.checked = true;
    				
    				for(var j=0 ; j<items.length ; j++){ 
    					//判断四个多选框是否全选 //只要有一个没选中则就不是全选 if(!items[j].checked){ 
    						//一旦进入判断，则证明不是全选状态
    						//将checkedAllBox设置为没选中状态
    						checkedAllBox.checked = false;
    						//一旦进入判断，则已经得出结果，不用再继续执行循环
    						break;
    					}
    					
    				}
    				
    				
    				
    			};
    		}
    		
    		
    	}; </script> </head> <body> <form method="post" action=""> 你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 <br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="checkbox" name="items" value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br /> <input type="button" id="checkedAllBtn" value="全　选" /> <input type="button" id="checkedNoBtn" value="全不选" /> <input type="button" id="checkedRevBtn" value="反　选" /> <input type="button" id="sendBtn" value="提　交" /> </form> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ 
    				
    				//获取body标签
    				//var body = document.getElementsByTagName("body")[0];
    				
    				/* * 在document中有一个属性body，它保存的是body的引用 */
    				var body = document.body;
    				
    				/* * document.documentElement保存的是html根标签 */
    				var html = document.documentElement;
    				
    				//console.log(html);
    				
    				/* * document.all代表页面中所有的元素 */
    				var all = document.all;
    				
    				//console.log(all.length);
    				
    				/*for(var i=0 ; i<all.length ; i++){ console.log(all[i]); }*/
    				
    				//all = document.getElementsByTagName("*");
    				//console.log(all.length);
    				
    				
    				/* * 根据元素的class属性值查询一组元素节点对象 * getElementsByClassName()可以根据class属性值获取一组元素节点对象， * 但是该方法不支持IE8及以下的浏览器 */
    				//var box1 = document.getElementsByClassName("box1");
    				//console.log(box1.length);
    				
    				//获取页面中的所有的div
    				//var divs = document.getElementsByTagName("div");
    				
    				//获取class为box1中的所有的div
    				//.box1 div
    				/* * document.querySelector() * - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象 * - 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替 * - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个 */
    				var div = document.querySelector(".box1 div");
    				
    				var box1 = document.querySelector(".box1")
    				
    				//console.log(div.innerHTML);
    				//console.log(box1.innerHTML);
    				
    				/* * document.querySelectorAll() * - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回 * - 即使符合条件的元素只有一个，它也会返回数组 */
    				box1 = document.querySelectorAll(".box1");
    				box1 = document.querySelectorAll("#box2");
    				console.log(box1);
    				
    			};
    			
    			
    		</script>
    	</head>
    	<body>
    		<div id="box2"></div>	
    		<div class="box1">
    			我是第一个box1	 
    			<div>我是box1中的div</div>
    		</div>
    		<div class="box1">
    			<div>我是box1中的div</div>
    		</div>
    		<div class="box1">
    			<div>我是box1中的div</div>
    		</div>
    		<div class="box1">
    			<div>我是box1中的div</div>
    		</div>
    		
    		<div></div>
    	</body>
    </html>
    
    
    
    
    
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="style/css.css" /> <script type="text/javascript"> window.onload = function() { 
    				
    				//创建一个"广州"节点,添加到#city下 myClick("btn01",function(){ 
    					//创建广州节点 <li>广州</li>
    					//创建li元素节点
    					/* * document.createElement() * 可以用于创建一个元素节点对象， * 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象， * 并将创建好的对象作为返回值返回 */
    					var li = document.createElement("li");
    					
    					//创建广州文本节点
    					/* * document.createTextNode() * 可以用来创建一个文本节点对象 * 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回 */
    					var gzText = document.createTextNode("广州");
    					
    					//将gzText设置li的子节点
    					/* * appendChild() * - 向一个父节点中添加一个新的子节点 * - 用法：父节点.appendChild(子节点); */
    					li.appendChild(gzText);
    					
    					//获取id为city的节点
    					var city = document.getElementById("city");
    					
    					//将广州添加到city下
    					city.appendChild(li);
    					
    					
    				}); //将"广州"节点插入到#bj前面 myClick("btn02",function(){ 
    					//创建一个广州
    					var li = document.createElement("li");
    					var gzText = document.createTextNode("广州");
    					li.appendChild(gzText);
    					
    					//获取id为bj的节点
    					var bj = document.getElementById("bj");
    					
    					//获取city
    					var city = document.getElementById("city");
    					
    					/* * insertBefore() * - 可以在指定的子节点前插入新的子节点 * - 语法： * 父节点.insertBefore(新节点,旧节点); */
    					city.insertBefore(li , bj);
    					
    					
    				}); //使用"广州"节点替换#bj节点 myClick("btn03",function(){ 
    					//创建一个广州
    					var li = document.createElement("li");
    					var gzText = document.createTextNode("广州");
    					li.appendChild(gzText);
    					
    					//获取id为bj的节点
    					var bj = document.getElementById("bj");
    					
    					//获取city
    					var city = document.getElementById("city");
    					
    					/* * replaceChild() * - 可以使用指定的子节点替换已有的子节点 * - 语法：父节点.replaceChild(新节点,旧节点); */
    					city.replaceChild(li , bj);
    					
    					
    				}); //删除#bj节点 myClick("btn04",function(){ 
    					//获取id为bj的节点
    					var bj = document.getElementById("bj");
    					//获取city
    					var city = document.getElementById("city");
    					
    					/* * removeChild() * - 可以删除一个子节点 * - 语法：父节点.removeChild(子节点); * * 子节点.parentNode.removeChild(子节点); */
    					//city.removeChild(bj);
    					
    					bj.parentNode.removeChild(bj);
    				}); //读取#city内的HTML代码 myClick("btn05",function(){ 
    					//获取city
    					var city = document.getElementById("city");
    					
    					alert(city.innerHTML);
    				}); //设置#bj内的HTML代码 myClick("btn06" , function(){ 
    					//获取bj
    					var bj = document.getElementById("bj");
    					bj.innerHTML = "昌平";
    				}); myClick("btn07",function(){ 
    					
    					//向city中添加广州
    					var city = document.getElementById("city");
    					
    					/* * 使用innerHTML也可以完成DOM的增删改的相关操作 * 一般我们会两种方式结合使用 */
    					//city.innerHTML += "<li>广州</li>";
    					
    					//创建一个li
    					var li = document.createElement("li");
    					//向li中设置文本
    					li.innerHTML = "广州";
    					//将li添加到city中
    					city.appendChild(li);
    					
    				});
    				
    				
    			}; function myClick(idStr, fun) { 
    				var btn = document.getElementById(idStr);
    				btn.onclick = fun;
    			}
    			
    		
    		</script>
    		
    	</head>
    	<body>
    		<div id="total">
    			<div class="inner">
    				<p>
    					你喜欢哪个城市?
    				</p>
    
    				<ul id="city">
    					<li id="bj">北京</li>
    					<li>上海</li>
    					<li>东京</li>
    					<li>首尔</li>
    				</ul>
    				
    			</div>
    		</div>
    		<div id="btnList">
    			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
    			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
    			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
    			<div><button id="btn04">删除#bj节点</button></div>
    			<div><button id="btn05">读取#city内的HTML代码</button></div>
    			<div><button id="btn06">设置#bj内的HTML代码</button></div>
    			<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
    		</div>
    	</body>
    </html>
    
    
    
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>添加删除记录练习</title>
    		<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
    		<script type="text/javascript">
    		
    			/* * 删除tr的响应函数 */
    			function delA() { 
    
    				//点击超链接以后需要删除超链接所在的那行
    				//这里我们点击那个超链接this就是谁
    				//获取当前tr
    				var tr = this.parentNode.parentNode;
    
    				//获取要删除的员工的名字
    				//var name = tr.getElementsByTagName("td")[0].innerHTML;
    				var name = tr.children[0].innerHTML;
    
    				//删除之前弹出一个提示框
    				/* * confirm()用于弹出一个带有确认和取消按钮的提示框 * 需要一个字符串作为参数，该字符串将会作为提示文字显示出来 * 如果用户点击确认则会返回true，如果点击取消则返回false */
    				var flag = confirm("确认删除" + name + "吗?"); //如果用户点击确认 if(flag) { 
    					//删除tr
    					tr.parentNode.removeChild(tr);
    				}
    
    				/* * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为， * 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为 */
    				return false;
    			}; window.onload = function() { 
    
    				/* * 点击超链接以后，删除一个员工的信息 */
    
    				//获取所有额超链接
    				var allA = document.getElementsByTagName("a");
    
    				//为每个超链接都绑定一个单击响应函数
    				for(var i = 0; i < allA.length; i++) { 
    					allA[i].onclick = delA;
    				}
    
    				/* * 添加员工的功能 * - 点击按钮以后，将员工的信息添加到表格中 */
    
    				//为提交按钮绑定一个单击响应函数
    				var addEmpButton = document.getElementById("addEmpButton"); addEmpButton.onclick = function() { 
    
    					//获取用户添加的员工信息
    					//获取员工的名字
    					var name = document.getElementById("empName").value;
    					//获取员工的email和salary
    					var email = document.getElementById("email").value;
    					var salary = document.getElementById("salary").value;
    
    					//alert(name+","+email+","+salary);
    					/* * <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="javascript:;">Delete</a></td> </tr> 需要将获取到的信息保存到tr中 */
    
    					//创建一个tr
    					var tr = document.createElement("tr");
    
    					//创建四个td
    					var nameTd = document.createElement("td");
    					var emailTd = document.createElement("td");
    					var salaryTd = document.createElement("td");
    					var aTd = document.createElement("td");
    
    					//创建一个a元素
    					var a = document.createElement("a");
    
    					//创建文本节点
    					var nameText = document.createTextNode(name);
    					var emailText = document.createTextNode(email);
    					var salaryText = document.createTextNode(salary);
    					var delText = document.createTextNode("Delete");
    
    					//将文本条件到td中
    					nameTd.appendChild(nameText);
    					emailTd.appendChild(emailText);
    					salaryTd.appendChild(salaryText);
    
    					//向a中添加文本
    					a.appendChild(delText);
    					//将a添加到td中
    					aTd.appendChild(a);
    
    					//将td添加到tr中
    					tr.appendChild(nameTd);
    					tr.appendChild(emailTd);
    					tr.appendChild(salaryTd);
    					tr.appendChild(aTd);
    
    					//向a中添加href属性
    					a.href = "javascript:;";
    					//为新添加的a再绑定一次单击响应函数
    					a.onclick = delA;
    
    					//获取table
    					var employeeTable = document.getElementById("employeeTable");
    					//获取employeeTable中的tbody
    					var tbody = employeeTable.getElementsByTagName("tbody")[0];
    					//将tr添加到tbodye中
    					tbody.appendChild(tr);
    
    				};
    
    			};
    		</script>
    	</head>
    
    	<body>
    
    		<table id="employeeTable">
    			<tr>
    				<th>Name</th>
    				<th>Email</th>
    				<th>Salary</th>
    				<th> </th>
    			</tr>
    			<tr>
    				<td>Tom</td>
    				<td>tom@tom.com</td>
    				<td>5000</td>
    				<td>
    					<a href="javascript:;">Delete</a>
    				</td>
    			</tr>
    			<tr>
    				<td>Jerry</td>
    				<td>jerry@sohu.com</td>
    				<td>8000</td>
    				<td>
    					<a href="deleteEmp?id=002">Delete</a>
    				</td>
    			</tr>
    			<tr>
    				<td>Bob</td>
    				<td>bob@tom.com</td>
    				<td>10000</td>
    				<td>
    					<a href="deleteEmp?id=003">Delete</a>
    				</td>
    			</tr>
    		</table>
    
    		<div id="formDiv">
    
    			<h4>添加新员工</h4>
    
    			<table>
    				<tr>
    					<td class="word">name: </td>
    					<td class="inp">
    						<input type="text" name="empName" id="empName" />
    					</td>
    				</tr>
    				<tr>
    					<td class="word">email: </td>
    					<td class="inp">
    						<input type="text" name="email" id="email" />
    					</td>
    				</tr>
    				<tr>
    					<td class="word">salary: </td>
    					<td class="inp">
    						<input type="text" name="salary" id="salary" />
    					</td>
    				</tr>
    				<tr>
    					<td colspan="2" align="center">
    						<button id="addEmpButton">
    						Submit
    					</button>
    					</td>
    				</tr>
    			</table>
    
    		</div>
    
    	</body>
    
    </html>
              
              
              
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>添加删除记录练习</title>
    		<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
    		<script type="text/javascript">
    		
    			/* * 删除tr的响应函数 */
    			function delA() { 
    
    				//点击超链接以后需要删除超链接所在的那行
    				//这里我们点击那个超链接this就是谁
    				//获取当前tr
    				var tr = this.parentNode.parentNode;
    
    				//获取要删除的员工的名字
    				//var name = tr.getElementsByTagName("td")[0].innerHTML;
    				var name = tr.children[0].innerHTML;
    
    				//删除之前弹出一个提示框
    				/* * confirm()用于弹出一个带有确认和取消按钮的提示框 * 需要一个字符串作为参数，该字符串将会作为提示文字显示出来 * 如果用户点击确认则会返回true，如果点击取消则返回false */
    				var flag = confirm("确认删除" + name + "吗?"); //如果用户点击确认 if(flag) { 
    					//删除tr
    					tr.parentNode.removeChild(tr);
    				}
    
    				/* * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为， * 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为 */
    				return false;
    			}; window.onload = function() { 
    
    				/* * 点击超链接以后，删除一个员工的信息 */
    
    				//获取所有额超链接
    				var allA = document.getElementsByTagName("a");
    
    				//为每个超链接都绑定一个单击响应函数
    				for(var i = 0; i < allA.length; i++) { 
    					allA[i].onclick = delA;
    				}
    
    				/* * 添加员工的功能 * - 点击按钮以后，将员工的信息添加到表格中 */
    
    				//为提交按钮绑定一个单击响应函数
    				var addEmpButton = document.getElementById("addEmpButton"); addEmpButton.onclick = function() { 
    
    					//获取用户添加的员工信息
    					//获取员工的名字
    					var name = document.getElementById("empName").value;
    					//获取员工的email和salary
    					var email = document.getElementById("email").value;
    					var salary = document.getElementById("salary").value;
    
    					//alert(name+","+email+","+salary);
    					/* * <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="javascript:;">Delete</a></td> </tr> 需要将获取到的信息保存到tr中 */
    
    					//创建一个tr
    					var tr = document.createElement("tr");
    
    					//设置tr中的内容
    					tr.innerHTML = "<td>"+name+"</td>"+
    									"<td>"+email+"</td>"+
    									"<td>"+salary+"</td>"+
    									"<td><a href='javascript:;'>Delete</a></td>";
    									
    					//获取刚刚添加的a元素，并为其绑定单击响应函数				
    					var a = tr.getElementsByTagName("a")[0];
    					a.onclick = delA;
    					
    					//获取table
    					var employeeTable = document.getElementById("employeeTable");
    					//获取employeeTable中的tbody
    					var tbody = employeeTable.getElementsByTagName("tbody")[0];
    					//将tr添加到tbodye中
    					tbody.appendChild(tr);
    					/*tbody.innerHTML += "<tr>"+ "<td>"+name+"</td>"+ "<td>"+email+"</td>"+ "<td>"+salary+"</td>"+ "<td><a href='javascript:;'>Delete</a></td>" +"</tr>";*/
    
    				};
    
    			};
    		</script>
    	</head>
    
    	<body>
    
    		<table id="employeeTable">
    			<tr>
    				<th>Name</th>
    				<th>Email</th>
    				<th>Salary</th>
    				<th> </th>
    			</tr>
    			<tr>
    				<td>Tom</td>
    				<td>tom@tom.com</td>
    				<td>5000</td>
    				<td>
    					<a href="javascript:;">Delete</a>
    				</td>
    			</tr>
    			<tr>
    				<td>Jerry</td>
    				<td>jerry@sohu.com</td>
    				<td>8000</td>
    				<td>
    					<a href="deleteEmp?id=002">Delete</a>
    				</td>
    			</tr>
    			<tr>
    				<td>Bob</td>
    				<td>bob@tom.com</td>
    				<td>10000</td>
    				<td>
    					<a href="deleteEmp?id=003">Delete</a>
    				</td>
    			</tr>
    		</table>
    
    		<div id="formDiv">
    
    			<h4>添加新员工</h4>
    
    			<table>
    				<tr>
    					<td class="word">name: </td>
    					<td class="inp">
    						<input type="text" name="empName" id="empName" />
    					</td>
    				</tr>
    				<tr>
    					<td class="word">email: </td>
    					<td class="inp">
    						<input type="text" name="email" id="email" />
    					</td>
    				</tr>
    				<tr>
    					<td class="word">salary: </td>
    					<td class="inp">
    						<input type="text" name="salary" id="salary" />
    					</td>
    				</tr>
    				<tr>
    					<td colspan="2" align="center">
    						<button id="addEmpButton">
    						Submit
    					</button>
    					</td>
    				</tr>
    			</table>
    
    		</div>
    
    	</body>
    
    </html>
              
              
              
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加删除记录练习</title> <link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /> <script type="text/javascript"> window.onload = function(){ 
    		
    		/* * 点击超链接以后，删除一个员工的信息 */
    		
    		//获取所有额超链接
    		var allA = document.getElementsByTagName("a");
    		
    		//为每个超链接都绑定一个单击响应函数
    		for(var i=0 ; i < allA.length ; i++){ 
    			/* * for循环会在页面加载完成之后立即执行， * 而响应函数会在超链接被点击时才执行 * 当响应函数执行时，for循环早已执行完毕 */
    			
    			alert("for循环正在执行"+i); allA[i].onclick = function(){ 
    				
    				alert("响应函数正在执行"+i);
    				
    				//alert(allA[i]);
    				
    				return false;
    			};
    			
    		}
    		
    	};
    
    	
    </script>
    </head>
    <body>
    
    	<table id="employeeTable">
    		<tr>
    			<th>Name</th>
    			<th>Email</th>
    			<th>Salary</th>
    			<th> </th>
    		</tr>
    		<tr>
    			<td>Tom</td>
    			<td>tom@tom.com</td>
    			<td>5000</td>
    			<td><a href="javascript:;">Delete</a></td>
    		</tr>
    		<tr>
    			<td>Jerry</td>
    			<td>jerry@sohu.com</td>
    			<td>8000</td>
    			<td><a href="deleteEmp?id=002">Delete</a></td>
    		</tr>
    		<tr>
    			<td>Bob</td>
    			<td>bob@tom.com</td>
    			<td>10000</td>
    			<td><a href="deleteEmp?id=003">Delete</a></td>
    		</tr>
    	</table>
    
    	<div id="formDiv">
    	
    		<h4>添加新员工</h4>
    
    		<table>
    			<tr>
    				<td class="word">name: </td>
    				<td class="inp">
    					<input type="text" name="empName" id="empName" />
    				</td>
    			</tr>
    			<tr>
    				<td class="word">email: </td>
    				<td class="inp">
    					<input type="text" name="email" id="email" />
    				</td>
    			</tr>
    			<tr>
    				<td class="word">salary: </td>
    				<td class="inp">
    					<input type="text" name="salary" id="salary" />
    				</td>
    			</tr>
    			<tr>
    				<td colspan="2" align="center">
    					<button id="addEmpButton" value="abc">
    						Submit
    					</button>
    				</td>
    			</tr>
    		</table>
    
    	</div>
    
    </body>
    </html>

# 补充 #

## 关于回调函数 ##

作者：no.body  
链接：https://www.zhihu.com/question/19801131/answer/27459821  
来源：知乎

## 大致概念 ##

callback 一词本来用于打电话。你可以打电话（call）给别人，也可以留下电话号码，让别人回电话（callback）。计算机领域相对较新，一些日常词汇被引进，表达类似概念。call 和 callback 在计算机领域翻译成“调用”和“回调”。

回调函数是你写一个函数，让预先写好的系统来调用。你调用系统的函数，是直调。让系统调用你的函数，就是回调。但假如满足于这种一句话结论，是不会真正明白的。

**什么是回调函数？**

我们绕点远路来回答这个问题。

编程分为两类：系统编程（system programming）和应用编程（application programming）。所谓系统编程，简单来说，就是编写**库**；而应用编程就是利用写好的各种库来编写具某种功用的程序，也就是**应用**。系统程序员会给自己写的库留下一些接口，即API（application programming interface，应用编程接口），以供应用程序员使用。所以在抽象层的图示里，库位于应用的底下。

当程序跑起来时，一般情况下，应用程序（application program）会时常通过API调用库里所预先备好的函数。但是有些库函数（library function）却要求应用先传给它一个函数，好在合适的时候调用，以完成目标任务。这个被传入的、后又被调用的函数就称为**回调函数**（callback function）。

打个比方，有一家旅馆提供叫醒服务，但是要求旅客自己决定叫醒的方法。可以是打客房电话，也可以是派服务员去敲门，睡得死怕耽误事的，还可以要求往自己头上浇盆水。这里，“叫醒”这个行为是旅馆提供的，相当于库函数，但是叫醒的方式是由旅客决定并告诉旅馆的，也就是回调函数。而旅客告诉旅馆怎么叫醒自己的动作，也就是把回调函数传入库函数的动作，称为**登记回调函数**（to register a callback function）。如下图所示（图片来源：维基百科）：

![img][]![img][img 1]

可以看到，回调函数通常和应用处于同一抽象层（因为传入什么样的回调函数是在应用级别决定的）。而回调就成了一个高层调用底层，底层再**回**过头来**调**用高层的过程。（我认为）这应该是回调最早的应用之处，也是其得名如此的原因。

**回调机制的优势**

从上面的例子可以看出，回调机制提供了非常大的灵活性。请注意，从现在开始，我们把图中的库函数改称为**中间函数**了，这是因为回调并不仅仅用在应用和库之间。任何时候，只要想获得类似于上面情况的灵活性，都可以利用回调。

这种灵活性是怎么实现的呢？乍看起来，回调似乎只是函数间的调用，但仔细一琢磨，可以发现两者之间的一个关键的不同：在回调中，我们利用某种方式，把回调函数像参数一样传入中间函数。可以这么理解，在传入一个回调函数之前，中间函数是不完整的。换句话说，程序可以在运行时，通过登记不同的回调函数，来决定、改变中间函数的行为。这就比简单的函数调用要灵活太多了。请看下面这段Python写成的回调的简单示例：

even.py
    #回调函数1
    #生成一个2k形式的偶数
    def double(x):
        return x * 2
        
    #回调函数2
    #生成一个4k形式的偶数
    def quadruple(x):
        return x * 4

`callback_demo.py`

from even import *
    
    #中间函数
    #接受一个生成偶数的函数作为参数
    #返回一个奇数
    def getOddNumber(k, getEvenNumber):
        return 1 + getEvenNumber(k)
        
    #起始函数，这里是程序的主函数
    def main():    
        k = 1
        #当需要生成一个2k+1形式的奇数时
        i = getOddNumber(k, double)
        print(i)
        #当需要一个4k+1形式的奇数时
        i = getOddNumber(k, quadruple)
        print(i)
        #当需要一个8k+1形式的奇数时
        i = getOddNumber(k, lambda x: x * 8)
        print(i)
        
    if __name__ == "__main__":
        main()

运行`callback_demp.py`，输出如下：

3
    5
    9

上面的代码里，给`getOddNumber`传入不同的回调函数，它的表现也不同，这就是回调机制的优势所在。值得一提的是，上面的第三个回调函数是一个匿名函数。

**易被忽略的第三方**

通过上面的论述可知，中间函数和回调函数是回调的两个必要部分，不过人们往往忽略了回调里的第三位要角，就是中间函数的调用者。绝大多数情况下，这个调用者可以和程序的主函数等同起来，但为了表示区别，我这里把它称为**起始函数**（如上面的代码中注释所示）。

之所以特意强调这个第三方，是因为我在网上读相关文章时得到一种印象，很多人把它简单地理解为两个个体之间的来回调用。譬如，很多中文网页在解释“回调”（callback）时，都会提到这么一句话：“If you call me, I will call you back.”我没有查到这句英文的出处。我个人揣测，很多人把起始函数和回调函数看作为一体，大概有两个原因：第一，可能是“回调”这一名字的误导；第二，给中间函数传入什么样的回调函数，是在起始函数里决定的。实际上，回调并不是“你我”两方的互动，而是ABC的三方联动。有了这个清楚的概念，在自己的代码里实现回调时才不容易混淆出错。

在合适的时候调用，以完成目标任务。这个被传入的、后又被调用的函数就称为**回调函数**（callback function）。

\[外链图片转存中…(img-T1JdqIey-1594729297455)\]\[外链图片转存中…(img-Qcye8Fjo-1594729297458)\]

**回调机制的优势**

`callback_demo.py`

运行`callback_demp.py`，输出如下：

3
    5
    9

**易被忽略的第三方**

另外，回调实际上有两种：阻塞式回调和延迟式回调。两者的区别在于：阻塞式回调里，回调函数的调用一定发生在起始函数返回之前；而延迟式回调里，回调函数的调用有可能是在起始函数返回之后。这里不打算对这两个概率做更深入的讨论，之所以把它们提出来，也是为了说明强调起始函数的重要性。网上的很多文章，提到这两个概念时，只是笼统地说阻塞式回调发生在主调函数返回之前，却没有明确这个主调函数到底是起始函数还是中间函数，不免让人糊涂，所以这里特意说明一下。另外还请注意，本文中所举的示例均为阻塞式回调。延迟式回调通常牵扯到多线程，我自己还没有完全搞明白，所以这里就不多说了。

[img]: /images/20230209/fc1ac095cd474652acd487b67059716a.png
[img 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC8wZWYzMTA2NTEwZTJlMTYzMGViNDk3NDQzNjI5OTlmOF83MjB3LmpwZw?x-oss-process=image/format,png