<!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. swfit中的同步锁

    swfit 中 objective-c 中的@syncronized 这个东西不能用了,应该用 objc_sync_enter(self) 代码 objc_sync_exit(self) 代替!

  2. Linux下查看某一进程所占用内存的方法

    Linux下查看某一个进程所占用的内存,首先可以通过ps命令找到进程id,比如 ps -ef | grep kafka 可以看到kafka这个程序的进程id 可以看到是2913,现在可以使用如下命令查 ...

  3. Selenium WebDriver 处理cookie

    在使用webdriver测试中,很多地方都使用登陆,cookie能够实现不必再次输入用户名密码进行登陆. 首先了解一下Java Cookie类的一些方法. 在jsp中处理cookie数据的常用方法: ...

  4. 【关于服务器端SQL Server 2008的设置】 使其他客户端机可通过ODBC数据源可访问

    服务器系统:Server 2003 数据库:SQL Server 2005 服务器配置:开启服务:server.workstation(这两个服务对于提供局域网共享有很大作用) 关闭防火墙 开启gue ...

  5. [转]收集android上开源的酷炫的交互动画和视觉效果：Interactive-animation

    原文链接:http://www.open-open.com/lib/view/open1411443332703.html 描述:收集android上开源的酷炫的交互动画和视觉效果. 1.交互篇 2. ...

  6. IOS - socket 编程初体验

    #import "ViewController.h" @interface ViewController () <NSStreamDelegate, UITextFieldD ...

  7. C#封装C++DLL

    1.新建一个C#-Windows-类库(用于创建C#类库(.dll)的项目)类型的工程 2.对于普通C++函数 XXXX_API void cppFun(int i); 在cs代码中添加 [DllIm ...

  8. 异常处理__try{}__except(EXCEPTION_EXECUTE_HANDLER){}

    在一个函数中不能混合使用 try{}catch(CException *e){} 与 __try{}__except(EXCEPTION_EXECUTE_HANDLER){} 编译时报错 error ...

  9. 让项目同时支持ARC和非ARC

    ttp://code4app.com/snippets/one/禁止某几个文件用ARC模式编译/502344256803fa246d000000#s0 如果你的绝大部分代码需要ARC,那么就设置项目支 ...

  10. 多线程编程3 - GCD

    一.简介 在iOS所有实现多线程的方案中,GCD应该是最有魅力的,因为GCD本身是苹果公司为多核的并行运算提出的解决方案.GCD在工作时会自动利用更多的处理器核心,以充分利用更强大的机器.GCD是Gr ...