jQuery.data()

存储任意数据到指定的元素并且返回设置的值。

jQuery.data(element, key, value)
  • jQuery.data(element, key, value)
jQuery.data(element, key)
  • jQuery.data(element, key)
  • jQuery.data(element)

jQuery.data(element, key, value)

存储任意数据到指定的元素，返回设置的值。

jQuery.data(element, key, value)
  • element 类型: Element 。要存储数据的DOM对象
  • key 类型: String 。存储的数据名
  • value 类型: Object 。新数据值

注意： 这是一个底层的方法，你应该用 .data() 代替。

jQuery.data() 方法允许我们在DOM元素上附加任意类型的数据，避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时，jQuery 同时也会移除添加在上面的数据。我们可以在一个元素上设置不同的值，并获取这些值： 

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

Additional Notes（其他注意事项）:

  • 注意：这个方法目前并不提供在XML文档上跨平台设置，作为Internet Explorer不允许在XML文档中通过自定义属性附加数据。
  • undefined 是一个没有被识别数据值。调用如 jQuery.data(el,"name", undefined) 将返回对应的"name"数据，等价于 jQuery.data(el,"name") 。
  • .unload() 方法只是作为 .on("unload", handler) 的一个速记写法，移除该事件可以使用 .off("unload") 。

例子

在 div 元素上先存储再获取数据。 

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
  <script src="./static/js/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>
The values stored were and

jQuery.data(element, key)

返回用 jQuery.data(element, name, value) 储存在元素上的相应名字的数据，或者元素上完整的数据存储

jQuery.data(element, key)
  • element 类型: Element 。T要关联数据的DOM对象
  • key 类型: String 。存储的数据名

注意 这是一个底层的方法，你也可用更方便的 .data() 方法。

关于 HTML5 data-*属性: 这个低层次的方法不检索的 data-* 属性，除非 .data() 方法已经返回了它们。

jQuery.data() 方法允许我们在DOM元素上附加任意类型的数据，避免了循环引用的内存泄漏风险。我们可以在一个元素上设置不同的值，并获取这些值： 

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

上面几行代码alert body 元素上设置的值。若果先前没有设置任何值，那么将返回一个空字符串。

调用 jQuery.data(element) 时将获取一个JavaScript对象，它包含了元素上所有存储的数据。jQuery内部自身使用这个方法来绑定数据，如事件处理器，所以不要以为这对象只包含你的代码中储存的数据。

注意: 这个方法目前并不提供在XML文档上跨平台设置，作为Internet Explorer不允许XML 文档中通过自定义属性附加数据。

例子

获取存放在元素上名叫"blah"的数据。 

<!DOCTYPE html>
<html>
<head>
  <style>
div { margin:5px; background:yellow; }
button { margin:5px; font-size:14px; }
p { margin:5px; color:blue; }
span { color:red; }
  </style>
  <script src="./static/js/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(e) {
  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>
A div

The "blah" value of this div is ?

上篇： removeData()

下篇： jQuery.removeData()