zoukankan      html  css  js  c++  java
  • JavaScript 获取点击事件(两个小例子)

    点击每个li节点,都弹出其文本值

     1 <title>Insert title here</title>
     2    
     3      <script type="text/javascript">
     4           
     5             //点击每个li节点,都弹出其文本值
     6             
     7             //1.获取所有的li节点
     8             window.onload = function(){
     9                 var liNodes = document.getElementsByTagName("li");
    10                 //2.实用for循环进行遍历,获取每一个li节点
    11                 for(var i=0;i<liNodes.length;i++){
    12                     //4.在响应函数中获取当前文本节点的文本值
    13                     liNodes[i].onclick = function(){
    14                         //5.alert打印
    15                         alert(this.firstChild.nodeValue);
    16                     }
    17                 }
    18             }
    19      
    20      </script>
    21 
    22 </head>
    23 <body>
    24       <p>你喜欢哪个城市</p>
    25       <ul id="city">
    26            <li id="bj" name="BeiJing">北京</li>
    27            <li>上海</li>
    28            <li>东京</li>
    29            <li>首尔</li>
    30       </ul>
    31 
    32 
    33 </body>

    点击每个li节点,若li节点的文本值没有^^开头,加上;有,去除

     1 <title>Insert title here</title>
     2 
     3   <script type="text/javascript">
     4           
     5             //点击每个li节点,若li节点的文本值没有^^开头,加上;有,去除
     6             
     7             //1.获取所有的li节点
     8             window.onload = function(){
     9                 var liNodes = document.getElementsByTagName("li");
    10                 //2.实用for循环进行遍历,获取每一个li节点
    11                 for(var i=0;i<liNodes.length;i++){
    12                     //4.在响应函数中获取当前文本节点的文本值
    13                     liNodes[i].onclick = function(){
    14                         var val=this.firstChild.nodeValue;
    15                         //正则表达式
    16                         var reg = /^^{2}/g;
    17                         if(reg.test(val)){
    18                             val = val.replace(reg,"");
    19                         }else{
    20                             val = "^^" + val;
    21                         }
    22                         this.firstChild.nodeValue = val;
    23                     }
    24                 }
    25             }
    26      
    27      </script>
    28 </head>
    29 <body>
    30 
    31       <p>你喜欢哪个城市</p>
    32       <ul id="city">
    33            <li id="bj" name="BeiJing">北京</li>
    34            <li>上海</li>
    35            <li>东京</li>
    36            <li>首尔</li>
    37       </ul>
    38 
    39 </body>
  • 相关阅读:
    PDB文件详解
    C++模板常用功能讲解
    Windows下多线程编程(二)
    关于静态库中使用全局变量可能导致的问题
    js中的函数
    js中字符串的加密base64
    列表推导式
    函数和方法的区别
    xshell连不上虚拟机
    网络编程,并行,并发和协程
  • 原文地址:https://www.cnblogs.com/Codinginging/p/10753617.html
Copyright © 2011-2022 走看看