1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <style type="text/css"> 8 9 ul{ 10 list-style: none; 11 } 12 li{ 13 /* 100px; */ 14 height: 40px; 15 background-color: red; 16 margin: 10px auto; 17 } 18 </style> 19 </head> 20 <body> 21 22 <ul> 23 <li>第一个li</li> 24 <li>第二个li</li> 25 <li>第三个li</li> 26 </ul> 27 28 <script type="text/javascript"> 29 30 // js如何给ul的所有的li绑定事件， 假设有三个li 31 32 var itemli = document.getElementsByTagName("li"); //是个伪数组 33 34 for(var i=0; i<itemli.length; i++){ //事件绑定为异步操作，for循环已经结束了，i为3 35 36 itemli[i].onclick=function(){ 37 console.log(i) //i为3 38 } 39 40 } 41 42 //方法一; 43 var itemli = document.getElementsByTagName("li"); 44 for(var i=0; i<itemli.length; i++){ 45 itemli[i].index=i; //给每个li定义一个index属性 46 itemli[i].onclick=function(){ 47 console.log(this.index+ this.innerHTML) 48 } 49 50 } 51 52 // 方法二; 53 var itemli = document.getElementsByTagName("li"); 54 55 for(var i=0; i<itemli.length; i++){ 56 (function(n){ //利用闭包， 57 58 itemli[n].onclick=function(){ 59 console.log(this.innerHTML+",索引是"+ n) 60 } 61 62 })(i) 63 } 64 65 // jq方法 66 var $itemli = $("li"); 67 $itemli.click(function(){ //隐士遍历 68 console.log(this.innerHTML+ this.index()) 69 }) 70 71 72 73 74 </script> 75 </body> 76 </html>