夏日博客

A-A+

jQuery.data() 函数使用详解

2016年01月13日 前端设计 暂无评论 阅读 6 views 次

data()函数用于在当前jQuery对象所匹配的所有元素上存取数据,它和html()有那一点像，一旦页面刷新，之前存放的数据都将不复存在，但data数据移除只能使用removeData()函数了，下面一起来看看关于jquery data()函数用法。

一、jquery data()的作用

data() 方法向被选元素附加数据，或者从被选元素获取数据。

通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。

该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据，请使用 removeData() 函数。

二、jquery data的使用方式

1、获取附加的data的值

$(selector).data(name)

参数说明

name：

可选。规定要取回的数据的名称。

如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据。

2、用name和value为对象附加数据

$(selector).data(name,value)

参数说明

selector：为需要附加或者获取数据的对象。

name：参数为数据的名称。

value：参数为数据的值。

3、使用对象向元素附加数据

使用带有名称/值对的对象向被选元素添加数据。

除了以提供 name 和 value 的方式进行赋值，我们还可以直接传入另一个对象（ “another” ）作为参数。这种情况下，“another” 的属性名称和属性值将被视为多个键值对，从中提取的 “name” 和 “value” 都会被复制到目标对象的缓存中。

$(selector).data(object)

参数说明

object：必需。规定包含名称/值对的对象。

实例:

  1. <html>  
  2. <head>  
  3. <script type="text/javascript">  
  4. $(document).ready(function(){  
  5.   testObj=new Object();  
  6.   testObj.greetingMorn="Good Morning!";  
  7.   testObj.greetingEve="Good Evening!";  
  8.   $("#btn1").click(function(){  
  9.     $("div").data(testObj);  
  10.   });  
  11.   $("#btn2").click(function(){  
  12.     alert($("div").data("greetingEve"));  
  13.   });  
  14. });  
  15. </script>  
  16. </head>  
  17. <body>  
  18. <button id="btn1">把数据添加到 div 元素</button><br />  
  19. <button id="btn2">获取已添加到 div 元素的数据</button>  
  20. <div></div>  
  21. </body>  
  22. </html>  

示例&说明:

以下面这段HTML代码为例:

  1. <div id="n1">  
  2.     <div id="n2">  
  3.         <ul id="n3">  
  4.             <li id="n4">item1</li>  
  5.             <li id="n5">item2</li>  
  6.             <li id="n6">item3</li>  
  7.         </ul>  
  8.     </div>    
  9. </div>  

我们编写如下jQuery代码:

  1. var $li = $("li");  
  2. // 同时向所有的li元素存储数据  
  3. $li.data("name", "CodePlayer");  
  4. $li.data("desc", "专注于编程开发技术分享");  
  5. $li.data("url", "https://www.xiariboke.net/");  
  6. var $n5 = $("#n5"); // 通过n4、n5、n6都可以读取数据  
  7. //  返回键值name所对应的数据  
  8. document.writeln( $n5.data("name") ); // CodePlayer  
  9. // 以对象形式返回所有的数据  
  10. var obj = $("#n6").data();  
  11. for(var i in obj){  
  12.     document.writeln( i + "=" + obj[i] + "<br>");     
  13. }  
  14. /*输出： 
  15. name=CodePlayer 
  16. desc=专注于编程开发技术分享 
  17. url=https://www.xiariboke.net/ 
  18. */  
  19. //移除掉n4上存储的键名为name的数据  
  20. $("#n4").removeData("name");  
  21. // 虽然$li匹配3个li元素，但是读取数据只以第一个li元素n4为准，因此返回undefined  
  22. document.writeln( $li.data("name") ); // undefined  
  23. var object = {   
  24.         name: "张三",  
  25.         age: 18,  
  26.         score: [87, 23, 56],  
  27.         options: { gender: "男", address: "水帘洞" }  
  28.     };  
  29. // 同时向所有的div元素以对象形式设置多个key-value数据  
  30. // value值可以是任意类型的数据，包括数组、对象等  
  31. $("div").data( object );  
  32. var $n2 = $("#n2"); // 通过n1、n2都可以读取数据  
  33. document.writeln( $n2.data("name") ); // 张三  
  34. document.writeln( $n2.data("score") ); // 87,23,56  
  35. document.writeln( $n2.data("options") ); // [object Object]  
标签：

给我留言