JavaScript基础学习--05自定义属性、索引值

 

一、自定义属性
     1、读写操作
<input abc="123" type="button" value="按钮" />
=========================================================
//读写：
var aBtn = document.getElementsByTagName('input');
aBtn[0].abc = '456';
 
     2、js可以为任何HTML元素添加任意个自定义属性
     
     3、自定义属性可以作为判断的依据，相对于用class后者flag变量判断，优点：
          3.1     有时候不允许操作class时，可以利用自定义属性，通过判断自定义属性的值，从而操作流程
          3.2     一个flag变量只能判断一组对象，当对象在循环中有多组对象时，只能用class 或者 自定义属性
 
     4、for循环里面的i
  
1 for(var i = 0; i < aLi.length; i++) {
2      i     //这里的 i 是0、1、2……
3      aLi[i].onclick = function() {
4           i     //这里的 i 涉及到闭包和作用域问题，不能返回1、2、…… 只能返回aLi.length
5      }
6 }
 
     5、自定义索引
1 for(var i = 0; i < aLi.length; i++) {
2      aLi[i].index = i;     //给每个li添加自定义属性index，值为i，模拟成为索引
3      aLi[i].onclick = function() {
4           i     //这里的 i 涉及到闭包和作用域问题，不能返回1、2、…… 只能返回aLi.length
5      }
6 }
 
          5.1     自定义索引的应用
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <script>
 7 window.onload = function (){
 8     var aBtn = document.getElementsByTagName('input');
 9     var aP = document.getElementsByTagName('p');
10  
11     // 想建立“匹配”“对应”关系，就用索引值
12     var arr = [ '莫涛', '张森', '杜鹏' ];
13  
14     for( var i=0; i<aBtn.length; i++ ){
15  
16         aBtn[i].index = i;            // 自定义属性（索引值）
17  
18         aBtn[i].onclick = function (){
19             // alert( arr[ this.index ] );
20             this.value = arr[ this.index ];
21  
22             aP[ this.index ].innerHTML = arr[ this.index ];
23         };
24     }
25 };
26 </script>
27 </head>
28  
29 <body>
30  
31 <input type="button" value="btn1" />
32 <input type="button" value="btn2" />
33 <input type="button" value="btn3" />
34 <p>a</p>
35 <p>b</p>
36 <p>c</p>
37  
38 </body>
39 </html>

 

 
 
 
 
 
 
posted @ 2017-08-11 10:41  HelenJ  阅读(334)  评论(0)  编辑  收藏  举报