返回值: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 也保留任何以下划线开头的数据名称，以供内部使用。

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

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

补充说明:

  • 注意，目前该方法不具有跨平台性，因为 IE 不支持在 XML 文档中通过 expando 属性进行数据存储。

示例:

在 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 元素上的数据。如果该元素上没有设置过任何数据，那么会返回 undefined。 

alert( $("body").data("foo")); //undefined
$("body").data("bar", "foobar");
alert( $("body").data("bar")); //foobar

HTML 5 data-* 属性

从 jQuery 1.4.3 开始，HTML 5 data- 属性 会被自动放入到 jQuery 的 data 对象中。对这种内嵌破折号（即 “-”）的属性的处理方式，在 jQuery 1.6 中已经发生了改变，以符合 W3C HTML5 规范.

例如，有如下的 HTML:

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

那么就可以通过下面的 jQuery 代码来获得数据。下面每个表达式的值都是 true。

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

用 .data() 方法取出的值将会自动转换成对应的 JavaScript 类型（包括 boolean, number, object, array 和 null），若无法自动转换成上述类型，则将作为字符串类型。若想将取出的属性值直接当作字符串的话，请使用 attr() 方法。若取出的值是一个以字符串形式表示的对象，(以 '{' 开头) 或是一个数组 (以 '[' 开头)，那么 jQuery 将使用 jQuery.parseJSON 方法进行解析，但该字符串必须满足 有效的 JSON 语法 属性名使用引号包裹。另外，data- 属性只会在第一次用 .data() 方法获取数据的时候，从 HTML 代码中获取，并保存到 jQuery 内部对象中,之后 .data() 方法就不会再访问或修改 data- 属性的值了。

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

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

补充说明:

  • 注意，目前该方法不具有跨平台性，因为 IE 不支持在 XML 文档中通过 expando 属性进行数据存储。

示例:

获取存放在元素上的名为 "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>

演示: