data在原生和jquery中的不同表现

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

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

1.原生js获取：document.getElementById("a").dataset.test。
2.jq attr()获取
$("#a").attr("data-test")。
3.jq data()获取
$("#a").data("test")。
当然，这个时候三种方法取出来的值都是一样的，全是“123”。
再看赋值，其实也是最容易迷糊的一个。

$(function(){
    console.log($("#a").data("test"));//输出“123”
    $("#a").data("test","456");//此时element中data-test="123"
    console.log($("#a").data("test"));//输出“456”
    var a= document.getElementById("a");
    console.log(a.dataset.test);//输出“123”
    console.log($("#a").data("test"));//输出“456”
    a.dataset.test="456";//此时element中data-test="456"
    $("#a").attr("data-test","789");//此时element中data-test="789"
    console.log($("#a").data("test"));/输出“456”
  });

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