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. 【Revit API】创建相机视角

    在Revit中有一个相机功能可以以相机视角产生一个视图.一开始我在Revit2016的API文档中找关键词Camera,但是没什么收获. 其实这个相机功能的真正核心是创建透视视图:View3D.Cre ...

  2. 洛谷 P1377 [TJOI2011]树的序 解题报告

    P1377 [TJOI2011]树的序 题目描述 众所周知,二叉查找树的形态和键值的插入顺序密切相关.准确的讲:1.空树中加入一个键值\(k\),则变为只有一个结点的二叉查找树,此结点的键值即为\(k ...

  3. 洛谷P1280 尼克的任务

    这个DP气死我了.....写的时候脑子比较迟钝于是爆0了好几次,最后还是我旁边的AKIOI巨佬告诉我解法才会做. 我一开始设计的状态是f[i]表示i时刻正在休息,从1到i的最长休息时间. 然后经历了各 ...

  4. linux command ------ watch

    watch命令以周期性的方式执行给定的指令,指令输出以全屏方式显示.watch是一个非常实用的命令,基本所有的Linux发行版都带有这个小工具,如同名字一样,watch可以帮你监测一个命令的运行结果, ...

  5. zabbix监控的基础概念、工作原理及架构（一）

    zabbix监控的基础概念.工作原理及架构 转载于网络 一.什么是zabbix及优缺点 Zabbix能监视各种网络参数,保证服务器系统的安全运营,并提供灵活的通知机制以让系统管理员快速定位/解决存在的 ...

  6. Golang异常处理-panic与recover

    Golang异常处理-panic与recover 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在程序设计中,容错是相当重要的一部分工作,在 Go中它是通过错误处理来实现的,err ...

  7. IO 复习字节流字符流拷贝文件

    /* 本地文件 URL 文件拷贝 *//*文本文件拷贝 可以通过 字符流,也可以通过字节流*/ /*二进制文件拷贝 只可以通过字节流*//* 希望这个例子能帮助搞懂 字符流与字节流的区别 */ imp ...

  8. [原] eclipse 无法找到 run as junit

    碰见这个问题,折磨我好一下! 问题根源和解决方式 第一,保证有junit jar包,基本不会犯这错误: 第二,保证你这个类是Source可编译文件,要是这个类在普通文件夹下,工程是不会编译它的,也就找 ...

  9. 【转】用CornerStone配置SVN，HTTP及svn简单使用说明

    已经安装了的小伙伴请直接看三步骤 一.下载地址 CornerStoneV2.6:http://pan.baidu.com/s/1qWEsEbM密码:www.macx.cn 二.安装破解方法 1.安装之 ...

  10. mongoDB - 日常操作四

    python 使用 mongodb easy_install pymongo # 安装(python2.+) import pymongo connection=pymongo.Connection( ...