HTML5的data-*属性，以及$.data()和$.attr()存取值

1、

<div id="test" data-id="26"><div>

<script type="text/javascript">
    //取值
    var id = $("#test").data("id");
    var id1 = $("#test").attr("data-id"); 

    //存值   
    $("#test").data("id","20");
    $("#test").attr("data-id","20");
</script>

2、利用 dataset API 存取 (DOM对象)

dataset属性的兼容性  Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+

因此，如果要考虑兼容性，可以考虑利用 getAttribute、setAttribute存取dataset

<div id="test" data-id="26" data-max="100" data-min="0" ><div>

<script type="text/javascript">
    //取值
    var data = document.querySelector('#test').dataset;
    var id = data.id;
    var max = data.max;
    var min = data.min;
   
</script>

3、data-*属性存在多个-，使用驼峰命名发存取值

<div id="test" data-id="26" data-class-course="englist" ><div>

<script type="text/javascript">
    //取值
    var data = document.querySelector('#test').dataset;
    var id = data.id;
    var classCourse = data.classCourse;

</script>

4、使用Jquery将json信息转换为对象

<div id="test"  data-value ='{"name":"Englist", "data":"90"}'>
</div>

<script type="text/javascript">
    
    //取值
    var data = $("#test").data("value");
    var name = data.name;
</script>  

5、$.data()和$.attr()

- 从性能的角度来说，建议使用$.data()来进行set和get操作，因为它仅仅修改的Jquery对象的属性值，不会引起额外的DOM操作。

- $.data()和$.attr()应避免混合使用

 

参考博客：

https://blog.csdn.net/cccmercy/article/details/79686577

https://blog.csdn.net/wuxy720/article/details/68928543