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()的一个独立的键值对来存储数据，你也可以传递一个对象来包含一个或者更多的键值对。

原文地址