1.简介

data-*HTML5才出现的属性，用于存储页面或应用程序的私有自定义数据。

我们能在 HTML 元素上嵌入自定义 data-* 属性存储的（自定义）数据，以便能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

2.要求（规范）

属性名不应该包含任何大写字母，并且在前缀 “data-“ 之后必须有至少一个字符。
属性值可以是任意字符串

3.js读写方法

3.1.方法一，使用getAttribute/setAttribute

getAttribute用以获取data-*属性值，setAttribute用以设置data-*属性值，Html代码：

1	`<!DOCTYPE html> <html> <head> </head> <body> <div data-age='24' id='zg'>123</div> <script> var age=document.getElementById("zg").getAttribute('data-age'); alert(age) </script> </body> </html>`

结果：

3.2.方法二，使用元素的dataset属性

Dataset的内容只是attribute的一个子集，不同的是，dataset内只有data-*的属性的内容，若元素为

1	`<div data-age='24' id='zg' age='23'>123</div>`

则里面不会有age=’23’。

此外，使用dataset还有两个需要注意的地方：

我们在添加或读取属性的时候需要去掉前缀data-*；
如果属性名称中还包含连字符(-)，需要转成驼峰命名方式，但如果在CSS中使用选择器，我们需要使用连字符格式。

例如（Html代码）：

1	`<!DOCTYPE html> <html> <head> </head> <body> <div data-my-age='24' id='zg' age='23'>123</div> <script> var age=document.getElementById("zg").dataset.myAge; alert(age) </script> </body> </html>`

结果：

使用dataset赋值，只需直接赋值即可，例如：

1	`document.getElementById("zg").dataset.myAge='30'`

4.jQuery读写

4.1.data()方法

Html代码：

`<!DOCTYPE html> <html> <head> <script src="jquery-3.0.0.min.js"></script> </head> <body> <div data-my-age='24' id='zg' age='23'>123</div> <script> var age = $("#zg").data("myAge"); alert(age); $("#zg").data("myAge"，40); age = $("#zg").data("myAge"); alert(age); </script> </body> </html>`

结果：

4.2.attr()方法

Html代码：

`<!DOCTYPE html> <html> <head> <script src="jquery-3.0.0.min.js"></script> </head> <body> <div data-my-age='24' id='zg' age='23'>123</div> <script> var age = $("#zg").attr("data-my-age"); alert(age); $("#zg").attr("data-my-age",44); age = $("#zg").attr("data-my-age"); alert(age); </script> </body> </html>`

结果：