使用jquery的data()方法与attr()方法修改data-*的区别

2016年3月29日2点32分.js

<h1 data-name="zqq">Hello</h1>
    <h2 data-name="zqq">World</h2>
    <script type="text/javascript">
        console.log('======h1默认值======');
        console.log('data方法获取',$('h1').data('name'));//zqq
        console.log('attr方法获取',$('h1').attr('data-name'));//zqq
        console.log('======使用data()方法修改h1======');
        $('h1').data('name','yfx');
        console.log('data方法获取',$('h1').data('name'));//yfx
        console.log('attr方法获取',$('h1').attr('data-name'));//zqq

        console.log('======h2默认值======');
        console.log('data方法获取',$('h2').data('name'));//zqq
        console.log('attr方法获取',$('h2').attr('data-name'));//zqq
        console.log('======使用attr()方法修改h2======');
        $('h2').attr('data-name','yfx');
        console.log('data方法获取',$('h2').data('name'));//zqq
        console.log('attr方法获取',$('h2').attr('data-name'));//yfx

        //由此可见
        //(1)使用data()方法进行修改,只对使用data()方法进行获取才有效
        //(2)使用attr()方法进行修改,只对使用attr()方法进行获取才有效
        //(3)使用data()方法进行修改,不会影响DOM结构,但使用attr()方法则会影响
        //(4)为了便于调试,建议使用attr修改;为了系统安全,建议使用data方法修改
    </script>