经常会有关于某个元素的数据你想用这个元素来存储的情况。在原生的JavaScript中,你可能会用增加DOM元素属性的方法来做这件事,但你不得不去处理一些浏览器的内存泄漏。jQuery提供了一种直接的途径来存储与一个元素相关的数据,并且它为你管理内存问题。
// 存储和取出关联到元素的数据
$( "#myDiv" ).data( "keyName", { foo: "bar" } );
$( "#myDiv" ).data( "keyName" ); // Returns { foo: "bar" }
任意种类的数据都可能被存储到一个元素中。本文的目的,.data()
将被用来存储其他元素的引用。
比如,你可能想要创建一个列表项和它内部的<div>
之间的关联。这个关联能够在每一次接触到列表项时单独创建,但更好的方案是一次性创建这个关联,然后用.data()
存储一个指向这个<div>
的指针:
// 用.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;
// 稍后,不必再次查找div;
// we can just read it from the list item's data
// 我们能够通过列表项的data来读取
var firstLi = $( "#myList li:first" );
firstLi.data( "contentDiv" ).html( "new content" );
除了传递.data()
的一个独立的键值对来存储数据,你也可以传递一个对象来包含一个或者更多的键值对。