jQuery.data()


html+div+css+天猫商城
html5+css3+京东手机网站
javascript+jquery+ajax
正则表达式+面向对象+js插件
2D+3D+触屏事件+Canvas+Svg
地理信息+本地存储+H5拖拽api
查看课程大纲
存储任意数据到指定的元素并且/或者返回设置的值。

Contents:

jQuery.data( element, key, value )返回: Object

描述: 存储任意数据到指定的元素,返回设置的值。

  • 添加的版本: 1.2.3jQuery.data( element, key, value )

    • element
      类型: Element
      要存储数据的DOM对象
    • key
      类型: String
      存储的数据名
    • value
      类型: Object
      新数据值

注意:这是一个底层的方法,你应该用.data()代替。

jQuery.data() 方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时,jQuery 同时也会移除添加在上面的数据。我们可以在一个元素上设置不同的值,并获取这些值:

1
2
jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');

Additional Notes(其他注意事项):

  • 注意:这个方法目前并不提供在XML文档上跨平台设置,作为Internet Explorer不允许在XML文档中通过自定义属性附加数据。
  • undefined 是一个没有被识别数据值。 调用如jQuery.data( el, "name", undefined )将返回对应的"name"数据,等价于 jQuery.data(el, "name" )
  • .unload()方法只是作为.on( "unload", handler )的一个速记写法,移除该事件可以使用.off( "unload" )

例子:

在 div 元素上先存储再获取数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>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

描述: 返回用jQuery.data(element, name, value)储存在元素上的相应名字的数据,或者元素上完整的数据存储

  • 添加的版本: 1.2.3jQuery.data( element, key )

    • element
      类型: Element
      T要关联数据的DOM对象
    • key
      类型: String
      存储的数据名
  • 添加的版本: 1.4jQuery.data( element )

    • element
      类型: Element
      要关联数据的DOM对象

注意这是一个底层的方法,你也可用更方便的 .data()方法。 (感谢:@随便过完就算了反馈翻译问题)

关于 HTML5 data-* 属性: 这个低层次的方法不检索的data-*属性, 除非.data()方法已经返回了它们。

jQuery.data()方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。我们可以在一个元素上设置不同的值,并获取这些值:

1
2
alert(jQuery.data( document.body, 'foo' ));
alert(jQuery.data( document.body ));

上面几行代码alert body元素上设置的值。若果先前没有设置任何值,那么将返回一个空字符串。

调用jQuery.data(element)时将获取一个JavaScript对象,它包含了元素上所有存储的数据。jQuery内部自身使用这个方法来绑定数据,如事件处理器,所以不要以为这对象只包含你的代码中储存的数据。

注意: 这个方法目前并不提供在XML文档上跨平台设置,作为Internet Explorer不允许XML 文档中通过自定义属性附加数据。

例子:

获取存放在元素上名叫 "blah" 的数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!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, 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>

Demo: