js 和 jq 获取自定义data属性

/*js*/
    <div id="mydiv" data-id="123" data-myname='abby'></div>
var mydiv = document.getElementById('mydiv');
        /*获取*/
        /*方法一*/
        console.log(mydiv.getAttribute('data-id'));
        console.log(mydiv.getAttribute('data-myname'));
        /*方法二*/
        console.log(mydiv.dataset.id);
        console.log(mydiv.dataset.myname);
        /*设置值*/
        mydiv.dataset.age = '21';
        mydiv.dataset.birthDay = '1996-09-03'; //使用驼峰式对应的属性为data-birth-day
        for (var i = 0; i < mydiv.attributes.length; i++ ) {
            console.log(mydiv.attributes[i].nodeName + ":" + mydiv.attributes[i].nodeValue);
        }

/*jq*/
    <div id="mydiv2" data-id="123" data-myname='abby'></div>
        /*获取*/
        /*方法一*/
        console.log($('#mydiv2').data('id'));
        console.log($('#mydiv2').data('myname'));
        /*方法二*/
        console.log($('#mydiv2').attr('data-id'));
        /*设置*/
        $('#mydiv2').data('birthDay','1996-09-03'); //这个并不会影响到dom元素上的data-*属性的设置，data()的本质其实是讲一个"cache"附加到了对象上，并使用了一个特殊的属性名称
        console.log(mydiv2.attributes);

总结：
js：用getAttribute(),dataset()的方法获取，可以用dataset()来设置属性
jq：用data(),attr()方法获取，data()并不能设置属性