jQuery允许把jQuery对象当作一个临时的“数据存储中心“,开发者能以key-value对的形式将数据存储到jQuery对象里,并林jQuery对象里取出之前存储的数据,也可以删除之前存储的数据。存入jQuery对象里的数据既可以是基本类型值,也可以是数组、JavaScript对象等。jQuery对象支持的数据存储相关方法如下:
1) data(name,value):向jQuery对象里存储name:value的数据对。
2) data(object):向jQuery对象中一次存入多个name:value数据对。其中object是一个形如{name:value…}的对象。
3) data():获取jQuery对象中存储的所有数据。该方法返回一个{name:value…}形式的对象
4) removeData([name]):删除jQuery对象里存储的key为name的数据。
5) removaData([list]):删除list所列出的多个key对应的数据。
除此之外,jQuery命名空间也提供了一些数据存储相关的工具方法,这些工具方法用于将数据存储某个元素上。
1) jQuery.data(element,key,value):在element元素上存储key:value数据对
2) jQuery.data(element,key):获取element元素上指定key对应的value值。
3) jQuery.data(element):获取element元素上所有key:value对。
4) jQuery.removeData(element[,key]):删除element元素指定keyA对应的数据项
5) jQuery.hasData(element):判断element元素上是否已存储数据
下面的代码示范jQuery的数据存储相关方法
<!DOCTYPE html> <html> <head> <meta name="author" content="OwenWilliam" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 操作数据的工具方法 </title> </head> <body> <div> 最有趣的人物是<span></span>, 它的年龄是:<span></span> </div> <script type="text/javascript" src="../jquery-1.8.0.js"> </script> <script type="text/javascript"> var target = $("<div>java</div>"); // 向jQuery对象里添加book数据 target.data("book" , "Java"); // 访问jQuery对象里的book数据,将输出"Java" alert(target.data("book")); // 删除jQuery对象里的book数据 target.removeData("book"); // 再次访问jQuery对象里的book数据,将输出"undefined" alert(target.data("book")); // 获取页面上第一个div元素 var div = $("body>div")[0]; // 向div元素上存储多个key:value对 $.data(div, "test", { name: "孙悟空", age: 500 }); // 访问div元素上存储的数据 $("span:first").text(jQuery.data(div, "test").name); $("span:last").text(jQuery.data(div, "test").age); </script> </body> </html>