JQuery官方学习资料,译:Data方法

你可能经常会想需要通过元素来存储一些数据。在JavaScript中你可能需要给元素添加属性来实现这样的功能,但是在某些浏览器中,你可能还需要处理因此造成的内存泄露问题。JQuery提供了一个简单的方法来存储数据到元素中和检索元素中存储的数据,并且为你解决相关的内存泄露问题。

// 通过元素来存储和检索数据

$( "#myDiv" ).data( "keyName", { foo: "bar" } );

$( "#myDiv" ).data( "keyName" ); // 返回 { foo: "bar" }

任何类型的数据都可以被存储在元素中,例如.data()可以用来存储其他元素的引用。

你可能想建立一个列表项和其内部Div之间的关系,这样的关系可能会在每一次列表项变动的时候被建立,当然最好还是能够一次建立这样的关系,因此我们可以使用.data()方法将指向Div的引用存储在列表项中。

// 使用.data()来存储和检索2个元素之间的关系

$( "#myList li" ).each(function() {

var $li = $( this );

var $div = $li.find( "div.content" );

$li.data( "contentDiv", $div );

});

// 以后我们不需要重新去寻找Div

// 我们可以从列表项的data中读取到它

var $firstLi = $( "#myList li:first" );

$firstLi.data( "contentDiv" ).html( "new content" );

除了使用单一的键值对存储数据外,还可以传递一个对象来存储,这个对象可以包含一个或多个键值对。