jQuery入门：Data方法

经常会有关于某个元素的数据你想用这个元素来存储的情况。在原生的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()

的一个独立的键值对来存储数据，你也可以传递一个对象来包含一个或者更多的键值对。

原文地址