jQuery.data()

Contents:

jQuery.data( element, key, value ) 返回: jQuery

描述: 在匹配远上绑定任意相关数据。

  • version added: 1.2.3jQuery.data( element, key, value )

    element要关联数据的DOM对象

    key存储的数据名

    value新数据值

注意这是一个底层的方法,你应该用.data()代替。

jQuery.data() 方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。 jQuery ensures that the data is removed when DOM elements are removed via jQuery methods, and when the user leaves the page. 我们可以在一个元素上设置不同的值,并获取这些值:

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

注意:

  • 注意这个方法目前并不提供在XML文档上跨平台设置,作为Internet Explorer不允许通过自定义属性附加数据。

例子:

Store then retrieve a value from the div element.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.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>

Demo:

jQuery.data( element, key ) 返回: Object

描述: 返回元素上储存的相应名字的数据,可以用data(name, value)来设定。

  • version added: 1.2.3jQuery.data( element, key )

    element要关联数据的DOM对象

    key存储的数据名

  • version added: 1.4jQuery.data( element )

    element要关联数据的DOM对象

注意这是一个底层的方法,你应该用.data()代替。

.data()方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。我们可以在一个元素上设置不同的值,并获取这些值:

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

上面几行代码alert body元素上设置的值。若果没有设置任何值,那么将返回null。

调用没有参数的jQuery.data(element)时将获取一个作为JavaScript对象的所有值。jQuery内部自身使用这个方法来绑定数据,如事件处理器,所以不要以为这只包含数据储存你的代码。

HTML 5 data- 属性

直jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。

举个例子, 给定下面的HTML:

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

All of the following jQuery code will work.

$("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). 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).

注意:

  • 注意这个方法目前并不提供在XML文档上跨平台设置,作为Internet Explorer不允许通过自定义属性附加数据。

例子:

Get the data named "blah" stored at for an element.

<!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="http://code.jquery.com/jquery-latest.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>

Demo:

设计酷,jquery1.6 api中文手册