HTML5中的数据集dataset和自定义属性data-*

在HTML5中可为所有元素添加一种自定义的属性，这种属性的前缀以data-开头，比如：data-name,目的是为元素提供与页面渲染无关，但与dom元素强相关的属性。添加完自定义属性后我们可以通过元素的dataset属性来访问其值。

• html结构：

  <p data-name='pName' data-nick-name='dear pName' data-gender='female' myname='数据集访问不到'> 我是p </p>
     
     
  1

• js访问：

• var p = document.querySelector('p');
  console.log(p.dataset.name); // pName
  console.log(p.dataset.nickName); // dear Name
  console.log(p.dataset.gender); // female
  console.log(p.dataset); // DOMStringMap {name: "pName", nickName: "dear pName", gender: "female"}
  console.log(p.myname); // undefined

• 
  

 JQUERY 中使用

jquery的data()方法存取data-*自定义属性，方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。主要的方法如下：

 .data( key, value )

.data( obj)

.data( key )

.data()

 HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。例如HTML：

1	<div data-role = "page" data-last-value = "43" data-hidden = "true" data-options = '{"name":"John"}' > </div>

下面的 jQuery代码都是返回 true 的：

1 2 3 4

$ ( "div" ) . data ( "role" ) === "page" ; $ ( "div" ) . data ( "lastValue" ) === 43 ; $ ( "div" ) . data ( "hidden" ) === true ; $ ( "div" ) . data ( "options" ) . name === "John" ;

和html5的api不同的是，jQuery会尝试将字符串转换为一个JavaScript值（包括布尔值（booleans），数字（numbers），对象（objects），数组（arrays）和空（null））。如果这样做不会改变数值的表示，那么该值将转换为一个数字（number）。例如，“1E02”和“100.000”是等同于数字（数字值100），但将转换它们会改变他们的表示，所以他们被保留为字符串。字符串值“100”被转换为数字100。

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

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

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

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

总结：

从上面的代码我们可以知道，dataset属性值是DOMStringMap的一个实例，也就是一个键值对的映射，其实自定义属性很早就已经开始使用了，像京东，淘宝这些电商网站，审查他们的页面，可以看到很多。如果需要给元素添加一些不可见的数据以便进行其他处理，那就要用到自定义数据属性。在跟踪链接或者混搭应用中，通过自定义数据属性能方便地知道点击来自页面中的哪