<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <ul>

    　　<li>香蕉</li>

    　　<li>苹果</li>

        <li>菠萝</li>

    　　<li>猕猴桃</li>

    　　<li>芒果</li>

    </ul>

</body>

</html>

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>

<script type="text/javascript">

    var itemli = document.getElementsByTagName("li");

//方法一：

//    for(var i =0;i<itemli.length;i++){

//        itemli[i].index = i;

//        itemli[i].onclick = function () {

//            console.log(this.index+this.innerHTML);

//        }

//    }

//    方法二：

//    for(var i = 0; i<itemli.length; i++){

//

//        (function(n){

//

//            itemli[i].onclick = function(){

//

//                console.log(n+itemli[n].innerHTML);    //   索引值从0开始

//

//            }

//

//        })(i)

//

//    }

//    方法三：

//    for(var i = 0; i<itemli.length; i++){

//        itemli[i].onclick = function(n){

//            return function(){

//                console.log(n+itemli[n].innerHTML);    //  \n换行   索引值从0开始

//            }

//        }(i)

//    }

//    方法四：

    $("ul li").click(function () {

        var item = $(this).index();

        var textword = $(this).text();

        console.log(item+textword);

    })

</script>

2.考虑到如果li是动态的添加；

可以把事件绑定在ul上，多次的事件不用在每个li绑定，而是用on一次绑定在ul上，提高了性能；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>

</head>

<body>

<ul>

    <li>item1</li>

    <li>item2</li>

    <li>item3</li>

    <li>item4</li>

    <li>item5</li>

    <li>item6</li>

</ul>

</body>

</html>

<script type="text/javascript">

    $("ul").on("mouseover",function(e){

        $(e.target).css("background-color","#ddd").siblings().css("background-color","white");

    });

</script>

js循环添加事件的更多相关文章

  1. js循环添加事件的问题

    1.需求 给下面每个按钮增加事件 <ul id="list"> <li>按钮1</li> <li>按钮2</li> &l ...

  2. JS给元素循环添加事件的问题

    <ul> <li>男</li> <li>女</li> <li>老</li> <li>少</li&g ...

  3. js动态添加事件-事件委托

    作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...

  4. js动态添加事件

    转载的,但不明确出处 往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用.方法一.setAttributevar obj = document. ...

  5. js中添加事件 attachEvent 与 addEventListener

    给元素添加事件时,使用js进行实现时产生了疑惑,有关事件浏览器兼容的问题,在此记录如下. <!DOCTYPE html> <html> <head> <met ...

  6. JS——动态添加事件和移除事件（有待补充...）

    动态的添加事件:利用 attachEvent 和 addEventListener IE 支持 attachEvent: obj.attachEvent("onclick", Fo ...

  7. JS - 循环添加 DropDownList（Select）

    代码: <td style="padding-left: 10px;"> <select id="ddl_picture_3"> < ...

  8. 从循环添加事件谈起对JS闭包的理解

    1.引子 相信很多初学js的人,都遇到这样一种情况:想要给一堆按钮添加各自的事件,比如点击第i个按钮时,弹出i这个值.理所当然地,我们会这样写: var buttons = document.getE ...

  9. JS闭包机制实现为DOM元素循环添加事件

    HTML代码: <button type='button' class='btn' id='1'>按钮1</button> <button type='button' c ...

随机推荐

  1. c++ vector struct 使用

    1. //test.h #include <string> using namespace std; struct AA { string a1; string a2; string a3 ...

  2. SQL Server的“错误：9004”

    客户的一台现场采集电脑崩溃,无法启动.用PE引导后,将MDF和LDF数据复制出来,往正常的数据库附加时,报如下错误: 处理数据库 'databasename' 的日志时出错.如果可能,请从备份还原.如 ...

  3. [转] Android Volley完全解析(一)，初识Volley的基本用法

    版权声明:本文出自郭霖的博客,转载必须注明出处.   目录(?)[-] Volley简介 下载Volley StringRequest的用法 JsonRequest的用法   转载请注明出处:http ...

  4. iOS SHA1加密实现方法

    使用方法 先导入头文件 #import "SHA1.h" //SHA1测试 NSString* sh1=[SHA1 getSha1String:"]; NSLog(@&q ...

  5. C#创建和调用WebService详细教程

    1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求, ...

  6. python2.x和3.x的区别

    这个星期开始学习Python了,因为看的书都是基于 Python2.x,而且我安装的是Python3.1,所以书上写的地方好多都不适用于Python3.1,特意在Google上search了一下 3. ...

  7. Spring面向切面编程(AOP)

    1 spring容器中bean特性 Spring容器的javabean对象默认是单例的. 通过在xml文件中,配置可以使用某些对象为多列. Spring容器中的javabean对象默认是立即加载(立即 ...

  8. [Android Pro] CountDownTimer倒计时

    定时执行在一段时候后停止的倒计时,在倒计时执行过程中会在固定间隔时间得到通知(译者:触发onTick方法),下面的例子显示在一个文本框中显示一个30s倒计时: new CountdownTimer(3 ...

  9. August 13th 2016 Week 33rd Saturday

    What makes life dreary is the want of motive. 没有目标与动力,生活便会郁闷无光. Without dreams and hope, there will ...

  10. XSLT教程

    XSL 指扩展样式表语言(EXtensible Stylesheet Language), 它是一个 XML 文档的样式表语言. XSLT 指 XSL 转换.即使用 XSLT 将 XML 文档转换为其 ...