首页 > js学习 > js基础知识 > data-*数据的获取和设置
2017
02-22

data-*数据的获取和设置

在jquery中,使用data()方法可以方便的获取和设置data-*属性。

.data( key, value ) :设置一个已存在的data-key属性或添加一个新的data-key属性。

.data( key ) :获取指定的data-key属性的值

.data( obj ) :使用带有名称/值对的对象向被选元素添加数据,可以一次添加多个data-*属性。

.data() :不带参数将以 JavaScript 对象的形式获取所有数据

.removeData(key) : 移除指定的data-key属性

.removeData() :如果没有定义key,将从被选元素中删除所有已存储的数据。

<div id="test" data-my='{"name":"xia"}' data-age="28">test</div>

如果数据(data)属性是一个对象(以“{”开始)或数组(以'[‘开始),可以用jQuery.parseJSON 将其解析成字符串;它必须遵循 有效的JSON的语法 ,包括带双引号的属性名称。如果该值不能解析为一个JavaScript值,它将被保留为字符串。

$('$test').data('my').name; //xia

如果想将取出的属性值直接当作字符串的话,请使用 attr() 方法。

data-属性是在第一次使用这个数据属性后不再存取或改变(所有的数据值都在jQuery内部存储)。

调用 .data() 时如果不带参数,将会以 JavaScript 对象的形式获取所有数据。这个对象可以安全的存放在变量中,因为一旦这个新对象被提取出来,之后对元素进行的 .data(obj) 操作,将不会再影响这个对象。另外,直接操作这个对象会比每次调用 .data() 来设置或获取值要快一些。

$('$test').data().my.name; //xia

在原生的javascript中也可以获取和操作data-*属性:

1、可以使用标准的DOM方法,即getAttribute()方法来获取指定的data-key属性的值和setAttribute()设置data-key属性

2、使用dataset属性来获取和设置data-key属性

document.getElementById('test').dataset.age; //28

document.getElementById('test').dataset.age=27; //设置一个data-*属性值

如果属性名称中还包含连字符(-),需要转成驼峰命名方式并去掉连字符,如果有一个属性为data-this-is-my="xia",那么获取该值时用document.getElementById('test').dataset.thisIsMy;

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。