本节书摘来异步社区《移动网页设计与开发 HTML5+CSS3+JavaScript》一书中的第2章，第2.7节，作者：【英】Peter Gasston，更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.7 数据属性
HTML5扩展元素含义还可以通过另一种方式：使用数据属性。这些都是用户定义的属性，这些属性的值能提供元素的相关信息，而无需给予机器或人类任何额外的语义。接下来，让我们看看更详细的解释。
假设我们想输出一组数据，其中每一项都有两个值—名称和编号 （例如，独特的数据库ID）；我们想将名称显示在文档中，还想让编号可以用于脚本运行中。从目前情况来看，没有相关的属性可以用来存储该信息；我们可能不得不使用这样一个类：
创建数据属性的目的，就是为了将数据相关联。数据属性能像类一样，让你存储这些额外的信息，而不暗含任何额外的意思。每个数据属性开始使用文字数据，然后使用用户定义的唯一键。在我们的示例中，可以使用这个：
现在，数据属性id与Peter的值关联。虽然该属性没有给元素额外的语义，但是可以为其他进程提供上下文，有关此数据的信息或许和JSON文件相关联，所以，可以使用JavaScript来查询。
2.7.1 数据属性API
使用数据集（dataset）属性的简单DOM API，脚本可以更加容易地获取该数据。若要获取一个数据属性的值，可以将数据值属性和正在查询的属性的键一起使用：
当我们把它应用于此示例的标记中，返回的结果将是123。我们还可以使用数据集更新属性值：
以下示例，演示了它是怎么起作用的：
在此示例中，我们执行了三个操作：首先获取id数据，然后将其设置为100，最后再次获取它。每一次都要把结果登录到控制台。输出结果如图2-5所示。
2.7.2 jQuery和数据属性
如果使用jQuery，与数据属性的互动甚至会变得更简单（如果读者还不知道什么是jQuery，则可以先翻阅第5章中的解释，读完它之后再回到这一节）。下面的例子是使用data()方法获取和设置的数据值：
此代码类似于前一节所示的代码，将返回相同的值：123。
然而，不同于数据集以一个字符串的形式返回所有的结果，data()类函数有一大优势：它还要对属性的值进行解析，并将它转换为正确的类型。如果使用前面的示例，该类型会是一个数字。但如果把标记更改为：
再次使用data()类函数：
变量name的值是Peter，其类型是一个字符串。
若想看看它是怎么运行的，可以参考示例文件data-attributes-jquery .html.。在该示例文件中，我使用同一标记把两个不同的数据属性相结合：
再使用jQuery，把每个数据属性的类型用JavaScript的typeof运算符登录到控制台中：
图2-6显示了输出结果。
2.7.3 野生数据属性
数据属性如此有用，以至于一些公司已经开始广泛使用它们。Twitter很快就把它们用作一个在网页上添加Twitter按钮的选项，把某些内容相关的参数存储在一组预定义的属性里：
通过在网页上的其他位置包含一个对Twitter的JavaScript的调用，此元素被一个使用所提供数据的Tweet按钮所替换。很多其他的社会服务，如Facebook、Google+和LinkedIn，也采取相同的方式使用数据属性。
