使用JS和Jquery 给data属性 赋值和取值

更多前端信息可以关注博客：http://www.colbrus.com

首先记录一下，data-* 其中*不能为空和不能含有大写字母。
然后是如何获取data的值。
页面是这么写的：

  
<a href="#"  id="a" data-test="123">123</a>
  

一、JS取值和赋值的方法如下：

//原生js获取：
   document.getElementById("a").dataset.test。

//JS赋值data 的方法
    var a= document.getElementById("a");
    a.dataset.test="456";//此时 data-test="456"
    

一、Jquery取值和赋值的方法如下：

//jquery 有两种方法，1、attr()  2、data()
//1、attr() 取值和赋值
   $("#a").attr("data-test"); //取值 data-test="123"
   $("#a").attr("data-test","456"); //赋值 data-test="456"

//2、data() 取值和赋值
   $("#a").data("test"); //取值 data-test="789"
   $("#a").data("test","200"); //赋值 data-test="200"
   

现在分析一下，原生js和jq的attr()赋值其实是一样的，都会改变dom树，页面中的data-test会改变。而jq的data（）辅助其实是赋值给jq对象，而取值的时候取得也是jq对象的，如果jq对象的缓存已经存在，页面的改变并不会改变data(“test”)取出的值。jq对象的改变并不会重构dom树，所以element中的data-test是不会改变的。