<!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. hdu3709

    枚举+数位dp 注意处理数字为0和1的情况. #include <cstdio> #include <cstring> using namespace std; #define ...

  2. ABAP 供应商、工厂对应公里数维护

    *&---------------------------------------------------------------------* *& Report  ZMMR011 ...

  3. Effective C++ -----条款28：避免返回handles指向对象内部成分

    避免返回handles(包括reference.指针.迭代器)指向对象内部.遵守这个条款可增加封装性,帮助const成员函数的行为像个const,并将发生“虚吊号码牌”(dangling handle ...

  4. 【leetcode】Remove Duplicates from Sorted Array I & II（middle）

    Given a sorted array, remove the duplicates in place such that each element appear only once and ret ...

  5. NEFU 506&&ZOJ 3353 Chess Board (四种构造的高斯消元)

    题目链接 题意:有四种翻转方式,问是否能使得所有棋子都变为0,求最小步数. 题解:依次构造枚举求出最小值即可. #include <iostream> #include <cstdi ...

  6. curl命令 抓取网络数据相应头

    curl --verbose  --data "Password=123&Username=158101068&url=http://m.vancl.com/" & ...

  7. JavaScript prototype应用

    //JavaScript自定义功能 //1,去除字符串两端空格 String.prototype.trim = function() { var start, end; start = 0; end  ...

  8. java操作数据库出错

    "无效的列索引"其实是个低级的错误 出错原因:1.sql串的?号数目和提供的变量数目不一致:例如:jdbcTemplate.update(sql, new Object[] {ne ...

  9. iOS添加另一个控制器的时候要注意啊

    ios的父控制器控制器和子控制器之间的注意点: " >> #warning 需要把新创建出来的控制器添加成子控制器 . 不然子控制器里面的子控件无法响应点击事件 " 一 ...

  10. 用Mysqlbinlog备份BinLog文件

    默认情况下, mysqlbinlog读取二进制文件[BinLog]并以文本的方式呈现[text format].mysqlbinlog可以直接地从本地读取Log,也可以读取远程的Log[--read- ...