返回值:jQuerydata(key, value)

在匹配的元素上随心所欲的存放数据。

.data() 方法允许我们安全地将任何类型的数据附加到DOM元素上而不用担心循环引用和内存泄露之类的问题。

在单个元素上设置几个独立的数据，并且以后还可以分别检索到：

$('body').data('foo', 52);
$('body').data('bar', { myType: 'test', count: 40 });

$('body').data('foo'); // 52
$('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }}

从 jQuery 1.4.3 起，通过 .data(obj) 给元素设置数据时，会在元素原先存放的数据上扩展。jQuery 本身也通过 .data() 方法存放信息，名为 'events' 和 'handle' ，并且保留的任何以下划线开头的数据名称，以供内部使用。

特别注意：从 jQuery 1.4 起到 jQuery 1.4.2 的几个版本中， .data(obj) 方法会完全替换掉元素上的所有数据，而不是扩展数据对象。如果你使用了第三方插件，那就不建议完全替换掉元素上的数据对象，因为插件也有可能在上面存放数据。

由于浏览器与插件和内部代码的交互方式，导致 .data() 方法无法在 <object> (除非他是一个Flash插件)， <applet> 或者 <embed> 元素上存放数据。

HTML 5 data- 属性

从 jQuery 1.4.3 起，HTML 5 data- 属性 中的数据会自动放入 jQuery 的数据对象中。

举例来说，如果提供如下的 HTML:

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

那么就可以通过下面的 jQuery 代码获得数据。下面的每个语句都是 true。

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

注意，这些字符串在用 .data() 获取时会自动转换成他们对应数据类型(包括布尔值、数字、对象、数组和 null )，而 HTML 代码中的字符串不会有任何的改变。另外，data- 属性只会在第一次用 .data() 方法获取数据的时候，从 HTML 代码中获取，并保存到 jQuery 内部对象中。在此之后，.data() 再也不会访问或修改 data- 属性里的东西了。

示例:

往div元素上存放再获取数据

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:blue; }
  span { color:red; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<div>
    The values stored were 
    <span></span>
    and
    <span></span>
  </div>

<script>


$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);


</script>
</body>
</html>
演示:

返回值:Objectdata(key)

返回jQuery对象集合中第一个元素上储存的数据，这个数据是先前用data(name, value)设定的。

.data() 方法允许我们安全地将任何类型的数据附加到DOM元素上而不用担心循环引用和内存泄露之类的问题。我们可以同时获取单一元素上几个独立的数据，或者整个一组： 

alert($('body').data('foo'));
alert($('body').data());

上面两行会显示先前设置在 body 元素上的数据。如果元素上没有设置过任何东西，则会返回 null 。

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

var mydata = $("#mydiv").data();
if ( mydata.count < 9 ) {
    mydata.count = 43;
    mydata.status = "embiggened";
}

示例:

获取存放在元素上，名为 "blah" 的数据。

<!DOCTYPE html>
<html>
<head>
<style>
  div { margin:5px; background:yellow; }
  button { margin:5px; font-size:14px; }
  p { margin:5px; color:blue; }
  span { color:red; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<div>A div</div>
  <button>Get "blah" from the div</button>
  <button>Set "blah" to "hello"</button>

  <button>Set "blah" to 86</button>
  <button>Remove "blah" from the div</button>
  <p>The "blah" value of this div is <span>?</span></p>

<script>


$("button").click(function(e) {
  var value;

  switch ($("button").index(this)) {
    case 0 :
      value = $("div").data("blah");
      break;
    case 1 :
      $("div").data("blah", "hello");
      value = "Stored!";
      break;
    case 2 :
      $("div").data("blah", 86);
      value = "Stored!";
      break;
    case 3 :
      $("div").removeData("blah");
      value = "Removed!";
      break;
  }

  $("span").text("" + value);
});



</script>
</body>
</html>
演示: