html 5 data-* (dataset) 属性和 jquery data方法比较
一些文章在介绍html 5 data-* (dataset)属性时,会提到jquery的data方法,认为data方法能够很好的利用html 5的这个特性。但实际上,二者的兼容性是很差的。下面给出一段测试代码:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <div id="e" data-v="origin"></div> <script> var log = function(msg){console.log(msg);}; var print = function(){ log("jquery.data : " + je.data("v")); log("native dataset : " + ne.dataset["v"]); log("--"); } var je = $("#e"); var ne = document.getElementById("e"); log("origin value"); print(); log("set with native dataset"); ne.dataset["v"] = "native"; print(); /* reset */ ne.dataset["v"] = "origin"; log("set with jquery data"); je.data("v", "jquery"); print(); /* reset */ je.data("v", "origin"); </script>
在console的输出结果如下:
origin value
jquery.data : origin
native dataset : origin
--
set with native dataset
jquery.data : origin
native dataset : native
--
set with jquery data
jquery.data : jquery
native dataset : origin
--
测试的最开始,data()和dataset从html中读取的data-v值是一致的,但是当对值进行修改时,结果就不一样了。另外,通过审查元素可以发现:通过jquery.data方法设置data属性不会修改DOM;而通过dataset方法则会同步修改DOM。或许可以认为,jquery data的实现方式没有遵循html 5标准。
鉴于这种情况的存在,在一个项目中应该不要混用两种方法。
欢迎转载,同时请注明出处