您的位置：首页 > 其它

作业二（单击弹跳li节点的每个文本节点的值；点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上，有，则去除）

2017-07-13 16:12 302 查看

1.需求

　　点击每个 li 节点, 都弹出其文本值

2.程序

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript">
7     window.onload=function(){
8         var liNodes=document.getElementsByTagName("li");
9         for(var i=0;i<liNodes.length;i++){
10             liNodes[i].onclick=function(){
11                 alert(this.firstChild.nodeValue);
12             }
13         }
14     }
15 </script>
16 </head>
17 <body>
18     <p>你喜欢哪个城市?</p>
19     <ul id="city">
20         <li id="bj" name="BeiJing">北京</li>
21         <li>上海</li>
22         <li>东京</li>
23         <li>首尔</li>
24     </ul>
25
26     <br><br>
27
28     <p>你喜欢哪款单机游戏?</p>
29     <ul id="game">
30         <li id="rl" name="hongjing">红警</li>
31         <li>实况</li>
32         <li>极品飞车</li>
33         <li>魔兽</li>
34     </ul>
35 </body>
36 </html>

3.效果

　　

4.需求　　

　　点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上，有，则去除

5.程序

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript">
7     window.onload=function(){
8         var liNodes=document.getElementsByTagName("li");
9         for(var i=0;i<liNodes.length;i++){
10             liNodes[i].onclick=function(){
11                 var liValue=this.firstChild.nodeValue;
12                 var reg=/^\^{2}/g;
13                 if(reg.test(liValue)){
14                     liValue=liValue.replace(reg,"");
15                 }else{
16                     liValue="^^"+liValue;
17                 }
18                 this.firstChild.nodeValue=liValue;
19             }
20         }
21     }
22 </script>
23 </head>
24 <body>
25     <p>你喜欢哪个城市?</p>
26     <ul id="city">
27         <li id="bj" name="BeiJing">北京</li>
28         <li>上海</li>
29         <li>东京</li>
30         <li>首尔</li>
31     </ul>
32
33     <br><br>
34
35     <p>你喜欢哪款单机游戏?</p>
36     <ul id="game">
37         <li id="rl" name="hongjing">红警</li>
38         <li>实况</li>
39         <li>极品飞车</li>
40         <li>魔兽</li>
41     </ul>
42 </body>
43 </html>

6.运行结果

　　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航