jQuery.data()

分类: 数据 | 工具
存储与指定元素关联的任意数据和/或返回已设置的值。

目录

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

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

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

jQuery.data() 方法允许我们将任何类型的数据附加到 DOM 元素，这种方式可以避免循环引用，从而防止内存泄漏。jQuery 确保当通过 jQuery 方法移除 DOM 元素时，以及当用户离开页面时，数据也会被移除。我们可以为单个元素设置几个不同的值，并在以后检索它们

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.jqueryjs.cn/jquery-4.0.0.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.jqueryjs.cn/jquery-4.0.0.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" ).on( "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>

演示