1.需求

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

2.程序

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <script type="text/javascript">

     window.onload=function(){

         var liNodes=document.getElementsByTagName("li");

         for(var i=0;i<liNodes.length;i++){

             liNodes[i].onclick=function(){

                 alert(this.firstChild.nodeValue);

             }

         }

     }

 </script>

 </head>

 <body>

     <p>你喜欢哪个城市?</p>

     <ul id="city">

         <li id="bj" name="BeiJing">北京</li>

         <li>上海</li>

         <li>东京</li>

         <li>首尔</li>

     </ul>

     <br><br>

     <p>你喜欢哪款单机游戏?</p>

     <ul id="game">

         <li id="rl" name="hongjing">红警</li>

         <li>实况</li>

         <li>极品飞车</li>

         <li>魔兽</li>

     </ul>

 </body>

 </html>

3.效果

　　

4.需求　　

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

5.程序

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <script type="text/javascript">

     window.onload=function(){

         var liNodes=document.getElementsByTagName("li");

         for(var i=0;i<liNodes.length;i++){

             liNodes[i].onclick=function(){

                 var liValue=this.firstChild.nodeValue;

                 var reg=/^\^{2}/g;

                 if(reg.test(liValue)){

                     liValue=liValue.replace(reg,"");

                 }else{

                     liValue="^^"+liValue;

                 }

                 this.firstChild.nodeValue=liValue;

             }

         }

     }

 </script>

 </head>

 <body>

     <p>你喜欢哪个城市?</p>

     <ul id="city">

         <li id="bj" name="BeiJing">北京</li>

         <li>上海</li>

         <li>东京</li>

         <li>首尔</li>

     </ul>

     <br><br>

     <p>你喜欢哪款单机游戏?</p>

     <ul id="game">

         <li id="rl" name="hongjing">红警</li>

         <li>实况</li>

         <li>极品飞车</li>

         <li>魔兽</li>

     </ul>

 </body>

 </html>

6.运行结果

　　

随机推荐

  1. 【uoj3】 NOI2014—魔法森林

    http://uoj.ac/problem/3 (题目链接) 题意 给出一张带权图,每条边有两个权值A和B,一条路径的花费为路径中的最大的A和最大的B之和.求从1走到n的最小花费. Solution ...

  2. arcgis计算邻接矩阵

    求邻接矩阵 教程链接   http://m.blog.csdn.net/wan_yanyan528/article/details/49175673 (1) 将目标shp文件导出一份副本备用(以省级为 ...

  3. 在ubuntu server上搭建Hadoop

    1. Java安装: Because everything work with java. $ sudo apt-get install openjdk-7-jdk 安装之后,可以查看java的版本信 ...

  4. ELKStack-生产案例项目实战（十一）

    ELKStack-生产案例项目实战 1.收集ES和apache日志,入redis input { file { path => "/etc/httpd/logs/access_log& ...

  5. swift学习笔记3

    1.在 Swift 中,枚举类型是一等(first-class)类型.它们采用了很多在传统上只被类(class)所支持的特性,例如计算型属性(computed properties),用于提供枚举值的 ...

  6. Java与groovy混编 —— 一种兼顾接口清晰和实现敏捷的开发方式

    有大量平均水平左右的"工人"可被选择.参与进来 -- 这意味着好招人 有成熟的.大量的程序库可供选择 -- 这意味着大多数项目都是既有程序库的拼装,标准化程度高而定制化场景少 开发 ...

  7. inline-block的间距问题

    张鑫旭的博客有提到,解决的方法有很多,先贴下,回头再做整理. http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove ...

  8. argunlar 1.0.1 【数据绑定】

    <!DOCTYPE html><html lang="en" ng-app><head>    <meta charset="U ...

  9. Tornado实现多线程、多进程HTTP服务

    背景 线上有一个相关百科的服务,返回一个query中提及的百科词条.该服务是用python实现的,以前通过thrift接口访问,现要将其改为通过HTTP访问.之前没有搭建HTTPServer的经验,因 ...

  10. BZOJ4818 序列计数

    4818: [Sdoi2017]序列计数 Time Limit: 30 Sec  Memory Limit: 128 MB Description Alice想要得到一个长度为n的序列,序列中的数都是 ...