今天做項目的時候發現一個坑，關於jQuery獲取data-*屬性的方法data()，特寫此篇來記錄。
data-*自定義數據屬性
HTML5規定可以為元素添加非標准型的屬性，只需添加前綴data-，這些屬性可以隨意添加，隨意命名，目的是為元素提供與渲染無關的信息，或提供語義信息。
js獲取data-*的方式
-
通過dataset屬性訪問
//HTML代碼 <div id="myDiv" data-appid="123" data-myname="lsxj"></div>
//js代碼
var div = document.getElementById("myDiv");
var appId = div.dataset.appid;//獲取data-appid的值
var myName = div.dataset.myname;//獲取data-myname的值
//設置值
div.dataset.appid = 456;
div.dataset.myname = "newname";//最終HTML結果 <div id="myDiv" data-appid="456" data-myname="newname"></div>
dataset屬性的值是DOMStringMap的一個實例，名值對的映射。每個data-name形式的屬性都有一個對應的屬性，只不過該屬性名沒有data-前綴。
兼容性：
需要注意的是，dataset中大小寫的問題。帶連字符連接的名稱在使用的時候需要命名駝峰化。例如data-my-name對應的是dataset.myName的值。可看以下代碼
//將上面代碼的設置值部分進行修改 div.dataset.appId = 789; div.dataset.myName = "secondname"; //最終結果 <div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"></div> 
-
傳統獲取方式 `getAttribute
還是上述的例子。獲取data-*的方法可使用如下方法：
var appId = div.getAttribute("data-appid");
jQuery獲取方法
-
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.
-
attr()方法
var appid = $("#myDiv").attr("data-appid");
參考資料：