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. Spring点滴十：Spring自动装配(Autowire)

    在基于XML配置元数据,在bean的配置信息中我们可以使用<constructor-arg/>和<property/>属性来实现Spring的依赖注入.Spring 容器也可以 ...

  2. 【uoj35】 后缀排序

    http://uoj.ac/problem/35 (题目链接) 题意 如题,并且求height数组. Solution 挂一发后缀自动机构后缀数组及height数组 细节 注意基数排序和连边的时候不要 ...

  3. ueditor的上传文件漏洞（c#）

    项目中使用了ueditor,安全测试发现一个漏洞,涉及漏洞的文件名字为UploadHandler.cs,其中有一个方法: private bool CheckFileType(string filen ...

  4. 1.Unix，Linux起源与编译原理

    一.UNIX操作系统   作者:丹尼斯.里奇,肯.汤普逊  版权:贝尔实验室  时间:1971  特点:多用户,多任务(多进程),多CPU(多种CPU架构),高安全,高可靠,高性能,高稳定  应用:构 ...

  5. NodeJS 笔记 path模块

    path 模块,本模块包含一系列处理和转换文件路径的工具集. path.normalize(path)   normalize函数将不符合规范的路径经过格式化转换为标准路径,解析路径中的.与..外,还 ...

  6. webpack插件去除没用到的css

    去除没用到的css需要用到purifycss-webpack插件,而这个插件又依赖于purify-css 1.安装 npm i purifycss-webpack purify-css -D 2.加入 ...

  7. Signal ()函数详细介绍

    1. 功能 设置某一信号的对应动作 2. 声明 #include <signal.h> typedef void (*sighandler_t)(int); sighandler_t si ...

  8. Django 2.0.1 官方文档翻译: 编写你的第一个 Django app，第一部分（Page 6）

    编写你的第一个 Django app,第一部分(Page 6)转载请注明链接地址 Django 2.0.1 官方文档翻译: Django 2.0.1.dev20171223092829 documen ...

  9. 第6月第19天 lua动态链接库（luaopen_*函数的使用） skynet

    1. 给这个测试库取名为dylib,它包含一个函数add.lua中这样使用: local dylib = require "dylib.test"    local c = dyl ...

  10. str和unicode类

    在py2中,分为两类,str和unicode 而在py3中,分为两类,byte和str py2中的str等同于py3中的byte 首先明确一点,我们编辑好一段文本,python并不知道我们的文本是以什 ...