jQuery.data()

类别：数据 | 实用工具
存储与指定的元素相关联的数据，或者返回已经设置的值。

内容：

jQuery.data( element, key, value )返回类型：Object

描述：存储与指定的元素相关联的任意数据。返回被设置的值。

注意：这是一个底层方法；一个更方便的.data()也是可用的。

jQuery.data()方法允许我们把任何类型的数据附加到DOM元素上，避免了循环引用以及内存泄漏风险。当通过jQuery方法删除DOM时，以及当用户离开网页时，jQuery确保数据也被删除了。我们可以在一个元素上设置不同的值，并获取这些值。

1
2
 
jQuery.data( document.body, "foo", 52 );
jQuery.data( document.body, "bar", "test" );

补充说明：

  • 请注意，此方法目前并不为XML文档上设置数据提供跨平台支持，因为Internet Explorer 并不允许通过expando属性附加数据。
  • undefined不能被识别为数据值。调用jQuery.data( el, "name", undefined )将为“name”返回对应的数据，因此它与jQuery.data( el, "name" )相同。

示例：

在<div>元素上存储数据，然后再检索它的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

演示：

jQuery.data( element, key )返回类型：Object

描述：针对元素，返回在命名的数据存储中的值，它是由jQuery.data(element, name, value)方法设置的，或者返回针对元素存储的完整数据。

注意：这是一个底层方法；一个更方便的.data()也是可用的。

照顾HTML5 data-* 特性：此底层方法并不检索data-*特性，除非更方便的.data()方法已经检索了它们。

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

1
2
 
alert( jQuery.data( document.body, "foo" ) );
alert( jQuery.data( document.body ) );

上面的代码行提醒了我们之前设置在body元素上的数据值。如果没有在元素上设置任何东西，就会返回一个空字符串。

调用jQuery.data( element )方法检索了所有元素的关联的值，作为一个JavaScript对象。请注意，jQuery本身使用此方法来存储数据，用于内部使用，譬如事件处理函数，所以不要以为它只包含你的代码已经存储的数据。

注意：此方法当前并不为XML文档上设置数据提供跨平台的支持，因为Internet Explorer 并不允许通过expando属性附加数据。

示例：

取得存储在一个元素上，命名为“blah”的数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.data demo</title>
  <style>
  div {
    margin: 5px;
    background: yellow;
  }
  button {
    margin: 5px;
    font-size: 14px;
  }
  p {
    margin: 5px;
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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() {
  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>

演示：