浅谈H5的data-*中轻易被疏忽的一个小问题【html5教程】,H5,data-*

本篇文章给人人带来的内容是浅谈H5的data-*中轻易被疏忽的一个小题目。有肯定的参考价值，有须要的朋侪能够参考一下，愿望对你们有所协助。

H5添加了data-*属性，异常轻易

但常常疏忽小写的题目， H5请求属性名悉数小写，驼峰式定名的习气掉坑了

测试代码以下：

<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn2").click(function(){
    alert($("div").data("id"));
    alert($("div").data("Id"));
    alert($("div").data("otherId"));
    alert($("div").data("OtherId"));
    alert($("div").data("OTHERID"));
    var datas = $("div").data();
  });
});
</script>
</head>
<body>

<button id="btn2">alert</button>
<div  data-id="小写id" data-Id="大写ID" data-otherId="驼峰id" data-other-id="横线id"></div>
</body>
</html>

alert出来的值出人意料，经由过程data()要领猎取一切data值后能够看到以下效果：