<!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); // 换行 索引值从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>