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

HTML5 data-* 自定義屬性操作及其注意點

本文轉載自   查看原文   2019-01-17 08:30   2889    前端技術

在HTML5中添加了data-*的方式來自定義屬性，所謂data-*實際上上就是data-前綴加上自定義的屬性名,命名可以用駝峰命名方式，但取值是必需全部使用小寫（后面會說），使用這樣的結構可以進行數據存放。使用data-*可以解決自定義屬性混亂無管理的現狀。

1.   Html綁定數據寫法

1.1簡單單詞：

<div id="testDiv" data-cd="24">
    Click Here
</div>

 


1.2  使用駝峰命名（需要特定注意的地方）：

<div id="testDiv" data-cartCd="24">
    Click Here
</div>

 

2. 取綁定的值方法

原生的js取法：


var testDiv = document.getElementById('testDiv');

簡單的單詞：console.log(testDiv.dataset.cd);

復雜的駝峰命名單詞：console.log(testDiv.dataset.cartcd);//注意是“cartcd”,不管

//是不是駝峰命名，一切都是小些。

使用Jquery方法：

 console.log($(“#testDiv”).data(“cd”));

 console.log($(“testDiv”).data(“cartcd”));//同上面一樣，注意是“cartcd”,不管

//是不是駝峰命名，一切都是小些。

和html5的api不同的是，jQuery會嘗試將字符串轉換為一個JavaScript值（包括布爾值（booleans），數字（numbers），對象（objects），數組（arrays）和空（null））。

 

3.  修改綁定數據

原生js方式:

testDiv.dataset.cartcd= “新值”

Jquery方式：

$(“testDiv”).data(“cartcd”,”新值”)

 

其實這個屬性是html5新加的特性，為了綁定數據，我們可以將一些參數綁定到dom標簽上，而不用將數據填 到input標簽上然后隱藏該標簽。最需要注意的一點的取值時必需全部使用小寫的名字，”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刪除。



猜您在找 HTML5自定義屬性之data- HTML5自定義屬性之data- HTML5 data-* 自定義屬性 HTML5的自定義屬性data-*詳細介紹和JS操作實例 HTML5的自定義屬性data-*詳細介紹和JS操作實例 HTML5的自定義屬性data-* 的用法解析 自定義屬性 —— data-* data-*設置自定義屬性注意事項一 關於H5的自定義屬性data-* 獲取自定義屬性、 data-* 的值
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM