我渴望能见你一面，
但请你记得，
我不会开口要求见你。
这不是因为骄傲，
你知道我在你面前毫无骄傲可言，
而是因为，
唯有你也想见我的时候，
我们见面才有意义。
————《越洋情书》
作用
使用 data-* 属性来嵌入自定义数据，用于储存私有的自定义数据，可以让我们在所有html元素上增加自定义data属性，存储的data属性能被JavaScript调用。
HTML 5 之前，需要使用其他的数据时，是非常糟糕的。为了使一切正常有效，你不得不将数据填充到 rel 或 class 属性。 有些开发者，甚至创建自己的自定义属性。 自从 HTML5 自定义 data 属性出现，你可以存储任意数据，通过一种简单，符合标准的方式。
使用规则
- 本质：一个保存数据的自定义属性
- 用法： data-作为前缀，后面跟着描述性的单词（只允许小写字母和连字符-）
- 一个元素可以有任意多个data属性
- 属性值不能是对象类型，如果真的想要保存对象，可通过对象序列化
- dataset API的要求：>IE10
- 语法：
<element data-*="somevalue">
获取和设置data-*属性
实例如下：
<article
id="foods"
data-name="apple"
data-sum-num="10"
data-parent="fruit"
>
</article>
JavaScript获取方式
通过js有两种方式:
- getAttribute
var article = document.querySelector("#foods");
// 一般方式读取和修改值
article.getAttribute("data-name");
article.setAttribute("data-name","orange");
- dataset
HTML5 有一个用于与这类型数据的 API，不过IE10 和 低于IE10 并没有完全支持这一特性。 让我们看看如何使用 dataset API 来设置 data 属性的：
// dataset API读取属性值
article.dataset.name // 获取name值
article.dataset.sumNum //连字符变成驼峰式
article.dataset.parent
// dataset API设置属性值
article.dataset.name = "banana" // 将名称设置为banana
在使用dataset时，这里没有 data - 前缀或破折号。 你将必须使用驼峰命名法。例如 HTML 使用 data-some-attribute-name，而 JavaScript 中是 dataset.someAttributeName
jQuery获取方式
$("#foods").attr("data-name")
$("#foods").data("name")
$("#foods").data("sumNum")
$("#foods").data("parent")
CSS获取方式
// 获取值
article::before{
content: attr(data-name);
}
// 改变值
article[data-name="apple"]{
width="100px;"
}
article[data-name="banana"]{
width="100px;"
}
