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. 【BZOJ1056】[HAOI2008]排名系统（Splay）

    [BZOJ1056][HAOI2008]排名系统(Splay) 题面 BZOJ 洛谷 题解 \(Splay\)随便维护一下就好了,至于名字什么的,我懒得手写哈希表了,直接哈希之后拿\(map\)压. ...

  2. HGOI20180812 (NOIP2018 提高组 Day1 模拟试题)

    前缀数组其实就是有序的,那么答案显然是      我们尝试求出通项公式: 证明如下: 因为 所以: 解之得: 更加通俗的写法如下: 易知  令 那么, (错位相减) 由易知等式代入得, 所以, 所以程 ...

  3. 【bzoj1758】 Wc2010—重建计划

    http://www.lydsy.com/JudgeOnline/problem.php?id=1758 (题目链接) 题意 给出一棵树,每条边有边权,问选出一条长度为$[L,U]$的路径,使得路径上 ...

  4. 利用EF和C#泛型实现通用分页查询

    利用EF和C#泛型实现通用分页查询       Entity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (ORM) 解决方案,是微软的ORM框架.此框架将数据库中的 ...

  5. 【洛谷P2504】聪明的猴子 最小瓶颈树

    题目大意:给定一张 N 个顶点的完全图,边有边权,求该完全图的一棵最小瓶颈树. 最小瓶颈树:一棵最大边权值在同一张图的所有生成树中最小,即:最大边权值最小的生成树,其值为该树的最大边权的权值. 引理1 ...

  6. （转） Eclipse通过HibernateTools实现逆向生成Hibernate实体类

    背景:工作中使用Hibernate进行持久化的开发工作,所以有必要详细了解这方面的知识. ps:这里有个问题就是刷新表的时候速度太慢了.还不如自己手动去创建.如果表太多倒是可以采取批量生成的策略. 在 ...

  7. eos节点启动源码分析

    在eos源码目录中programs/nodeos/main.cpp文件里,为节点启动的主函数main函数内部做了两件事1 初始化 application if(!app().initialize< ...

  8. UDP ------ UDP 和 TCP 的对比

    UDP是无连接协议,客户端和服务器通信之前不需要建立握手连接: UDP没有应答机制,所以也没有重发机制,很大的可能会造成丢包.收到重复包.乱序的情况: UDP可以实现局域网广播功能,即某个主机可以向所 ...

  9. Java基础-SSM之Spring的POJO（Plain Old Java Object）实现AOP

    Java基础-SSM之Spring的POJO(Plain Old Java Object)实现AOP 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 上次我分享过Spring传统的A ...

  10. C语言扫盲篇

    C语言扫盲篇 作者:尹正杰 版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接. 一.什么是C语言 C 语言是一种通用的高级语言,最初是由 ...