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

JQuery jQuery.data()用法及代碼示例


存儲與指定元素關聯的任意數據和/或返回設置的值。

用法一

jQuery.data( element, key, value ) => Object

說明：存儲與指定元素關聯的任意數據。返回設置的值。

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

    • element
      類型：Element
      與數據關聯的 DOM 元素。
    • key
      類型：String
      一個字符串，命名要設置的數據。
    • value
      類型：Anything
      新的數據值；這可以是除 undefined 之外的任何 Javascript 類型。

注意：這是一種低級方法；一個更方便的.data()也可用。

jQuery.data() 方法允許我們以一種安全的方式將任何類型的數據附加到 DOM 元素，從而避免循環引用，從而避免內存泄漏。 jQuery 確保在通過 jQuery 方法刪除 DOM 元素以及用戶離開頁麵時刪除數據。我們可以為單個元素設置幾個不同的值並稍後檢索它們：

jQuery.data( document.body, "foo", 52 );
jQuery.data( document.body, "bar", "test" );

其他注意事項：

  • 請注意，此方法當前不提供cross-platform 支持在 XML 文檔上設置數據，因為 Internet Explorer 不允許通過 expando 屬性附加數據。
  • undefined 未被識別為數據值。 jQuery.data( el, "name", undefined ) 等調用將返回 "name" 的相應數據，因此與 jQuery.data( el, "name" ) 相同。

例子：

存儲然後從 div 元素中檢索一個值。

<!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.jquery.com/jquery-3.5.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)，或元素的完整數據存儲。

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

    • element
      類型：Element
      要查詢數據的 DOM 元素。
    • key
      類型：String
      存儲的數據的名稱。

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

    • element
      類型：Element
      要查詢數據的 DOM 元素。

注意：這是一種低級方法；一個更方便的.data()也可用。

關於 HTML5 data-* 屬性：此低級方法不檢索data-*屬性除非更方便.data()方法已經檢索到它們。

jQuery.data() 方法允許我們以一種安全的方式將任何類型的數據附加到 DOM 元素，從而避免循環引用，從而避免內存泄漏。我們可以一次檢索單個元素的多個不同值，也可以作為一組檢索：

alert( jQuery.data( document.body, "foo" ) );
alert( jQuery.data( document.body ) );

上麵的行提醒在body 元素上設置的數據值。如果該元素上沒有設置任何內容，則返回一個空字符串。

調用 jQuery.data( element ) 將所有元素的關聯值作為 JavaScript 對象檢索。請注意，jQuery 本身使用此方法存儲數據以供內部使用，例如事件處理程序，因此不要假設它僅包含您自己的代碼存儲的數據。

Note: 此方法當前不提供cross-platform 支持在 XML 文檔上設置數據，因為 Internet Explorer 不允許通過擴展屬性附加數據。

例子：

獲取為元素存儲的名為"blah" 的數據。

<!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.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,
    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>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 jQuery.data()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。