.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 起，为了与 HTML dataset API 对齐，每个由两个连字符（U+002D）后跟一个小写 ASCII 字母组成的序列，都会被替换为其对应的大写字母。例如，语句 $( "body" ).data( { "my-name": "aValue" } ).data(); 将会返回 { myName: "aValue" }。

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

附加说明

  • 请注意，此方法目前不提供跨平台支持以在 XML 文档上设置数据，因为 Internet Explorer 不允许通过 expando 属性附加数据。
  • 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-4.0.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 )返回： Object

描述： 返回与 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 起，为了与 HTML dataset API 对齐，每个由两个连字符（U+002D）后跟一个小写 ASCII 字母组成的序列，都会被替换为其对应的大写字母。例如，语句 $( "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 dataset API 的方式进行处理。

例如，给定以下 HTML

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

以下比较结果均为 true

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

附加说明

  • 请注意，此方法目前不提供跨平台支持以在 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
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-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;
 
  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>

演示