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

Returns: jQueryjQuery .data( Object obj )

描述: 用匹配的元素存储任意数据。
  • version added: 1.2.3
  • .data( String key, Object value )
  • key 字符串,数据键,命名设置的数据块。
    value 任意的Javascript数据类型包括数组和对象,新的数据值。
  • version added: 1.4.3
  • .data( Object obj )
  • obj 用于更新数据的键-值对象。

.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'的信息,并以下划线开头来储备任何数据名称作为内部使用。 setting an element's data object with .data(obj) extends the data previously stored with that element. jQuery itself uses the .data() method to save information under the names 'events' and 'handle', and also reserves any data name starting with an underscore ('_') for internal use.

在jQuery 1.4.3之前(开始于jQuery 1.4).data()方法完全替换所有数据而不是扩展数据对象。 如果你用第三方插件,完全替换元素的数据对象不是明智的,因为插件也可能设置数据。

基于浏览器同插件和外部代码交互的方式,.data() 方法不能用于<object> (除非是Flash插件), <applet><embed> 元素。

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>$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);</script>
</body>
</html>

Demo:

Returns: ObjectObject .data( )

描述:返回 Returns value at named data store for the first element in the jQuery collection, as set by data(name, value).
  • version added: 1.2.3
  • .data( String key )
  • key 存储数据的键名。
  • version added: 1.4
  • .data( )

我们可以从一个单一的元素一次性地取回多个不同的值:

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- Attributes

就跟 jQuery 1.4.3一样 HTML 5 data- attributes将自动压入jQuery data 对象。

例如,下面一段HTML:

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

下面的jQuery代码是可执行的。

$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";
var mydata = $("#mydiv").data();
if ( mydata.count < 9 ) {
    mydata.count = 43;
    mydata.status = "embiggened";
}

Examples:

Example:

Get the data named "blah" stored at for an element.
<!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;

  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>

Demo: