jquery 手册
Ajax
属性(Attributes)
回调对象(Callbacks ..
核心(Core)
CSS
数据(Data)
延迟对象(Deferred o ..
尺寸(Dimensions)
效果(Effects)
事件(Events)
表单(Forms)
文档操作(Manipulati ..
杂项(Miscellaneou ..
位置(Offset)
插件编写(Plugin Aut ..
属性(Properties)
选择器(Selectors)
遍历(Traversing)
工具(Utilities)

Returns: ObjectObject jQuery.data( Element element, String key, Object value )

Description: 存储与指定元素相关的任意数据。返回设置的值。
  • version added: 1.2.3
  • jQuery.data( Element element, String key, Object value )
  • element DOM元素,与数据关联的DOM元素.
    key 一个字符串,用于命名设置的数据块。
    value 新的数据值。

注意: 这是一个低级别的方法;.data()方法更方便。

The jQuery.data() 方法允许我们附加任何类型的数据给DOM元素,这种方式是安全的而不会导致循环引用。 jQuery确保当DOM元素被移除时数据也被移除。我们可以为一个单一的元素设置多个不同的值并在稍后取回它们:

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

Note: 这个方法还不支持跨平台设置XML文档数据,就像IE不允许附加扩展属性数据。

Examples:

例子:

从一个div元素存储和取回一个值。
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>div { color:blue; }
  span { color:red; }</style>
</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>

Demo:

Returns: ObjectObject jQuery.data( Element element )

Description: Returns value at named data store for the element, as set by jQuery.data(element, name, value), or the full data store for the element.
  • version added: 1.2.3
  • jQuery.data( Element element, String key )
  • element 用于查询数据的DOM元素.
    key 数据存储的名字。
  • version added: 1.4
  • jQuery.data( Element element )
  • element 用于查询数据的DOM元素。

注意: 这是一个低级别的方法;.data()方法更方便。

关于 HTML5 data-* 属性: 这个低级别的方法不能取回 data-*属性值,除非.data() 方法已经将值取回。

The jQuery.data() 方法允许我们附加任何类型的数据给DOM元素,这种方式避免了循环引用,因此是安全的,不会导致内存泄漏。 我们可以一次从一个元素取回多个不同的值:

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

上面的代码alert设置在body元素上的数据值。如果未设置任何值, 将返回空字符串。

调用 jQuery.data(element)方法 取回所有元素关联的值,该值是一个JavaScript对象。 注意,jQuery本身使用这个方法存储数据,用作内部使用,比如时间处理程序, 所以不要假设它仅仅包含代码存储的值。

注意: 这个方法还不支持跨平台设置XML文档数据,就像IE不允许附加扩展属性数据。

Examples:

例子:

获取存储在一个元素中名字为"blah"的数据值。
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>div { margin:5px; background:yellow; }
button { margin:5px; font-size:14px; }
p { margin:5px; color:blue; }
span { color:red; }</style>
</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>

Demo: