<!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. jquery 常用的备忘

    1.table 取  tr 的 id值 <table class="table table-striped table-hover table-bordered" id=&q ...

  2. Java对象排序

    java实现对象比较,可以实现java.lang.Comparable或java.util.Comparator接口 //Product.java import java.util.Date; //p ...

  3. [NSURLConnection]分别用Post和Get方式获取网络数据并把数据显示到表格

    @interface ViewController ()<UITableViewDataSource,UITableViewDelegate> { UIButton* getButton; ...

  4. Effective C++ -----条款41：了解隐式接口和编译期多态

    classes和templates都支持接口(interface)和多态(polymorphism). 对classes而言接口是显式的(explicit),以函数签名为中心.多态则是通过virtua ...

  5. Divide and conquer:4 Values whose Sum is 0(POJ 2785)

    找四个数的和为0 题目大意:给定四个集合,要你每个集合选4个数字,组成和为0 这题是3977的简单版,只要和是0就可以了 #include <iostream> #include < ...

  6. JS 循环练习

    规律   大范围套小范围   循环   分支语句   switch case 嵌套  死循环 while(true)  打破循环   break    continue    while(true) ...

  7. SuperIndicator 专做轮播图库，没有之一，支持轮播图无限循环

    github地址:https://github.com/hejunlin2013/SuperIndicator SuperIndicator a superindicatorlibray for vi ...

  8. September 16th 2016 Week 38th Friday

    All the treasures of the earth would not bring back one lost moment. 机会失去不再来,千贯万贯难赎回. Cherish your h ...

  9. 建立controller

    复制controller,重建controller 改: @Controller("[productController]") @RequestMapping("/[pr ...

  10. No space left on device 解决Linux系统磁盘空间满的办法

    最近Linux电脑在执行mvn时候总是报错: No space left on device   原因是磁盘空间满了,我马上加了20G的硬盘容量,但是还是报错,上网查了一下,发现了解决方法,我用了其中 ...