当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .data()用法及代码示例


存储与匹配元素关联的任意数据，或在命名数据存储中返回匹配元素集中第一个元素的值。

用法一

.data( key, value ) => jQuery

说明：存储与匹配元素关联的任意数据。

  • 添加的版本：1.2.3.data( key, value )

    • key
      类型：String
      一个字符串，命名要设置的数据。
    • value
      类型：Anything
      新的数据值；这可以是除 undefined 之外的任何 Javascript 类型。

  • 添加的版本：1.4.3.data( obj )

    • obj
      类型：Object
      要更新的数据键值对对象。

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

我们可以为单个元素设置几个不同的值并稍后检索它们：

$( "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, 每个 two-character 序列的 "-" (U+002D) 后跟一个小写 ASCII 字母的键被替换为字母的大写版本，与HTML 数据集 API.像这样的声明$( "body" ).data( { "my-name": "aValue" } ).data();将返回{ myName: "aValue" }.

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

其他注意事项：

  • 请注意，此方法当前不提供cross-platform 支持在 XML 文档上设置数据，因为 Internet Explorer 不允许通过 expando 属性附加数据。
  • undefined 未被识别为数据值。 .data( "name", undefined ) 之类的调用将返回调用它的 jQuery 对象，从而允许链接。

例子：

存储然后从 div 元素中检索一个值。

<!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.jquery.com/jquery-3.5.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-*属性。

  • 添加的版本：1.2.3.data( key )

    • key
      类型：String
      存储的数据的名称。

  • 添加的版本：1.4.data()

    • 此签名不接受任何参数。

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

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, 每个 two-character 序列的 "-" (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解析；它必须遵循 valid JSON syntax including quoted property names 。无法解析为 JavaScript 值的字符串不会被转换。

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

自 jQuery 1.6 起，data-* 属性名称中的破折号已按照 HTML dataset API 进行处理。

例如，给定以下 HTML：

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

以下比较均属实：

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

其他注意事项：

  • 请注意，此方法当前不提供cross-platform 支持在 XML 文档上设置数据，因为 Internet Explorer 不允许通过 expando 属性附加数据。

例子：

获取为元素存储的名为"blah" 的数据。

<!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.jquery.com/jquery-3.5.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" ).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>

演示：

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .data()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。