jQuery.data() 函數用法詳解

data()函數用於在目前jQuery物件所匹配的所有元素上存取資料。

透過data()函數存取的資料都是暫存數據，一旦頁面刷新，先前存放的資料都將不復存在。

此函數屬於jQuery物件(實例)。如果需要移除透過data()函數存放的數據，請使用removeData()函數。

語法

data()函數有以下兩種用法：

用法一：

jQueryObject.data( [ key [, value ] ])

以指定的鍵名key存取資料。如果指定了value參數，則表示以鍵名key存放值為value的資料；如果沒有指定value參數，則表示讀取先前以鍵名key存放的資料；如果沒有指定任何參數，則以物件形式傳回之前儲存的所有資料。

用法二：

jQueryObject.data( object )

以物件形式同時傳入任意多個key-value形式的數據，物件的每個屬性就是鍵名key，屬性值就是value。

注意：data()函數的所有"儲存資料"操作針對目前jQuery物件所匹配的每一個元素；所有"讀取資料"操作只針對第一個匹配的元素。

參數

請根據前面語法部分所定義的參數名稱尋找對應的參數。

參數 描述

key 可選/String類型指定的鍵名字串#。

value 可選/任意類型需要儲存的任意類型的資料。

object Object類別型指定的對象，用於封裝多個鍵值對，同時儲存多項資料。

傳回值

data()函數的傳回值是任意類型，傳回值的型別取決於目前data()函數執行的是"儲存資料"操作還是"讀取資料"操作。

如果data()函數執行的是"儲存資料"操作，則傳回目前jQuery物件本身；如果是"讀取資料"操作，則傳回讀取到的資料。

如果目前jQuery物件符合多個元素，讀取資料時，data()函數只以其中第一個符合的元素為準。

如果執行data(key)函數(僅傳入一個參數key)時找不到對應的數據，則傳回undefined。如果執行data()函數(不帶任何參數)時找不到對應的數據，則傳回一個空的物件(沒有任何屬性)。

範例&說明

以下面這段HTML程式碼為例：

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>

我們寫如下jQuery程式碼：

var $li = $("li");
// 同时向所有的li元素存储数据
$li.data("name", "CodePlayer");
$li.data("desc", "专注于编程开发技术分享");
$li.data("url", "http://www.365mini.com/");
var $n5 = $("#n5"); // 通过n4、n5、n6都可以读取数据
//  返回键值name所对应的数据
document.writeln( $n5.data("name") ); // CodePlayer
// 以对象形式返回所有的数据
var obj = $("#n6").data();
for(var i in obj){
    document.writeln( i + "=" + obj[i] + "<br>");   
}
/*输出：
name=CodePlayer
desc=专注于编程开发技术分享
url=http://www.365mini.com/
*/
//移除掉n4上存储的键名为name的数据
$("#n4").removeData("name");
// 虽然$li匹配3个li元素，但是读取数据只以第一个li元素n4为准，因此返回undefined
document.writeln( $li.data("name") ); // undefined
var object = { 
        name: "张三",
        age: 18,
        score: [87, 23, 56],
        options: { gender: "男", address: "水帘洞" }
    };
// 同时向所有的div元素以对象形式设置多个key-value数据
// value值可以是任意类型的数据，包括数组、对象等
$("div").data( object );
var $n2 = $("#n2"); // 通过n1、n2都可以读取数据
document.writeln( $n2.data("name") ); // 张三
document.writeln( $n2.data("score") ); // 87,23,56
document.writeln( $n2.data("options") ); // [object Object]

以上是jQuery.data() 函數用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！