jQuery.data()
jQuery.data()
所属分类：数据操作|工具类Englishmanual:jQuery.data()
存储任意数据到指定的元素并且/或者返回设置的值。
Contents:
jQuery.data(element,key,value)
jQuery.data(element,key,value)
jQuery.data(element,key)
jQuery.data(element,key)
jQuery.data(element)
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');
注意:这个方法目前并不提供在XML文档上跨平台设置，作为InternetExplorer不允许在XML文档中通过自定义属性附加数据。
例子:
在div元素上先存储再获取数据。
<!DOCTYPEhtml>
<html>
<head>
<style>
div{color:blue;}
span{color:red;}
</style>
<scriptsrc="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div>
Thevaluesstoredwere
<span></span>
and
<span></span>
</div>
<script>vardiv=$("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()代替。
关于HTML5data-*属性:这个低层次的方法不检索的data-*属性，除非.data()方法已经返回了它们。
jQuery.data()方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。我们可以在一个元素上设置不同的值，并获取这些值：
alert(jQuery.data(document.body,'foo'));
alert(jQuery.data(document.body));
上面几行代码alertbody元素上设置的值。若果先前没有设置任何值，那么将返回一个空字符串。
调用jQuery.data(element)时将获取一个JavaScript对象，它包含了元素上所有存储的数据。jQuery内部自身使用这个方法来绑定数据，如事件处理器，所以不要以为这对象只包含你的代码中储存的数据。
注意:这个方法目前并不提供在XML文档上跨平台设置，作为InternetExplorer不允许XML文档中通过自定义属性附加数据。
例子:
获取存放在元素上名叫"blah"的数据。
<!DOCTYPEhtml>
<html>
<head>
<style>
div{margin:5px;background:yellow;}
button{margin:5px;font-size:14px;}
p{margin:5px;color:blue;}
span{color:red;}
</style>
<scriptsrc="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div>Adiv</div>
<button>Get"blah"fromthediv</button>
<button>Set"blah"to"hello"</button>
<button>Set"blah"to86</button>
<button>Remove"blah"fromthediv</button>
<p>The"blah"valueofthisdivis<span>?</span></p>
<script>
$("button").click(function(e){
varvalue,div=$("div")[0];
switch($("button").index(this)){
case0:
value=jQuery.data(div,"blah");
break;
case1:
jQuery.data(div,"blah","hello");
value="Stored!";
break;
case2:
jQuery.data(div,"blah",86);
value="Stored!";
break;
case3:
jQuery.removeData(div,"blah");
value="Removed!";
break;
}
$("span").text(""+value);
});
</script>
</body>
</html>
Demo:
原文地址：http://www.jquery123.com/jQuery.data/