jQuery.data()
jQuery.data( element, key, value ) 返回： jQuery
描述： 在匹配遠(yuǎn)上綁定任意相關(guān)數(shù)據(jù)。
-
version added: 1.2.3jQuery.data( element, key, value )
element要關(guān)聯(lián)數(shù)據(jù)的DOM對(duì)象
key存儲(chǔ)的數(shù)據(jù)名
value新數(shù)據(jù)值
注意這是一個(gè)底層的方法，你應(yīng)該用.data()代替。
jQuery.data() 方法允許我們?cè)贒OM元素上附加任意類型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險(xiǎn)。
jQuery ensures that the data is removed when DOM elements are removed via jQuery methods, and when the user leaves the page. 我們可以在一個(gè)元素上設(shè)置不同的值，并獲取這些值：
jQuery.data(document.body, 'foo', 52); jQuery.data(document.body, 'bar', 'test');
注意:
- 注意這個(gè)方法目前并不提供在XML文檔上跨平臺(tái)設(shè)置，作為Internet Explorer不允許通過自定義屬性附加數(shù)據(jù)。
例子：
Store then retrieve a value from the div element.
<!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>var div = $("div")[0];
jQuery.data(div, "test", { first: 16, last: "pizza!" });
$("span:first").text(jQuery.data(div, "test").first);
$("span:last").text(jQuery.data(div, "test").last);</script>
</body>
</html>Demo:
jQuery.data( element, key ) 返回： Object
描述： 返回元素上儲(chǔ)存的相應(yīng)名字的數(shù)據(jù)，可以用data(name, value)來(lái)設(shè)定。
-
version added: 1.2.3jQuery.data( element, key )
element要關(guān)聯(lián)數(shù)據(jù)的DOM對(duì)象
key存儲(chǔ)的數(shù)據(jù)名
-
version added: 1.4jQuery.data( element )
element要關(guān)聯(lián)數(shù)據(jù)的DOM對(duì)象
注意這是一個(gè)底層的方法，你應(yīng)該用.data()代替。
.data()方法允許我們?cè)贒OM元素上附加任意類型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險(xiǎn)。我們可以在一個(gè)元素上設(shè)置不同的值，并獲取這些值：
alert(jQuery.data( document.body, 'foo' )); alert(jQuery.data( document.body ));
上面幾行代碼alert body元素上設(shè)置的值。若果沒有設(shè)置任何值，那么將返回null。
調(diào)用沒有參數(shù)的jQuery.data(element)時(shí)將獲取一個(gè)作為JavaScript對(duì)象的所有值。jQuery內(nèi)部自身使用這個(gè)方法來(lái)綁定數(shù)據(jù)，如事件處理器，所以不要以為這只包含數(shù)據(jù)儲(chǔ)存你的代碼。
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>
All of the following jQuery code will work.
$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";
Note that strings are left intact while JavaScript values are converted to their associated value (this includes booleans, numbers, objects, arrays, and null). The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).
注意:
- 注意這個(gè)方法目前并不提供在XML文檔上跨平臺(tái)設(shè)置，作為Internet Explorer不允許通過自定義屬性附加數(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, div = $("div")[0];
switch ($("button").index(this)) {
case 0 :
value = jQuery.data(div, "blah");
break;
case 1 :
jQuery.data(div, "blah", "hello");
value = "Stored!";
break;
case 2 :
jQuery.data(div, "blah", 86);
value = "Stored!";
break;
case 3 :
jQuery.removeData(div, "blah");
value = "Removed!";
break;
}
$("span").text("" + value);
});
</script>
</body>
</html>