data(key, value) 返回值:jQuery
在匹配的元素上隨心所欲的存放數據。
-
1.2.3 新增data(key, value)
key (String) 將要設置的數據片段名。value (Object) 新的數據值；可以是任何 Javascript 數據類型，包括數組和對象。 -
1.4.3 新增data(obj)
obj (Object) 用於設置的鍵值對。
.data() 方法允許我們安全地將任何類型的數據附加到DOM元素上而不用擔心循環引用和內存泄露之類的問題。
在單個元素上設置幾個獨立的數據，並且以后還可以分別檢索到：
$('body').data('foo', 52); $('body').data('bar', { myType: 'test', count: 40 }); $('body').data('foo'); // 52 $('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }}
從 jQuery 1.4.3 起，通過 .data(obj) 給元素設置數據時，會在元素原先存放的數據上擴展。jQuery 本身也通過 .data() 方法存放信息，名為 'events' 和 'handle' ，並且保留的任何以下划線開頭的數據名稱，以供內部使用。
特別注意：從 jQuery 1.4 起到 jQuery 1.4.2 的幾個版本中， .data(obj) 方法會完全替換掉元素上的所有數據，而不是擴展數據對象。如果你使用了第三方插件，那就不建議完全替換掉元素上的數據對象，因為插件也有可能在上面存放數據。
由於瀏覽器與插件和內部代碼的交互方式，導致 .data() 方法無法在 <object> (除非他是一個Flash插件)， <applet> 或者 <embed> 元素上存放數據。
HTML 5 data- 屬性
從 jQuery 1.4.3 起，HTML 5 data- 屬性 中的數據會自動放入 jQuery 的數據對象中。
舉例來說，如果提供如下的 HTML:
<div data-role="page" data-hidden="true" data-options='{"name":"John"}'></div>
那么就可以通過下面的 jQuery 代碼獲得數據。下面的每個語句都是 true。
$("div").data("role") === "page"; $("div").data("hidden") === true; $("div").data("options").name === "John";
注意，這些字符串在用 .data() 獲取時會自動轉換成他們對應數據類型(包括布爾值、數字、對象、數組和 null )，而 HTML 代碼中的字符串不會有任何的改變。另外，data- 屬性只會在第一次用 .data() 方法獲取數據的時候，從 HTML 代碼中獲取，並保存到 jQuery 內部對象中。在此之后，.data() 再也不會訪問或修改 data- 屬性里的東西了。
示例:
往div元素上存放再獲取數據
<!DOCTYPE html> <html> <head> <style> div { color:blue; } span { color:red; } </style> <script src="jquery.min.js"></script> </head> <body> <div> The values stored were <span></span> and <span></span> </div> <script> $("div").data("test", { first: 16, last: "pizza!" }); $("span:first").text($("div").data("test").first); $("span:last").text($("div").data("test").last); </script> </body> </html> 返回值:Objectdata(key)
返回jQuery對象集合中第一個元素上儲存的數據，這個數據是先前用data(name, value)設定的。
-
1.2.3 新增data(key)
key (String) 先前存放的數據名 -
1.4 新增data()
.data() 方法允許我們安全地將任何類型的數據附加到DOM元素上而不用擔心循環引用和內存泄露之類的問題。我們可以同時獲取單一元素上幾個獨立的數據，或者整個一組：
alert($('body').data('foo')); alert($('body').data());
上面兩行會顯示先前設置在 body 元素上的數據。如果元素上沒有設置過任何東西，則會返回 null 。
調用 .data() 時如果不帶參數，將會以 JavaScript 對象的形式獲取所有數據。這個對象可以安全的存放在變量中，因為一旦這個新對象被提取出來，之后對元素進行的 .data(obj) 操作，將無法再影響到這個對象了。另外，直接操作對象會比通過調用 .data()來設置或獲取值要快一些：
var mydata = $("#mydiv").data(); if ( mydata.count < 9 ) { mydata.count = 43; mydata.status = "embiggened"; }
示例:
獲取存放在元素上，名為 "blah" 的數據。
<!DOCTYPE html> <html> <head> <style> div { margin:5px; background:yellow; } button { margin:5px; font-size:14px; } p { margin:5px; color:blue; } span { color:red; } </style> <script src="jquery.min.js"></script> </head> <body> <div>A div</div> <button>Get "blah" from the div</button> <button>Set "blah" to "hello"</button> <button>Set "blah" to 86</button> <button>Remove "blah" from the div</button> <p>The "blah" value of this div is <span>?</span></p> <script> $("button").click(function(e) { var value; switch ($("button").index(this)) { case 0 : value = $("div").data("blah"); break; case 1 : $("div").data("blah", "hello"); value = "Stored!"; break; case 2 : $("div").data("blah", 86); value = "Stored!"; break; case 3 : $("div").removeData("blah"); value = "Removed!"; break; } $("span").text("" + value); }); </script> </body> </html> --------------------------------- 原文出自 http://shawphy.github.com/jquery-api/#data