## jquery data的用法 > 我們往往會根據需要在HTML標記上添加自定義的屬性來存儲和操作數據，我們自定義的屬性名字也千奇百怪，五花八門。我們可以通過原生的getAttribute()或jQuery中的.attr()來獲取我們自定義的屬性。 > 但是前端技術在向著規范化前進。** HTML5標準規定，自定義的屬性都已data—*開頭 ** ，這樣就區分開了固有屬性和自定義屬性。 > jquery data和 jquery attr, js getAttribute 有著本質的區別，并且無法用$(el).data('property')的方法，去獲取$(el).attr('data-property')和 getAttribute('property')的值 1. 如果data-后面包含了“-”，例如 date-e-name，"-"會去掉，并轉換成為駱駝峰式的命名 eName。這是因為JSON Object 的key不能包含”-“。 2. 如果data-后面的單詞有大寫，例如 myName，將會轉存成小寫 myname。這里就不理解為什么會轉換成小寫了，JSON Object的key是區分大小寫的。求高人指定？？ 3. 如果你想刪除一個data-*屬性，請使用 delete dataset.cname或者dataset.cname=null; 4. data-*屬性看起來很好，但是不幸的是只有在Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+的瀏覽器中實現了此標準。如果你的腳步需要兼容各主流瀏覽器的不同版本建議還是使用原生的getAttribute()或jQuery中的.attr()。 **jquery data 是一種緩存機制** 用法如下： data()方法 ~~~ //HTML代碼 <div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"></div> //獲取屬性 var appid = $("#myDiv").data("appid"); //123 var app-id = $("#myDiv").data("app-id"); //456 //屬性賦值 $("#myDiv").data("appid","666"); //最終HTML代碼 <div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"></div> ~~~ 需要注意的是，data()的值進行修改并不會影響到DOM元素上的data-*屬性的改變。data()的本質其實是將一個 “cache” 附加到了對象上，并使用了一個特殊的屬性名稱。 所以上述代碼中，雖然對div進行了data()賦值操作，但HTML代碼中div的data-appid的值仍然為123，因為data()只是修改了緩存的那個值，此時進行$('#myDiv').data("appid")的操作，輸出的結果為666.