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是不会改变的。