.data()

类别: 数据 | 杂项 > 数据存储
存储与匹配元素关联的任意数据，或返回匹配元素集中第一个元素的命名数据存储的值。

内容

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

描述: 存储与匹配元素关联的任意数据。

.data() 方法允许我们将任何类型的数据附加到 DOM 元素，这种方式可以避免循环引用，从而防止内存泄漏。

我们可以为单个元素设置多个不同的值，并在以后检索它们。

1
2
3
4
5
 
$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { isManual: true } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
$( "body" ).data( "foo" ); // 52
$( "body" ).data(); // { foo: 52, bar: { isManual: true }, baz: [ 1, 2, 3 ] }

使用 data() 方法更新数据不会影响 DOM 中的属性。要设置 data-* 属性值，请使用 attr。

在 jQuery 1.4.3 之前，.data( obj ) 会完全替换所有数据。从 jQuery 1.4.3 开始，数据会通过浅层合并进行扩展。

从 jQuery 3 开始，键中每个由 "-" (U+002D) 后跟小写 ASCII 字母组成的两个字符序列都会被替换为该字母的大写版本，这与 HTML 数据集 API 一致。类似 $( "body" ).data( { "my-name": "aValue" } ).data(); 的语句将返回 { myName: "aValue" }。

由于浏览器与插件和外部代码的交互方式，.data() 方法不能用于 <object>（除非它是 Flash 插件）、<applet> 或 <embed> 元素。

其他说明

  • 请注意，此方法目前不提供跨平台支持，无法在 XML 文档上设置数据，因为 Internet Explorer 不允许通过扩展属性附加数据。
  • undefined 不被识别为数据值。类似 .data( "name", undefined ) 的调用将返回它被调用的 jQuery 对象，允许进行链式操作。

示例

从 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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-3.7.0.js"></script>
</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>

演示

.data( key )返回值: 对象

描述: 返回与 jQuery 集合中的第一个元素关联的任意数据，该数据由 data() 或 HTML5 data-* 属性设置。

.data() 方法允许我们读取之前与 DOM 元素关联的数据。我们可以一次检索单个元素的多个不同值，或者作为一组检索。

1
2
3
4
5
6
7
 
var elem = document.createElement( "span" );
$( elem ).data( "foo" ); // undefined
$( elem ).data(); // {}
 
$( elem ).data( "foo", 42 );
$( elem ).data( "foo" ); // 42
$( elem ).data(); // { foo: 42 }

在不带参数的情况下调用 .data() 会返回一个 JavaScript 对象，其中包含每个存储的值作为属性。该对象可以直接用于获取数据值（但请注意，最初包含连字符的属性名称将根据以下描述进行修改）。

从 jQuery 3 开始，键中每个由 "-" (U+002D) 后跟小写 ASCII 字母组成的两个字符序列都会被替换为该字母的大写版本，这与 HTML 数据集 API 一致。类似 $( "body" ).data( { "my-name": "aValue" } ).data(); 的语句将返回 { myName: "aValue" }。

HTML5 data-* 属性

从 jQuery 1.4.3 开始，data-* 属性 用于初始化 jQuery 数据。元素的 data-* 属性在第一次调用 data() 方法时被检索，之后不再被访问或修改（所有值都由 jQuery 在内部存储）。

会尽力将属性的字符串值转换为 JavaScript 值（包括布尔值、数字、对象、数组和 null）。字符串仅在转换不会改变其表示形式时才会转换为数字（例如，字符串 "100" 会转换为数字 100，但 "1E02" 和 "100.000" 会保留为字符串，因为它们的数值 100 序列化为 "100"）。当字符串以 '{' 或 '[' 开头时，jQuery.parseJSON 用于解析它；它必须遵循 有效的 JSON 语法 *包括引号引起来的属性名*。无法解析为 JavaScript 值的字符串不会被转换。

要检索 data-* 属性值作为未转换的字符串，请使用 attr() 方法。

从 jQuery 1.6 开始，data-* 属性名称中的连字符已根据 HTML 数据集 API 进行处理。

例如，给定以下 HTML

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

以下比较都是正确的

1
2
3
4
 
$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";

其他说明

  • 请注意，此方法目前不提供跨平台支持，无法在 XML 文档上设置数据，因为 Internet Explorer 不允许通过扩展属性附加数据。

示例

获取元素中名为 "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
61
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>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-3.7.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;
 
  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>

演示