碼上歡樂
相關內容    簡體    繁體

HTML5中的data-*屬性和jQuery中的.data()方法使用

本文轉載自   查看原文   2017-11-15 14:11   7048    jQuery/ html/css/ data-*、.data()、。dataset/ javascript

原文地址鏈接：http://blog.csdn.net/fly_zxy/article/details/50687691；

HTML5中的data-*屬性

我們往往會根據需要在HTML標記上添加自定義的屬性來存儲和操作數據，我們自定義的屬性名字也千奇百怪，五花八門。我們可以通過原生的getAttribute()或jQuery中的.attr()來獲取我們自定義的屬性。但是前端技術在向着規范化前進。HTML5標准規定，自定義的屬性都已data—*開頭，這樣就區分開了固有屬性和自定義屬性。HTML代碼如下：
[html] view plain copy
 
  1. <div id="testDiv" data-cname="張三" data-e-name="zhangsan" data-myName="my name is zs.">測試在元素上存儲一個key-value</div>  
[javascript] view plain copy
 
  1. $(document).ready(function(){  
  2. var el = document.getElementById("testDiv");  
  3.   
  4. console.log(el.dataset.cname);//=>張三  
  5. el.dataset.cname = "ZS";//設置值為"ZS"  
  6. console.log(el.dataset.cname);//=>"ZS"  
  7.   
  8. console.log("jQuery data:", $("#testDiv").data("eName") );  
  9. $("#testDiv").data("eName", "abcefg");  
  10. console.log("jQuery data:", $("#testDiv").data("eName") );  
  11.   
  12. console.log("遍歷testDiv上的自有屬性");  
  13. $.each(el.dataset, function(key, value){  
  14. console.log(key+":"+value);  
  15. });  
  16.   
  17. //遍歷testDiv上的自有屬性  
  18. //cname:ZS  
  19. //eName:zhangsan   
  20. //myname:my name is zs.  
  21. <span style="white-space:pre">    </span>   
  22. });  
在獲取自定義屬性的值時，使用dataset屬性，然后通過自定義屬性(這時去掉data-前綴)的名稱去獲取值。dataset是JS5規范中新增加的屬性，用於和data-*配合使用。
通過each打印的結果，我們需要注意：
1，如果data-后面包含了“-”，例如 date-e-name，"-"會去掉，並轉換成為駱駝峰式的命名 eName。這是因為JSON Object 的key不能包含”-“。
2，如果data-后面的單詞有大寫，例如 myName，將會轉存成小寫 myname。這里就不理解為什么會轉換成小寫了，JSON Object的key是區分大小寫的。求高人指定？？
3，如果你想刪除一個data-*屬性，請使用 delete dataset.cname或者dataset.cname=null;
 
data-*屬性看起來很好，但是不幸的是只有在Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+的瀏覽器中實現了此標准。如果你的腳步需要兼容各主流瀏覽器的不同版本建議還是使用原生的getAttribute()或jQuery中的.attr()。

jQuery中的.data()

jQuery中的.data()方法作用：在jQuery對象對應的DOM元素上獲取或存放key-value對。我們可以通過html5的data-*屬性在元素上存取數據，在jQuery也可以通過data()來實現。data()方法有多個重載，傳遞一個參數是獲取value值，傳遞兩個參數是存儲或覆蓋已存在的值，傳遞一個JSON Object是在元素上存儲或覆蓋已存在的多個key-value對。如果通過data() 在元素上存儲key-value，value可以是一個對象，而不是像data-*只能存儲一個字符串的value。下面給出一個綜合示例：
[html] view plain copy
 
  1. <script id="jquery_183" type="text/javascript" class="library" src="//cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>  
  2. <!DOCTYPE html>   
  3. <html>  
  4.     <head>  
  5.           
  6.     </head>  
  7.     <body>  
  8.         <div id="testDiv" data-cname="張三" data-e-name="zhangsan" data-myName="my name is zs.">  
  9.             測試在元素上存儲一個key-value  
  10.         </div>  
  11.     </body>  
  12. </html>  


[javascript] view plain copy
 
  1. $(function(){  
  2.       
  3.     function printVlaue(){  
  4.       
  5.         //通過data()在testDiv元素上存儲 {ename:zhangsan} 健/值對。  
  6.         $("#testDiv").data("ename", "zhangsan");  
  7.         //修改data()通過 data-* 屬性存儲的值  
  8.         $("#testDiv").data("cname", "我是張三");  
  9.       
  10.         console.log( "獲取通過data()存儲在testDiv元素上的ename值:",         $("#testDiv").data("ename") );  
  11.         console.log( "獲取通過 data-* 存儲在testDiv元素上的cname值:",   $("#testDiv").data("cname") );  
  12.         //$("#testDiv").jQueryremoveAttr("data-"+"abc");  
  13.           
  14.         console.log( "獲取ename值:", $("#testDiv").data("ename") );  
  15.         console.log( "獲取cname值:", $("#testDiv").data("cname") )  
  16.           
  17.         console.log("刪除testDiv元素上 ename 和 cname 鍵/值對。");  
  18.         $("#testDiv").removeData("ename");  
  19.         $("#testDiv").removeData("cname");  
  20.           
  21.         console.log("輸出 eanem 和 canme 對應的值，看是否已經刪除");  
  22.         console.log( $("#testDiv").data("ename") );  
  23.         console.log( $("#testDiv").data("cname") );  
  24.           
  25.       
  26.     };  
  27.       
  28.     $("<button>獲取值</button>").appendTo("body").bind("click", printVlaue);;  
  29.     console.log("debug use.");;  
  30.       
  31. });  
  32. /* 
  33. 獲取通過data()存儲在testDiv元素上的ename值: zhangsan 
  34. 獲取通過 data-* 存儲在testDiv元素上的cname值: 我是張三 
  35. 獲取ename值: zhangsan 
  36. 獲取cname值: 我是張三 
  37. 刪除testDiv元素上 ename 和 cname 鍵/值對。 
  38. 輸出 eanem 和 canme 對應的值，看是否已經刪除 
  39. undefined 
  40. 張三 
  41. */  
