.data()
.data( key, value ) 返回： jQuery
描述： 在匹配遠(yuǎn)上綁定任意相關(guān)數(shù)據(jù)。
-
version added: 1.2.3.data( key, value )
key存儲(chǔ)的數(shù)據(jù)名
value新數(shù)據(jù)值；它可以是任意的Javascript數(shù)據(jù)類(lèi)型，包括Array 或者 Object。
-
version added: 1.4.3.data( obj )
obj一個(gè)用于設(shè)置數(shù)據(jù)的鍵/值對(duì)
.data() 方法允許我們?cè)贒OM元素上附加任意類(lèi)型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險(xiǎn)。
我們可以在一個(gè)元素上設(shè)置不同的值，并獲取這些值：
$('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 這是一個(gè)元素的值對(duì)象用.data(obj)擴(kuò)充元素上原先存儲(chǔ)數(shù)據(jù)。jQuery 自身使用.data()方法用'events' 和 'handle'名字儲(chǔ)存信息，并且存儲(chǔ)任意用下劃線('_')開(kāi)頭的數(shù)據(jù)名供內(nèi)部使用。
在jQuery1.4.3前(從jQuery 1.4開(kāi)始).data()方法完全取代所有的數(shù)據(jù),代替剛要擴(kuò)展的數(shù)據(jù)對(duì)象。如果你正在使用第三方插件完全替代元素的數(shù)據(jù)對(duì)象也許是不明智的，因?yàn)椴寮灿锌赡茉O(shè)置數(shù)據(jù)。
由于瀏覽器用插件和外部代碼相互作用,.data()方法不能在<object>（除非是Flash插件），<applet> 或 <embed>元素上使用。
HTML 5 data- 屬性
直jQuery 1.4.3起， HTML 5 data- 屬性 將自動(dòng)被引用到j(luò)Query的數(shù)據(jù)對(duì)象中。
舉個(gè)例子, 給定下面的HTML:
<div data-role="page" data-hidden="true" data-options='{"name":"John"}'></div>
下面所有的 jQuery 代碼都能運(yùn)行。
$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";
注意當(dāng)JavaScript值轉(zhuǎn)化為和他相關(guān)值(包括 booleans, numbers, objects, arrays, 和 null)的時(shí)候， 這些字符串原封不動(dòng)。這個(gè)data-屬性是在第一次使用這個(gè)數(shù)據(jù)屬性,然后不再存取或改變（所有的數(shù)據(jù)值都在jQuery內(nèi)部存儲(chǔ)）。
注意:
- 注意這個(gè)方法目前并不提供在XML文檔上跨平臺(tái)設(shè)置，作為Internet Explorer不允許通過(guò)自定義屬性附加數(shù)據(jù)。
例子：
從div元素儲(chǔ)存然后找回一個(gè)值。
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.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>Demo:
.data( key ) 返回： Object
描述 返回元素上儲(chǔ)存的相應(yīng)名字的數(shù)據(jù)，可以用data(name, value)來(lái)設(shè)定。
.data()方法允許我們?cè)贒OM元素上附加任意類(lèi)型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險(xiǎn)。我們可以在一個(gè)元素上設(shè)置不同的值，并獲取這些值：
alert($('body').data('foo'));
alert($('body').data());
上面幾行代碼alert body元素上設(shè)置的值。若果沒(méi)有設(shè)置任何值，那么將返回null。
調(diào)用沒(méi)有參數(shù)的.data()時(shí)將獲取一個(gè)作為JavaScript對(duì)象的所有值。這個(gè)對(duì)象可以安全地緩存為一個(gè)長(zhǎng)期變量,只要不用.data(obj)設(shè)置一個(gè)新的對(duì)象。使用這個(gè)對(duì)象直接獲取或者設(shè)置值比單獨(dú)的調(diào)用 .data()去獲取或者設(shè)置值更快：
var mydata = $("#mydiv").data();
if ( mydata.count < 9 ) {
mydata.count = 43;
mydata.status = "embiggened";
}
注意：
- 注意這個(gè)方法目前并不提供在XML文檔上跨平臺(tái)設(shè)置，作為Internet Explorer不允許通過(guò)自定義屬性附加數(shù)據(jù)。
例子：
Get the data named "blah" stored at for an element.
<!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="http://code.jquery.com/jquery-latest.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>