发布在：使用 jQuery Core

数据方法

通常，您希望将有关元素的数据存储在元素中。在纯 JavaScript 中，您可以通过向 DOM 元素添加属性来实现此目的，但在某些浏览器中，您必须处理内存泄漏。jQuery 提供了一种直接的方式来存储与元素相关的数据，并且它会为您管理内存问题。

1
2
3
4
5
 
// Storing and retrieving data related to an element.
 
$( "#myDiv" ).data( "keyName", { foo: "bar" } );
 
$( "#myDiv" ).data( "keyName" ); // Returns { foo: "bar" }

任何类型的数据都可以存储在元素中。为了本文的目的，.data() 将用于存储对其他元素的引用。

例如，您可能希望在列表项与其内部的 <div> 之间建立关系。每当触及列表项时，都可以建立这种关系，但更好的解决方案是建立一次关系，然后使用 .data() 在列表项上存储对 <div> 的指针。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
// Storing a relationship between elements using .data()
 
$( "#myList li" ).each(function() {
 
    var li = $( this );
    var div = li.find( "div.content" );
 
    li.data( "contentDiv", div );
 
});
 
// Later, we don't have to find the div again;
// we can just read it from the list item's data
var firstLi = $( "#myList li:first" );
 
firstLi.data( "contentDiv" ).html( "new content" );

除了向 .data() 传递一个用于存储数据的键值对之外，您还可以传递一个包含一个或多个对的对象。