jQuery.data()

標籤：

data()函數用於在當前jQuery對象所匹配的所有元素上存取資料。

 

參數	描述
key	可選/String類型指定的鍵名字串。
value	可選/任意類型需要儲存的任意類型的資料。
object	Object類型指定的對象，用於封裝多個索引值對，同時儲存多項資料。

執行個體一：

$("#btn1").click(function(){

      $("div").data("greeting", "Hello World");   //  向被選元素附加資料

});

$("#btn2").click(function(){

         alert($("div").data("greeting"));             //   擷取資料,擷取鍵為"greeting"的值，應該為Hello World

});

 

執行個體二：

  testObj=new Object();
  testObj.greetingMorn="Good Morning!";
  testObj.greetingEve="Good Evening!";

$("#btn1").click(function(){
    $("div").data(testObj);
  });

$("#btn2").click(function(){
    alert($("div").data("greetingEve"));        // 輸出"Good Evening!"
  });

 

執行個體三：

以下面這段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()