在开发的过程中，我们可以在html标签中加入自定义属性 data-xx 来存放我们需要的数据，如果我们想动态的添加data-xx属性，在jQuery中有两种方法可以使用.data()，但他们又存在区别，如果使用不慎，还可能会造成意想不到的bug。
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</style>
</head>
<body>
<div data-id="1234" id="app"></div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
<script>
var getAttr1 = $("#app").attr("data-id");
var getData1 = $("#app").data("id");
console.log(getAttr1); //1234
console.log(getData1); //1234
/*attr()设置*/
$("#app").attr("data-id", "5678");
var getAttr2 = $("#app").attr("data-id");
var getData2 = $("#app").data("id");
console.log(getAttr2); //5678
console.log(getData2); //1234
/*data()设置 注意要想出以下效果，先要注释掉上边attr()方法的代码*/
$("#app").data("id","5678");
var getAttr3 = $("#app").attr("data-id");
var getData3 = $("#app").data("id");
console.log(getAttr3); //1234
console.log(getData3); //5678
</script>
</body>
</html>
注意要想出效果，先要注释掉上边attr()方法的代码 出现上述问题的代码是因为attr()与data()方法存在原理上的区别：
1、attr()方法原理是改变DOM元素的值。
attr()方法直接改变DOM元素上的属性值:
/*data()设置*/
$('#app').attr('data-id', '5678');
var getAttr2 = $('#app').attr('data-id');
var getData2 = $('#app').data('id');
console.log(getAttr2); //5678
console.log(getData2); //1234
2、data()方法原理是jquery对象的值。
data()方法不会直接改变DOM元素上的属性值，我们观察元素发现：
/*data()设置*/
$('#app').data('id','5678');
var getAttr3 = $('#app').attr('data-id');
var getData3 = $('#app').data('id');
console.log(getAttr3); //1234
console.log(getData3); //5678
