概述 .data( key, value )
返回值:jQuery
描述:在匹配元素上存储任意相关数据.
.data()
方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。
我们可以在一个元素上设置不同的值,之后获取这些值:
$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
在 jQuery 1.4.3 用.data(obj)
设置一个元素的数据对象可以扩充元素上原先存储数据。jQuery 自身也通过
.data()
方法,使用用'events' 和 'handle'名字储存信息,并且存储任意用下划线('_')开头的数据名供内部使用。(手册网注:官方文档中已经删除)
在jQuery1.4.3前(从jQuery 1.4开始).data()
方法完全取代所有的数据,而不是仅仅扩展原有的数据对象。如果你正在使用第三方插件,完全替代元素的数据对象也许是不可取的,因为插件也有可能设置数据。
jQuery 3改变了此方法的行为,将其调整为Dataset API specifications(数据集 API 规范)。具体来说,jQuery 3 根据 the algorithm of the Dataset API(数据集API的算法) 将使用连字符"-" (U+002D)连接的两个小写ASCII码字符转化为驼峰命名规则。例如 $( "body" ).data( { "my-name": "aValue" } ).data();
,这些写将返回 { myName: "aValue" }
。
由于浏览器用插件和外部代码相互作用,.data()
方法不能在<object>
(除非是Flash插件),<applet>
或 <embed>
元素上使用。
undefined
不是认可的数据值。比如这样调用.data( "name", undefined )
,将返回 "name
"对应的数据, 也就是等同于调用.data( "name" )
。
示例
从div元素储存然后找回一个值。
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.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>
概述 .data( key )
返回值:Object
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。 通过.data(name, value)或HTML5 data-* 属性设置
.data()
方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。我们可以在一个元素上设置不同的值,并获取这些值:
alert($('body').data('foo'));
alert($('body').data());
上面两行会显示先前设置在 body
元素上设置的值。若果那个元素上没有设置任何值,那么将返回undefined
。
alert( $("body").data("foo")); //undefined
$("body").data("bar", "foobar");
alert( $("body").data("bar")); //foobar
jQuery 3改变了此方法的行为,将其调整为Dataset API specifications(数据集 API 规范)。具体来说,jQuery 3 根据 the algorithm of the Dataset API(数据集API的算法) 将使用连字符"-" (U+002D)连接的两个小写ASCII码字符转化为驼峰命名规则。例如 $( "body" ).data( { "my-name": "aValue" } ).data();
,这些写将返回 { myName: "aValue" }
。
从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。嵌入式破折号处理属性( attributes)的方式在 jQuery 1.6 中已经改变,以使之符合W3C HTML5 规范.
举个示例, 给定下面的HTML:
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
下面所有的 jQuery 代码都能运行。
$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";
以上代码的第二条语句正确是表述了该元素的data-last-value
属性。
如果没有传递key参数的数据存储,
jQuery将在元素的属性中搜索,
将驼峰式字符串转化为中横线字符串,然后在结果前面加上data-
。
所以,该字符串lastValue
将被转换为data-last-value
。
每次尝试将字符串转换为一个JavaScript值(包括布尔值(booleans),数字(numbers),对象(objects),数组(arrays)和空(null))。如果这样做不会改变值的表示,那么该值将转换为一个数字(number)。例如,“1E02”和“100.000”是等同于数字(数字值100),但将转换它们会改变他们的表示,所以他们被保留为字符串。字符串值“100”被转换为数字100。
如果数据(data)属性是一个对象(以“{”开始)或数组(以'['开始),可以用jQuery.parseJSON
将其解析成字符串;它必须遵循有效的JSON的语法,包括带双引号的属性名称。如果该值不能解析为一个JavaScript值,它将被保留为字符串。
如果不想将取出的属性值直接当作字符串的话,请使用attr()
方法。
data-属性是在第一次使用这个数据属性后不再存取或改变(所有的数据值都在jQuery内部存储)。
调用 .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="http://code.jquery.com/jquery-latest.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>