jQuery.data( element, key, value )
存储与指定元素关联的任何数据,并且返回设置的值。
jQuery.data(element,key,value)
element
类型是元素。
和该数据关联的DOM元素。
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,name,value)方法设置的被命名的data的值,或者该元素存储的所有data
jQuery.data(element,key)
jQuery.data(element)
element
类型是元素。
查询数据的DOM元素
key
类型是字符串。
数据存储的名字。
Note:这个是底层的方法,更方便的.data()方法是建议使用的。
jQuery.data(element,key)
jQuery.data(element)
element
类型是元素。
查询数据的DOM元素
key
类型是字符串。
数据存储的名字。
Note:这个是底层的方法,更方便的.data()方法是建议使用的。
关于HTML5的data-*属性:这个底层的方法不能够获取data-*属性除非.data()方法已经获取了他们。
这个jQuery.data()方法允许我们在DOM元素上附加任何类型的data数据,在避免循环引用的方式下是安全的,才不会引起内存泄漏。
我们可以在简单元素上一次获取一个值,或者一组值:
我们可以在简单元素上一次获取一个值,或者一组值:
alert(jQuery.data( document.body, 'foo' ));//foo
alert(jQuery.data( document.body ));//all data
上面的是alert 那些被设置在body元素上的data值。如果该元素上没有设置值,一个空串会被返回。
调用.jQuery.data(element)方法时,获取所有元素上关联的作为Javascript对象的值。注意,jQuery自己使用这个方法用来内部存储数据,比如event handlers,因此不要以为它只是用来存储你自己代码中的数据(意思是说也用来处理jQuery底层的数据)。
jQuery.hasData( element )
判断该element元素是否存在关联的data数据
jQuery.hasData(element)
element
类型是元素。
检查数据的DOM元素。
jQuery.hasData(element)
element
类型是元素。
检查数据的DOM元素。
这个jQuery.hasData()方法用来提供一种方式来判断一个元素现在是否存在被jQuery.data()设置过的值。如果一个元素没有被关联data(没有data对象或者data对象为空),这个方法返回false;不然就返回true.
这个jQuery.hasData(element)的主要的亮点在于他不会创建和关联一个data对象到指定元素上,如果现在不存的话。以次相反的是,jQuery.data(element)经常给调用者返回一个data对象,如果现在不存在data对象,他就会创建一个。
注意:jQuery的事件处理系统使用jQuery data的API来存储event handlers。因此,在一个元素上绑定一个事件时,使用 .on(), .bind(), .live(), .delegate()方法,或者其中的事件方法之一,也是在一个元素上关联一个data对象。jQuery.removeData( element [, name] )
移除先前存储的数据
jQuery.removeData(element[,name])
element
类型是元素。
移除数据的DOM元素。
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>