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. 【字符串算法1】 再谈字符串Hash（优雅的暴力）

    [字符串算法1] 字符串Hash(优雅的暴力) [字符串算法2]Manacher算法 [字符串算法3]KMP算法 这里将讲述  [字符串算法1] 字符串Hash 老版原文: RK哈希(Rabin_Ka ...

  2. HGOI20180822 五校联考卷

    T1 [题目意思]给出下列程序片段,预测程序运行结果 输入文件为T(T<=200)组数据,每组数据有个n(n<=1014) 输出文件为T行,每行一个数据,表示fun(n)的值 simple ...

  3. 基于Maven构建Web项目

    1.下载Maven,并配置好环境变量 2.打开命令行窗口,输入以下命令构建Maven Web项目 mvn archetype:generate -DgroupId=com.hello -Dartifa ...

  4. struts2拦截器interceptor的配置方法及使用

    转: struts2拦截器interceptor的配置方法及使用 (2015-11-09 10:22:28) 转载▼ 标签: it 365 分类: Struts2  NormalText Code  ...

  5. DCT变换、DCT反变换、分块DCT变换

    一.引言 DCT变换的全称是离散余弦变换(Discrete Cosine Transform),主要用于将数据或图像的压缩,能够将空域的信号转换到频域上,具有良好的去相关性的性能.DCT变换本身是无损 ...

  6. Apache 的 ab 压测工具快速使用

    ab 是一个 httpd 自带的很好用的压力测试工具,它是 apache bench 命令的缩写.ab 命令会创建多个并发访问线程,模拟多个访问者同时对某一 URL 地址进行访问.可以用来测试 apa ...

  7. idea2017破解方法

    破解方法 切换license server然后 输入网址:http://idea.iteblog.com/key.php即可

  8. Mac下安装zsh（Oh My ZSH）的shell，替代原有的bash

    说明:一开始装zsh我是拒绝的,因为这个东西装简单,卸载很难,并且装了之后默认Shell的配置文件不能用了,比如~/.bashrc这些.所以在装的时候要再三考虑好! 官网:http://ohmyz.s ...

  9. Spring Cloud（十二）声名式服务调用：Feign 的使用（下）

    前言 本文是对上一篇博文的扩充,很多平时用不到的特性就开始简略一写,Spring Cloud各版本之间的差距很大的,用不到的可能下一个版本就被kill掉了.由于笔者写本文开始的时候误解了Feign的继 ...

  10. HDU 2988 Dark roads （裸的最小生成树）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2988 解题报告:一个裸的最小生成树,没看题,只知道结果是用所有道路的总长度减去最小生成树的长度和. # ...