1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>Untitled Document</title> 5 6 <script type="text/javascript"> 7 window.onload = function(){ 8 9 //点击每个 li 节点, 都弹出其文本值. 10 11 //1. 获取所有的 li 节点 12 var liNodes = document.getElementsByTagName("li"); 13 14 //2. 实用 for 循环进行遍历. 得到每一个 li 节点 15 for(var i = 0; i < liNodes.length; i++){ 16 //3 为每一个 li 节点添加 onclick 响应函数. 17 18 liNodes[i].onclick = function(){ 19 //4. 在响应函数中获取当前节点的文本节点的文本值 20 //5. alert 打印. 21 //this 为正在响应事件的那个节点. 22 alert(this.firstChild.nodeValue); 23 24 //此时 i 已经是 8 了, 而 liNodes[8] 不指向任何节点. 25 //alert(i); 26 } 27 28 } 29 30 31 } 32 </script> 33 34 </head> 35 <body> 36 <p>你喜欢哪个城市?</p> 37 <ul id="city"> 38 <li id="bj" name="BeiJing">北京</li> 39 <li>上海</li> 40 <li>东京</li> 41 <li>首尔</li> 42 </ul> 43 44 <br><br> 45 <p>你喜欢哪款单机游戏?</p> 46 <ul id="game"> 47 <li id="rl">红警</li> 48 <li>实况</li> 49 <li>极品飞车</li> 50 <li>魔兽</li> 51 </ul> 52 53 <br><br> 54 name: <input type="text" name="username" 55 id="name" value="atguigu"/> 56 </body> 57 </html>
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>Untitled Document</title> 5 6 <script type="text/javascript"> 7 window.onload = function(){ 8 9 //点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上 10 //有, 则去除 11 12 var liNodes = document.getElementsByTagName("li"); 13 for(var i = 0; i < liNodes.length; i++){ 14 liNodes[i].onclick = function(){ 15 var val = this.firstChild.nodeValue; 16 17 var reg = /^^{3}/g; 18 if(reg.test(val)){ 19 val = val.replace(reg, ""); 20 }else{ 21 val = "^^^" + val; 22 } 23 24 this.firstChild.nodeValue = val; 25 } 26 } 27 28 /* 29 30 //1. 使用正则表达式判断是否已 ^^ 开始 31 //2. 调用字符串的 replace(reg, str) 方法除去指定的字符串. 32 33 var str = "^^abc"; 34 var reg = /^^{2}/g; 35 alert(reg.test(str)); //true 36 str = str.replace(reg, ""); 37 alert(str); 38 39 var str2 = "abc"; 40 alert(reg.test(str2)); //false 41 */ 42 43 44 } 45 </script> 46 47 </head> 48 <body> 49 <p>你喜欢哪个城市?</p> 50 <ul id="city"> 51 <li id="bj" name="BeiJing">北京</li> 52 <li>上海</li> 53 <li>东京</li> 54 <li>首尔</li> 55 </ul> 56 57 <br><br> 58 <p>你喜欢哪款单机游戏?</p> 59 <ul id="game"> 60 <li id="rl">红警</li> 61 <li>实况</li> 62 <li>极品飞车</li> 63 <li>魔兽</li> 64 </ul> 65 66 <br><br> 67 name: <input type="text" name="username" 68 id="name" value="atguigu"/> 69 </body> 70 </html>