html5的自定义data属性相信大家都不会陌生，有了它你可以绑定所需的数据到指定元素上。然后通过jquery设置、获取数据，简直开心的不行啊。
想到设置、获取元素属性值，大家一定首先想到了jquery的.attr()方法，但是你一定知道jquery还有个.data()的方法。本人以前一直萌(傻)萌(傻)哒(的)以为这两个方法在处理data属性过程中实现的效果是一样的，只不过.data()方法官方更推荐使用(看名字就感觉人家是正规军)。但后来本人在做项目的过程中发现，这两种方法处理data属性并不相同(想想也是，要是一样，还搞个data干毛)。废话少说，下面来点干的：
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 5 6 <script> 7 $(function(){ 8 $("#btn1").click(function(){ 9 $("div").attr("data-my-value", "使用attr改变的数据"); 10 $("p").text("使用attr设置数据成功"); 11 }); 12 $("#btn2").click(function(){ 13 $("div").data("myValue", "使用data改变的数据"); 14 $("p").text("使用data设置数据成功"); 15 }); 16 $("#btn3").click(function(){ 17 var v = $("div").attr("data-my-value"); 18 $("p").text("使用attr获取数据："+v); 19 }); 20 $("#btn4").click(function(){ 21 var v = $("div").data("myValue"); 22 $("p").text("使用data获取数据："+v); 23 }); 24 $("#btn5").click(function(){ 25 $("div").data("person", {age:12, name:"wang"}); 26 $("p").text("使用data增加属性person成功"); 27 }); 28 $("#btn6").click(function(){ 29 console.log($("div").data()); 30 }); 31 }); 32 </script> 33 </head> 34 35 <body> 36 <button id="btn1">1.使用attr设置</button> 37 <button id="btn2">2.使用data设置</button> 38 <button id="btn3">3.使用attr获取</button> 39 <button id="btn4">4.使用data获取</button> 40 <button id="btn5">5.使用data增加person属性</button> 41 <button id="btn6">6.控制台打印data</button>
42 <div data-my-value="服务器渲染数据"></div> 43 <p></p> 44 </body> 45 </html>
这段代码是不是简单的不行了，下面我们用这段代码说明一下.attr()和.data()在处理data属性时的不同之处：
这里我们给div增加了“data-my-value”属性，很多时候data属性的数据会在页面加载时由服务器获取，这里我们通过构建DOM时将“data-my-value”赋值为“服务器渲染数据”的方法模拟服务器数据渲染。
遇到问题，肯定要首先查官方手册了，通过查询手册和在Stack Overflow查资料我总结了如下几点(有不对的地方欢迎大家指正)：
总之，.attr()方法处理data属性与标准属性相同；使用.data()方法的整个过程中，jquery一直操作的是这个与元素关联的对象，和DOM中元素本身的属性无关。
文中有不对的地方欢迎大家多多指正。
参考：
http://api.jquery.com/attr/
https://api.jquery.com/data/
https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute
https://stackoverflow.com/questions/7261619/jquery-data-vs-attr
原文：http://www.cnblogs.com/whyly/p/7241321.html