JQuery中元素的數據存儲

html5 dataset是新的HTML5標準,允許你在普通的元素標籤裏嵌入類似data-*的屬性,來實現一些簡單數據的存取。它的數量不受限制,並且也能由JavaScript動態修改,也支持CSS選擇器進行樣式設置。這使得data屬性特別靈活,也非常強大。有了這樣的屬性我們能夠更加有序直觀的進行數據預設或存儲。那麼在不支持HTML5標準的瀏覽器中,我們如何實現數據存取呢?  

jQuery就提供了一個.data()的方法來處理這個問題

使用jQuery初學者一般不是很關心data方式,這個方法是jquery內部預用的,可以用來做性能優化,比如sizzle選擇中可以用來緩存部分結果集等等。當然這個也是非常重要的一個API了,常常用於我們存放臨時的一些數據,因爲它是直接跟DOM元素對象綁定在一起的

jQuery提供的存儲接口
jQuery.data( element, key, value ) //靜態接口,存數據
jQuery.data( element, key ) //靜態接口,取數據
.data( key, value ) //實例接口,存數據
.data( key ) //實例接口,存數據

2個方法在使用上存取都是通一個接口,傳遞元素,鍵值數據。在jQuery的官方文檔中,建議用.data()方法來代替。

我們把DOM可以看作一個對象,那麼我們往對象上是可以存在基本類型,引用類型的數據的,但是這裏會引發一個問題,可能會存在循環引用的內存泄漏風險。

通過jQuery提供的數據接口,就很好的處理了這個問題了,我們不需要關心它底層是如何實現,只需要按照對應的data方法使用就行了。

同樣的也提供2個對應的刪除接口,使用上與data方法其實是一致的,只不過是一個是增加一個是刪除罷了
jQuery.removeData( element [, name ] )
.removeData( [name ] )

參考下面邊代碼區域,2個代碼段分別描述了靜態與實例data的使用

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left,
    .right {
        width: 300px;
        height: 120px;
    }

    .left div,
    .right div {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }

    .left div {
        background: #bbffaa;
    }

    .right div {
        background: yellow;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>jQuery.data()靜態方法</h2>
    <div class="left">
        <div class="aaron">
            <p>點擊看結果</p>
            <p>jQuery.data</p>
        </div>
        <div><span></span></div>
    </div>
    <h2>.data()實例方法</h2>
    <div class="right">
        <div class="aaron">
            <p>點擊看結果</p>
            <p>.data</p>
        </div>
        <div><span></span></div>
    </div>
    <script type="text/javascript">
    $('.left').click(function() {
        var ele = $(this);
        //通過$.data方式設置數據
        $.data(ele, "a", "data test")
        $.data(ele, "b", {
            name : "旅遊網"
        })
        //通過$.data方式取出數據
        var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
        ele.find('span').append(reset)
    })
    </script>
    <script type="text/javascript">
    $('.right').click(function() {
        var ele = $(this);
        //通過.data方式設置數據
        ele.data("a", "data test")
        ele.data("b", {
            name: "旅遊網"
        })
        //通過.data方式取出數據
        var reset = ele.data("a") + "</br>" + ele.data("b").name
        ele.find('span').append(reset)
    })
    </script>
</body>

</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章