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 >
38 <li name="BeiJing">北京</li>
39 <li>上海</li>
40 <li>东京</li>
41 <li>首尔</li>
42 </ul>
43
44 <br><br>
45 <p>你喜欢哪款单机游戏?</p>
46 <ul >
47 <li >红警</li>
48 <li>实况</li>
49 <li>极品飞车</li>
50 <li>魔兽</li>
51 </ul>
52
53 <br><br>
54 name: <input type="text" name="username"
55 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 >
51 <li name="BeiJing">北京</li>
52 <li>上海</li>
53 <li>东京</li>
54 <li>首尔</li>
55 </ul>
56
57 <br><br>
58 <p>你喜欢哪款单机游戏?</p>
59 <ul >
60 <li >红警</li>
61 <li>实况</li>
62 <li>极品飞车</li>
63 <li>魔兽</li>
64 </ul>
65
66 <br><br>
67 name: <input type="text" name="username"
68 value="atguigu"/>
69 </body>
70 </html> 