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. 【转】结构struct 联合Union和枚举Enum的细节讨论

    结构struct 联合Union和枚举Enum的细节讨论 联合(Union)是一种构造数据类型,它提供了一种使不同类型数据类型成员之间共享存储空间的方法,同时可以实现不同类型数据成员之间的自动类型转换 ...

  2. Appium+python自动化获取toast消息（windows版）的方法

    原来用的Appium1.5.3GUI版本,那为什么升级呢? 为了兼容最新版本的iOS10和Android7 Xcode8升级后,将不支持使用UIAutomation,而是改为使用XCUITest了,并 ...

  3. 【codevs1245】最小的 N 个和

    题目大意:给定两个有 N 个数字的序列,从这两个序列中任取一个数相加,共有 \(N^2\) 个和,求这些和中最小的 N 个. 题解:由于数据量是 10W,必须减少每次选取的决策集合中元素的个数.可以发 ...

  4. Python基础学习（三）

    了解了Python的基础使用,接下来继续练手廖雪峰老师的教学案例. 一.变量可以指向函数 说明,一个函数可以赋值给一个变量,该变量就会具有该函数的功能,举例: gg = abs print( gg(- ...

  5. python singleton design pattern super() 多继承

    python  singleton design pattern decorate baseclass metaclass import module super() 一.A decorator de ...

  6. webpack提取库

    有时候我们不想bundle.js过于大,想把一些库独立成文件单独拿出来 module.exports = { entry: { // bundle是我们要打包的项目文件的导出名字, app是入口js文 ...

  7. Hadoop生态圈-Kafka配置文件详解

    Hadoop生态圈-Kafka配置文件详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.默认kafka配置文件内容([yinzhengjie@s101 ~]$ more /s ...

  8. Python内置的操作系统模块（os）与解释器交互模块（sys）

    Python内置的操作系统模块(os)与解释器交互模块(sys) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本片博客只介绍Python调用操作系统的模块即os模块,以及Pyth ...

  9. bzoj千题计划227：bzoj1486: [HNOI2009]最小圈

    http://www.lydsy.com/JudgeOnline/problem.php?id=1486 二分答案 dfs版spfa判负环 #include<queue> #include ...

  10. spring的事务控制

    1.事务介绍 (1)特性:ACID Atomicity(原子性):事务中的所有操作要么全做要么全不做 Consistency(一致性):事务执行的结果使得数据库从一个一致性状态转移到另一个一致性状态 ...