<!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. HBase集成Zookeeper集群部署

    大数据集群为了保证故障转移,一般通过zookeeper来整体协调管理,当节点数大于等于6个时推荐使用,接下来描述一下Hbase集群部署在zookeeper上的过程: 安装Hbase之前首先系统应该做通 ...

  2. Linux实时流量监控工具 - iftop

    *本文转自ggjucheng的博客 介绍 iftop是一款实时流量监控工具,监控TCP/IP连接等,缺点就是无报表功能.必须以root身份才能运行. 实例 默认是监控第一块网卡的流量 iftop 监控 ...

  3. SAP SMARTFORMS-基于内存方式在report程序中传递数据到smartforms显示

    一.准备工作 1.新建include程序 1> include程序名字:ZDD_INC_0104 2> ZDD_INC_0104  程序中的内容为 2.使用T-CODE :SE11新建两个 ...

  4. 原：[eclipse启动错误] JVM terminated.Exit code=2

    启动eclipse的时候忽然出现以下错误: 解决方案: 删除环境变量PATH或者Path中的 C:\ProgramData\Oracle\Java\javapath

  5. nyoj739_笨蛋难题四

    笨蛋难题四 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 这些日子笨蛋一直研究股票,经过调研,终于发现xxx公司股票规律,更可喜的是 笨蛋推算出这家公司每天的股价, ...

  6. Divide and Conquer:Monthly Expense(POJ 3273)

    Monthly Expense 题目大意:不废话,最小化最大值 还是直接套模板,不过这次要注意,是最小化最大值,而不是最大化最小值,判断的时候要注意 联动3258 #include <iostr ...

  7. JS点击灯泡变亮（学自W3school）

    JS学习笔记1(学自W3school)        function changeImage()  {  element = document.getElementByIdx_x('myimage' ...

  8. 基于SSH2的OA项目1.1_20161207_业务开发

    1.1建立用户的pojo模型 建立user.java package org.guangsoft.pojo; import java.util.HashSet; import java.util.Se ...

  9. 在程序中使用geos.dll

    1 在项目->property->configuration properties->c/c++->general->additional include directo ...

  10. 创建INnodb的compress表

    需要将innodb_file_per_table=1 ,innodb_file_format=Barracuda;; 如: Creating a Compressed Table in a Gener ...