當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

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()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。