返回值:ObjectjQuery.data(element, key, value)

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

注意: 这是一个底层方法，使用 .data() 更方便。

jQuery.data() 方法允许我们安全的将任何类型的数据附加到 DOM 元素上，而不用担心循环引用和内存泄露之类的问题。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时，jQuery 同时也会移除添加在上面的数据。我们可以在单个元素上设置几个独立的数据，并且以后还可以分别检索到它们： 

jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');

注意: 目前该方法不具有跨平台性，因为 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>

var div = $("div")[0];
    jQuery.data(div, "test", { first: 16, last: "pizza!" });
    $("span:first").text(jQuery.data(div, "test").first);
    $("span:last").text(jQuery.data(div, "test").last);

</script>
</body>
</html>

演示:

返回值:ObjectjQuery.data(element, key)

返回用 jQuery.data(element, name, value) 存放在元素上的指定数据，或者元素上的所有数据。

注意: 这是一个底层方法，使用 .data() 更方便。

关于 HTML5 data-* 属性: 这是一个底层方法，它不会返回 data-* 属性，除非 .data() 方法已经返回了它们。

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

alert(jQuery.data( document.body, 'foo' ));
alert(jQuery.data( document.body ));

上面两行代码的弹出对话框中的数据，都是先前用 body 设置的。如果先前没有设置过，则会返回一个空字符串。

调用 jQuery.data(element) 可以返回一个JavaScript对象，包含元素上所有存放的数据。注意，jQuery 本身也在内部使用这个方法存放数据，比如事件处理函数，所以返回的对象中也包含那些不是你自己代码存放的数据。

注意: 目前该方法不具有跨平台性，因为 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, div = $("div")[0];

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

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



</script>
</body>
</html>

演示: