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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏电光石火

mybatis在xml文件中处理大于号小于号的方法

第一种方法: 用了转义字符把>和<替换掉,然后就没有问题了。 SELECT * FROM test WHERE 1 = 1 AND start_da...

19790
来自专栏偏前端工程师的驿站

JS魔法堂:追忆那些原始的选择器

一、前言                                                                            ...

24970
来自专栏柠檬先生

html5 新特性

1.querySelector 返回文档中匹配指定css选择器的一个元素.     注意:uerySelector() 方法仅仅返回匹配指定选择器的第一个元...

246100
来自专栏前端架构与工程

jQuery源码——.html()方法原理解析

在将字符串转化为html碎片时,一般会将字符串作为容器的innerHTML属性赋值。但innerHTML有很多局限性,比如我们想转化的字符串中有<script>...

23880
来自专栏快乐八哥

前端知识小结

1. var a=null==undefined?1:"abc"; var b=typeof(a); var c=typeof(b); var d=typeof...

18790
来自专栏xingoo, 一个梦想做发明家的程序员

简单选择排序

选择排序时间复杂度也为O(n^2) 算法思想: 选择排序即每次length-i的长度内选择一个最小的元素,与第一个进行替换,这样大循环length次后,就可以得...

23560
来自专栏性能与架构

JS中控制好this关键字的指向

javascript中的 this 的指向不太好控制,理解不好的话很容易错误 下面几个示例可以加深对this指向的理解 (1)内联事件 <a href="...

287110
来自专栏前端说吧

Sass-学习笔记【进阶篇】

60880
来自专栏电光石火

mybatis在xml文件中处理大于号小于号的方法

用了转义字符把>和<替换掉,然后就没有问题了。

271100
来自专栏Pythonista

Golang实现一个密码生成器

20530

扫码关注云+社区

领取腾讯云代金券