js,jQuery猎取html5的data*属性

本日做项目标时刻发明一个坑，关于jQuery猎取data-*属性的要领data()，特写此篇来纪录。

data-*自定义数据属性

HTML5划定可认为元素增加非标准型的属性，只需增加前缀data-，这些属性能够随便增加，随便定名，目标是为元素供应与衬着无关的信息，或供应语义信息。

js猎取data-*的体式格局

• 经由过程dataset属性接见

  //HTML代码
  

  //js代码
  var div = document.getElementById(&＃8220;myDiv&＃8221;);
  var appId = div.dataset.appid;//猎取data-appid的值
  var myName = div.dataset.myname;//猎取data-myname的值
  //设置值
  div.dataset.appid = 456;
  div.dataset.myname = &＃8220;newname&＃8221;;

  //终究HTML效果
  

dataset属性的值是DOMStringMap的一个实例，名值对的映照。每一个data-name情势的属性都有一个对应的属性，只不过该属性名没有data-前缀。

兼容性：

须要注重的是，dataset中大小写的题目。带连字符衔接的称号在运用的时刻须要定名驼峰化。比方data-my-name对应的是dataset.myName的值。可看以下代码

//将上面代码的设置值部份举行修正
div.dataset.appId = 789;
div.dataset.myName = "secondname";
//终究效果


• 传统猎取体式格局 `getAttribute

  照样上述的例子。猎取data-*的要领可运用以下要领：

  var appId = div.getAttribute(&＃8220;data-appid&＃8221;);

jQuery猎取要领

• data()要领

  //HTML代码
  

  //猎取属性
  var appid = $(&＃8220;#myDiv&＃8221;).data(&＃8220;appid&＃8221;); //123
  var app-id = $(&＃8220;#myDiv&＃8221;).data(&＃8220;app-id&＃8221;); //456

  //属性赋值
  $(&＃8220;#myDiv&＃8221;).data(&＃8220;appid&＃8221;,&＃8221;666&＃8243;);

  //终究HTML代码
  

须要注重的是，data()的值举行修正并不会影响到DOM元素上的data-*属性的转变。data()的实质实际上是将一个 “cache” 附加到了对象上，并运用了一个特别的属性称号。

所以上述代码中，虽然对div举行了data()赋值操纵，但HTML代码中div的data-appid的值依然为123，由于data()只是修正了缓存的谁人值，此时举行$('#myDiv').data("appid")的操纵，输出的效果为666.

• attr()要领

  var appid = $(&＃8220;#myDiv&＃8221;).attr(&＃8220;data-appid&＃8221;);

参考资料：

• jQuery官方文档

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

• jQuery.data() 的完成体式格局