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

在指定的元素上随心所欲的存放数据。

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

jQuery.data() 方法允许我们安全地将任何类型的数据附加到DOM元素上而不用担心循环引用和内存泄露之类的问题。我们在单个元素上设置几个独立的数据，并且以后还可以分别检索到： 

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

示例:

在一个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() 更方便。

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

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

上面两行中alert的数据都是先前给 body 设置的。如果先前没有设置过，则返回一个空字符串。

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

HTML 5 data- 属性

从 jQuery 1.4.3 起，HTML 5 data- 属性 中的数据会自动添加进 jQuery 的 data 对象

例如下面的 HTML:

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

如下所有的 jQuery 代码都可以正常使用。

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

Note that strings are left intact while JavaScript values are converted to their associated value (this includes booleans, numbers, objects, arrays, and null). When the data attribute is an object (starts with '{') or array (starts with '[') then jQuery.parseJSON is used to parse the string; it must follow valid JSON syntax including quoted property names. The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

示例:

获取存放在元素上名叫 "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>
演示: