data自定义属性在jQuery中的用法
（1）如果在HTML文档中设置的data-自定义属性的单个字符串的名称的属性中若有大写值，在js文件中获取时只能用小写的形式获取。如：
HTML中data-Role，获取当时为$(node).data(“role”);
（2）如果在HTML中设置data-role和data-Role是一样的，html属性不区分大小写。然后我们从验证结果中可以看出，js只会找到第一个与其匹配就直接返回。
（3）如果用js来设置data属性，那么如果你定义的是大写的格式，则访问也必须是大写的形式。
$(“.test”).data(“UP”,123); console.log($(“.test”).data(“UP”));//返回123 console.log($(“.test”).data(“up”));//返回undefined
（4）如果我们就是想要data-Role属性，则可以使用第三种用法：
$(“.test”).data(“Role”,2); console.log($(“.test”).data(“Role”));//输出会返回2
实验代码如下：
- <body>
- <div class=“test” data-role=“1” data-Role=“2” data-then-value=“3” data-options=‘{“name” : “john”}’></div>
- </body>
- </html>
- <script src=“jquery-1.11.3.js”></script>
- <script>
- $(function() {
- console.log($(“.test”).data(“role”));
- console.log($(“.test”).data(“Role”));
- console.log($(“.test”).data(“thenValue”));
- console.log($(“.test”).data(“thenvalue”));
- console.log($(“.test”).data(“options”));
- $(“.test”).data(“UP”,123);
- console.log($(“.test”).data(“UP”));
- console.log($(“.test”).data(“up”));
- </script>
最后讲一下data()和attr()的区别：
（1） 是否需要传参：
data() 可以不传入参数，这使获得的是一个js对象，就算你在html中没有设置任何data自定义属性时，获得的也是一个对象。
而attr()必须要传入参数。
console.log($(“.test”).attr(“data-role”));//输出为2，设置了data-role=”2″
如果不设置参数就会报错：
（2）获取得到的数据的类型不同。
data获取到的是对应设置的类型值， attr方法获取得到的数据类型是字符串（String）型。
（3）对于data方式获取到的值，若我们用一个对象来接收它，那么就可以直接操作这个对象（设置值或获取值），但是attr方式获取的值却不能。
（4）data-attribute属性会在页面初始化的时候放到jQuery对象中，被缓存起来，而attr方法却不会。
腾讯云开发者
