js,jQuery獲取html5的data-*屬性

今天作項目的時候發現一個坑，關於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");

參考資料：

• jQuery官方文檔

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

• jQuery.data() 的實現方式