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 /* width: 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>
