有一定基础的前端一定对 jq 中的 attr() 和 data() 方法不陌生，attr() 可以获取 html 元素的属性，其中包括自定义属性（data-xxx）
<div class="test" a="a" data-id="1"></div>
<script>
$('div').attr('a'); // a
$('div').attr('data-id'); // 1
</script>
而 jq 中对获取 data 开头的属性有一个专门的方法 data()
<div class="test" a="a" data-id="1"></div>
<script>
$('div').data('id'); // 1
</script>那么，既然 attr() 和 data() 在对于 data 开头的自定属性的时候没什么区别，不是可以随便用吗，其实不是这样的，我们用下面这个例子来证明
<button class="btn1">点我改变div自定义属性的值</button>
<button class="btn2">点我查看div自定义属性的值</button>
<div class="test"></div>
<script>
var num = 0;
$('.btn1').on('click', function(){
$('div').attr('data-id', ++num);
})
$('.btn2').on('click', function () {
alert($('div').data('id'));
})
</script>点击一次 btn1 再点击 btn2，发现弹出来的是 1，再点击一次 btn1 再点击 btn2，发现弹出来的还是 1，后面再怎么点击 btn2 弹出来都是 1，缓存了？强刷页面再来一次，这次我们连续点击两次 btn1，再点击 btn2，发现弹出的是 2，惊不惊喜，好了？再点击一次 btn1，再点击btn2，弹出的还是 2，到这里估计一些同学还是不相信又去刷新了一次，不管你刷新几次都不会成功的，为什么点击 btn2 弹出的结果不是我们想象中的 ++num，查下文档，data() 不传任何参数会返回当前对象中存储的所有数据，我们来试一下
$('.btn2').on('click', function () {
// alert($('div').data('id'));
console.log($('div').data());
})控制台打印出来的结果是个对象，对象里面存的是 id 这个键和对应的值，不论这个元素上的自定义属性的值怎么变化，打印出来的结果都不会改变，通过 attr() 设置多个 data 开头的自定义属性，通过 data() 方法以对象的方式打印出来
回到上一步，我们点击一次 btn1 再点击 btn2，弹出 1，点击两次 btn1 再点击 btn2，弹出 2，这样我们就能得出结论：通过 attr() 设置元素自定义属性的时候，属性和值是存在 html 中的标签上的，而调用 data() 方法的时候，会找到当前元素上的 data 开头的属性，并以键值对的方式存到对象中，而我们在使用 data() 方法的时候只传入了一个参数或者没有传入参数，这样就无法改变对象中的值，因此不论我们点击多少次的 btn1，再点击 btn2 弹出的都是相同的值
因此获取 attr() 设置的属性值就用 attr() 去取，用 data() 设置的值就用 data() 去取，不要混着用，今天小R就被坑了一把，如有错误的地方，请大家指出，不胜感激
