js中自定义属性的全部用法

标签上的自定义属性:

在开发中,有时候会需要给标签上添加一些自定义属性用来存储数据或状态

设置了自定义属性的标签, 就是在标签上加上了这个属性,浏览器中的html结构中可以看到

因为DOM对象并不能直接使用点语法获取到这些自定义属性的值,所以接下来说怎么操作元素的自定义属性.

 

这里分原生js和jquery两个角度来说自定义属性, 本文主体内容结构如下

操作自定义属性 1. 原生js方式  1. 最基础的方式

                                                  2. h5新增的方式

                           2. jquery方式   三个方法

                                                

第一大类说原生js, 原生js又分为两种,一种是最基础的方式,一种是h5新增的方式

这里再先说基础的方式,也是通用的方式, 就是说不论你的自定义属性名是哪种格式的,通过基础方式都能操作到.

 

基础的方式

设置自定义属性的值dom.setAttribute(‘index’, ‘0’);

获取自定义属性的值dom.getAttribute(‘index’);   获取不到就返回null

移除自定义属性    dom.removeAttribute(‘index’);

 

这三个方法中的自定义属性名都要加引号

 

题外话:

操作自定义属性的这三个方法, 也可以操作html规范中的属性,结合上面的说法, 只要是元素的属性, 都能获取到.

 

H5新增的方式

H5中有种规范, 就是自定义属性都写成data-xxx 这种形式

比方说在写html的时候就给一个input标签上写个自定义属性data-index=”1”

(我们不管这个属性是在写html文件时写死的,还是我们通过js添加的,比方说通过setAttribute()方法设置的, 只要这个自定义属性名满足格式data-xxx)

那么在原生js中获取的时候就是dom.dataset.index;

并且, 控制台下可以看到dom.dataset是一个对象{ index: “1”}

所以上面我们获取index的值的时候就是使用对象的”点语法” ,  使用dataset这个对象调用它的属性index

当然使用对象的中括号语法也能获取对象的属性值dataset[“index”]

记住使用对象的中括号语法获取属性值的时候一定要要给属性名加上引号

 

第二大类就是使用jquery操作元素的自定义属性了

jquery中获取自定义属性的方法(又分3小种)

input标签上有个自定义属性data-index(我们不管这个属性是在写html文件时写死的,还是我们通过js添加的)

$(“div”).attr(“data-index”)

$(“div”).prop(“data-index”)这个不好, 因为jquery中的prop属性一般是用来获取表单元素的checked等属性的,返回true/false

$(“div”).data(“index”) 这个最常用

 

值的注意的是:

设置的自定义属性的值, 最终都转换成了字符串的形式, 上面获取到的index属性值就是”0”, 如果要比较自定义属性的值,应该使用0 == $("div").data("index), 使用===时可能为false,  注意一下!!!