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()的一個獨立的鍵值對來存儲數據，你也可以傳遞一個對象來包含一個或者更多的鍵值對。

原文地址