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

Demos： https://github.com/jiangheyan/JavaScriptBase

一、自定义属性

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>

转载于:https://www.cnblogs.com/hihao/p/7344630.html

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

javaScript基础学习 - 14 - JavaScript内置对象 -案例代码
javaScript基础学习 - 14 - JavaScript内置对象 -案例代码 1. Math对象最大值 2. 封装自己的数学对象 3. Math绝对值和三个取整方法 4. Math对象随机数方 ...
JavaScript基础学习动态生成表格
JavaScript基础学习动态生成表格根据我们拥有的数据来动态创建表格的行和列,以及实现删除行的操作 <!DOCTYPE html> <html lang="en&q ...
JavaScript基础学习模拟京东查询快递单号
JavaScript基础学习模拟京东查询快递单号 <!DOCTYPE html> <html lang="en"><head><meta ...
JS学习笔记（JavaScript基础学习必备）
讲解JavaScript 基础语法.关键特性.JSON.WebAPI 等知识点.涉及网页窗口交互的方法以及通过 DOM 进行网页元素的相关操作. 文章目录一.JavaScript 基础 1.什么是 ...
JavaScript基础学习、复习笔记
文章目录前言一.js基础知识 (变量.数据类型.运算符) 1.变量 1.1 声明变量及初始化 1.2 变量更新 1.3 变量语法拓展 1.4 变量命名 1.5 交换两个变量的值 2. 数据类型(重 ...
JavaScript基础第05天【笔记+代码】
函数.作用域.预解析.对象昨日复习 01 - arguments使用 5. arguments的使用 02 - 利用函数求任意个数的最大值 03 - 利用函数翻转数组 04 - 利用函数冒泡排序 0 ...
前端JavaScript基础学习
JavaScript 学习记录整理于:https://chinese.freecodecamp.org/learn. 一.变量 1.声明变量在计算机科学中,数据就是一切,它对于计算机意义重大. ...
JavaScript 基础学习笔记
JavaScript 基础一.初始 JavaScript 1.JS 注释 2.JS 输入输出语句二.变量 1.变量概述 1)什么是变量 2)变量在内存中的存储 2.变量的使用 3.变量的初始化 4 ...
JavaScript基础学习——第五天（原型、垃圾回收、数组简介）
目录 1. 原型 2. 垃圾回收 3. 数组简介知识一:原型深入 JavaScript 之原型和原型链 <!DOCTYPE html> <html><head> ...

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

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

最新文章

热门文章