概述 jQuery.data( element, key, value )
返回值:jQuery
描述:存储任意数据到指定的元素,返回设置的值。
注意:这是一个底层的方法,你应该用.data()
代替。
jQuery.data()
方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时,jQuery 同时也会移除添加在上面的数据。我们可以在一个元素上设置不同的值,并获取这些值:
- jQuery.data(document.body, 'foo', 52);
- jQuery.data(document.body, 'bar', 'test');
undefined
是一个没有被识别数据值。
调用如jQuery.data( el, "name", undefined )
将返回对应的"name"数据,等价于 jQuery.data(el, "name" )
。
.unload()
方法只是作为.on( "unload", handler )
的一个速记写法,移除该事件可以使用.off(
"unload"
)
。
示例
在 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>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>
概述 jQuery.data( element, key )
返回值:Object
描述: 返回用jQuery.data(element, name, value)
储存在元素上的相应名字的数据,或者元素上完整的数据存储
注意这是一个底层的方法,你也可用更方便的 .data()
方法。
关于 HTML5 data-* 属性: 这个低层次的方法不检索的data-*
属性,
除非.data()
方法已经返回了它们。
jQuery.data()
方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。我们可以在一个元素上设置不同的值,并获取这些值:
- alert(jQuery.data( document.body, 'foo' ));
- alert(jQuery.data( document.body ));
上面几行代码alert body
元素上设置的值。若果先前没有设置任何值,那么将返回一个空字符串。
调用jQuery.data(element)
时将获取一个JavaScript对象,它包含了元素上所有存储的数据。jQuery内部自身使用这个方法来绑定数据,如事件处理器,所以不要以为这对象只包含你的代码中储存的数据。
注意: 这个方法目前并不提供在XML文档上跨平台设置,作为Internet Explorer不允许XML 文档中通过自定义属性附加数据。
示例
获取存放在元素上名叫 "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, 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>