历史背景：

jQuery从1.2.3版本引入数据缓存系统，主要的原因就是早期的事件系统引用的是一个叫 addEvent.js库。这个库帮助jQuery完善了事件系统但是同样也带来了一些问题。
没有一个系统的缓存机制，它把事件的回调都放到触发事件的目标对象，这样就导致了无法**防止循环引用，导致内存泄漏。**

早期数据缓存系统就是为事件系统服务而分化出来的，后面也成为了事件克隆、动画列队基础设施。

API

说明：存储与匹配元素关联的任意数据。
.data(key, value)

key Type: String 一个字符串，命名要设置的数据。 value Type: Anything 新数据值。

我们可以为单个元素设置几个不同的值，并在以后检索它们 示例代码：

  1. $( "body" ).data( "foo", 52 );
  2. $( "body" ).data( "bar", { isManual: true } );
  3. $( "body" ).data( { baz: [ 1, 2, 3 ] } );
  4. $( "body" ).data( "foo" ); // 52
  5. $( "body" ).data(); // { foo: 52, bar: { isManual: true }, baz: [ 1, 2, 3 ] }

使用data()方法更新数据不会影响DOM中的属性。要设置data-*属性值，请使用 .attr()。

注意：undefined不被识别为数据值。诸如之类的调用.data( “name”, undefined )将返回被调用的jQuery对象，从而允许链接。

.data(key)
说明：返回与jQuery集合中第一个元素相关联的任意数据，你可以由data(key, value) 或HTML5 data-*属性设置其值。

.data()
说明：不接受任何参数。

该.data()方法使我们能够读取以前与DOM元素关联的数据。我们可以一次或作为一组检索单个元素的多个不同值：

  1. var elem = document.createElement( "span" );
  2. $( elem ).data( "foo" ); // undefined
  3. $( elem ).data(); // {}
  5. $( elem ).data( "foo", 42 );
  6. $( elem ).data( "foo" ); // 42
  7. $( elem ).data(); // { foo: 42 }

从jQuery3.x开始，与HTML数据集API一致，键中的每两个字符序列”-“（U + 002D）后跟键中的小写ASCII字母均被字母的大写形式代替。
这样的语句$( “body” ).data( { “my-name”: “aValue” } ).data(); 将返回{ myName: “aValue” }。

HTML5 data-*属性

从jQuery 1.6开始，data-*属性名称中的破折号已根据HTML数据集API进行了处理。
例如，给定以下HTML：

  1. <div data-count=1 data-last-value="43" data-options='{"name":"John"}'></div>

如果你要去访问它们的话：

$( "div" ).data( "count" ) === 1;
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "options" ).name === "John";