data-* 属性用于存储私有页面后应用的自定义数据,可以在所有的 HTML 元素中嵌入数据。
自定义的数据可以让页面拥有更好的交互体验(不需要使用 Ajax 或去服务端查询数据)。
data-* 属性由以下两部分组成:
属性名不要包含大写字母,在 data- 后必须至少有一个字符。
该属性可以是任何字符串
注意: 自定义属性前缀 "data-" 会被客户端忽略。
语法:
为一个元素分配data属性存储数据
在js中设置和获取
var open = document.getElementsByClassName('open');
open.dataset.id = '1';//设置
open.onclick = function () {
alert(this.dataset.id);//获取
}
在jq中设置和获取
$('.open').click(function () {
var name = $(this).data("name","word")//设置
var id = $(this).attr("data-id")//获取
//或者 var id = $(this).data('id')
console.log(id)
})
在jq中设置也可以把一个包含键/值对的对象,向被选元素添加数据 (在元素data-*属性中设置json数据时,需要注意单双引号,否则可能出现undefined的,获取不到数据,正确的做法是用双引号。)
dom.data('setObj', JSON.stringify({'name': 'william', 'age': 22}))
取的时候,只需要
var obj = dom.data('setObj')