.data()
.data( key, value ) 返回： jQuery
描述： 在匹配远上绑定任意相关数据。
-
version added: 1.2.3.data( key, value )
key存储的数据名
value新数据值；它可以是任意的Javascript数据类型，包括Array 或者 Object。
-
version added: 1.4.3.data( obj )
obj一个用于设置数据的键/值对
.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'名字储存信息，并且存储任意用下划线('_')开头的数据名供内部使用。
在jQuery1.4.3前(从jQuery 1.4开始).data()方法完全取代所有的数据,代替刚要扩展的数据对象。如果你正在使用第三方插件完全替代元素的数据对象也许是不明智的，因为插件也有可能设置数据。
由于浏览器用插件和外部代码相互作用,.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 代码都能运行。
$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";
注意当JavaScript值转化为和他相关值(包括 booleans, numbers, objects, arrays, 和 null)的时候， 这些字符串原封不动。这个data-属性是在第一次使用这个数据属性,然后不再存取或改变（所有的数据值都在jQuery内部存储）。
注意:
- 注意这个方法目前并不提供在XML文档上跨平台设置，作为Internet Explorer不允许通过自定义属性附加数据。
例子：
从div元素储存然后找回一个值。
<!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
描述 返回元素上储存的相应名字的数据，可以用data(name, value)来设定。
.data()方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。我们可以在一个元素上设置不同的值，并获取这些值：
alert($('body').data('foo'));
alert($('body').data());
上面几行代码alert body元素上设置的值。若果没有设置任何值，那么将返回null。
调用没有参数的.data()时将获取一个作为JavaScript对象的所有值。这个对象可以安全地缓存为一个长期变量,只要不用.data(obj)设置一个新的对象。使用这个对象直接获取或者设置值比单独的调用 .data()去获取或者设置值更快：
var mydata = $("#mydiv").data();
if ( mydata.count < 9 ) {
mydata.count = 43;
mydata.status = "embiggened";
}
注意：
- 注意这个方法目前并不提供在XML文档上跨平台设置，作为Internet Explorer不允许通过自定义属性附加数据。
例子：
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>