发布于：使用 jQuery 核心

数据方法（Data Methods）

你经常会希望将有关元素的数据与元素本身一起存储。在纯 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() 传递单个键值对来存储数据外，你还可以传递一个包含一个或多个对的对象。