今天做項目的時候發(fā)現一個坑，關于jQuery獲取data-*屬性的方法data(),，特寫此篇來記錄。

data-*自定義數據屬性

HTML5規(guī)定可以為元素添加非標準型的屬性,，只需添加前綴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的值?？煽匆韵麓a

//將上面代碼的設置值部分進行修改
 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>

• 傳統(tǒng)獲取方式 `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");

參考資料：

• jQuery官方文檔

• jQuery.data()和HTML5之data-屬性

• jQuery.data() 的實現方式