從上例中我們可以看出，.data()可以獲取通過data-*屬性存儲的值。但是通過.data()修改data-*屬性的值不會顯示在HTML標記中，我們只是通過.data()在元素存儲了一個新值。.removeData()也不能刪除通過data-*存儲的數據。由於jQuery是一個通用的JS框架,最瀏覽器兼容性做的非常好，大多數情況，我們應該通過.data()在元素上存取數據(有一個好處是可以存儲一個對象)。如果我們必須通過data-*來存取和修改數據,建議使用JS5的dataset屬性，這個屬性的兼容問題，我們可以通過寫jQuery插件來解決。這是我的插件代碼，如下：
[html] view plain copy
 
  1.     <script id="jquery_183" type="text/javascript" class="library"   
  2. src="//cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>  
  3. <!DOCTYPE html>   
  4. <html>  
  5.     <head>  
  6.           
  7.     </head>  
  8.     <body>  
  9.         <div id="testDiv" data-cname="張三" data-e-nAme="zhangsan" data-myName="my name is zs.">  
  10.             測試在元素上存儲一個key-value  
  11.         </div>  
  12.     </body>  
  13. </html>  
[javascript] view plain copy
 
  1. $(document).ready(function(){  
  2.     function printValue(){  
  3.   
  4.         var $testDiv = $("#testDiv").udDataAttr();  
  5.           
  6.         console.log("udDataAttr get()=>", $testDiv.get("cname") );  
  7.         $testDiv.set("cname", "set 張三");  
  8.         console.log("udDataAttr get()=>", $testDiv.get("cname") );  
  9.         console.log("打印所有已data-*開頭的屬性和值=>", $testDiv.dataset());  
  10.           
  11.         console.log("udDataAttr get e-name=>", $testDiv.get("e-name") );  
  12.           
  13.            
  14.   
  15.         //var el = document.getElementById("testDiv");  
  16.         //console.log("el.dataset.eName=>", el.dataset.eName);  
  17.     };  
  18.       
  19.     $("<button>獲取值</button>").appendTo("body").bind("click", printValue);   
  20.   
  21.     console.log("debug use.");  
  22. });       
  23.   
  24. (function($, window){  
  25.     //user-defined Attribute  
  26.     var plugName = "udDataAttr";  
  27.       
  28.     $.fn[plugName] = function(){  
  29.         var $self = $(this),  
  30.                 obj = ($self.length && $self[0].dataset) || null;  
  31.           
  32.         return {  
  33.             get: function(name){  
  34.                 return obj===null? $self.attr("data-"+name) : obj[ this._format(name) ];  
  35.             }   
  36.             ,set: function(name, value){  
  37.                 if(obj === null){  
  38.                     $self.attr("data-"+name, value);  
  39.                 }else{  
  40.                     obj[ this._format(name) ] = value;  
  41.                 }  
  42.                 return $self;     
  43.             }  
  44.             ,dataset: function(){  
  45.                 var newObj = {};  
  46.                 if(obj === null){  
  47.                     $.each(obj, function(key, value){  
  48.                         newObj[key] = value;  
  49.                     });  
  50.                 }else{  
  51.                     newObj = $self.data(); //獲取所有以data-*開頭的屬性  
  52.                 }  
  53.                   
  54.                 return newObj;  
  55.             }  
  56.             /* 
  57.              *  將name轉換成dataset可識別的格式。 
  58.              *  例如：e-name 轉換成 eName 
  59.              *  總感覺 _format()的實現不是最優的,求高手給出實現 
  60.              */  
  61.             ,_format: function(name){  
  62.                 console.log("_format old name=>",name);  
  63.                 name = name.toLowerCase();  
  64.                 if(name.indexOf('-')>-1){  
  65.                     var array = name.split('-');  
  66.                     for(var i=1,len=array.length; i<len; i++){   
  67.                         var v = array[i];  
  68.                         array[i] = v.substr(0,1).toUpperCase() + v.substr(1,v.length);  
  69.                         name=array.join("");  
  70.                     }  
  71.                 }  
  72.                 console.log("_format() new name=>",name);  
  73.                 return name;  
  74.             }  
  75.         };  
  76.           
  77.     };  
  78.       
  79.   
  80. }(jQuery, window));  


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 使用 Razor 生成 HTML5 中的 data- 屬性 html 5 data-* (dataset) 屬性和 jquery data方法比較 js,jQuery獲取html5的data-*屬性 js,jQuery獲取html5的data-*屬性 HTML5新增屬性data-*和js/jquery之間的交互 HTML data-* 屬性 Jquery.Data()和HTML標簽的data-*屬性 html data-* 屬性的含義和使用 關於Jquery.Data()和HTML標簽的data-*屬性 HTML data-* 屬性的含義和使用
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM