jQuery.data( element, key, value )
jQuery.data(element,key,value)
element
类型是元素。
和该数据关联的DOM元素。
key
类型是字符串。
被设置的数据的字符串命名。
value
类型是对象。
新的数据值。
Note:这是一个比较底层的方法,一个更方便的方法是.data()也是可以的。
jQuery.data()方法允许我们在DOM元素上附加任何类型的data数据,在避免循环引用的方式下是安全的,才不会引起内存泄漏。jQuery保证使用当jQuery方法移除DOM元素的时候,data也会被移除,并且也包括当用户离开了页面的时候。
我们为一个简单元素设置一些不同的值然后获取他们:
jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');
Note:这个方法现在还不提供在XML文档上设置data的跨平台支持,因为IE现在不支持通过可设置和获取布尔值(expando)的属性来附加数据。
jQuery.data( element, key )
jQuery.data(element,key)
jQuery.data(element)
element
类型是元素。
查询数据的DOM元素
key
类型是字符串。
数据存储的名字。
Note:这个是底层的方法,更方便的.data()方法是建议使用的。
我们可以在简单元素上一次获取一个值,或者一组值:
alert(jQuery.data( document.body, 'foo' ));//foo
alert(jQuery.data( document.body ));//all data
jQuery.hasData( element )
jQuery.hasData(element)
element
类型是元素。
检查数据的DOM元素。
jQuery.removeData( element [, name] )
jQuery.removeData(element[,name])
element
类型是元素。
移除数据的DOM元素。
name
类型是字符串。
移除的那个数据的字符串名字。
Note:这是一个底层的方法,你可以使用.removeData()方法代替。jQuery.removeData()方法允许我们移除被jQuery.data()设置的值。当调用关键字的名字时,jQuery.removeData()删除那个指定的值;当没有使用参数时,所有的值都会被删除。
<script>//存储然后获取div元素的值
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>
<script>//获取元素被以"blah"命名存储的data
$("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>
<script>//为元素设置data并查看hashData的结果
var $p = jQuery("p"), p = $p[0];
$p.append(jQuery.hasData(p)+" "); /* false */
$.data(p, "testing", 123);
$p.append(jQuery.hasData(p)+" "); /* true*/
$.removeData(p, "testing");
$p.append(jQuery.hasData(p)+" "); /* false */
$p.on('click', function() {});
$p.append(jQuery.hasData(p)+" "); /* true */
$p.off('click');
$p.append(jQuery.hasData(p)+" "); /* false */
</script>
<script>//为两个名字设置data,然后移除其中之一
var div = $("div")[0];
$("span:eq(0)").text("" + $("div").data("test1"));
jQuery.data(div, "test1", "VALUE-1");
jQuery.data(div, "test2", "VALUE-2");
$("span:eq(1)").text("" + jQuery.data(div, "test1"));
jQuery.removeData(div, "test1");
$("span:eq(2)").text("" + jQuery.data(div, "test1"));
$("span:eq(3)").text("" + jQuery.data(div, "test2"));
</script>