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