Jquery中文网 www.jquerycn.cn
Jquery中文网 >  前端编程  >  HTML5教程  >  正文 浅谈H5的data-*中容易被忽略的一个小问题

浅谈H5的data-*中容易被忽略的一个小问题

发布时间:2020-05-14   编辑:www.jquerycn.cn
jquery中文网为您提供浅谈H5的data-*中容易被忽略的一个小问题等资源,欢迎您收藏本站,我们将为您提供最新的浅谈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值后可以看到如下结果:

总结: 遵循标准写法

1. data-* 所有字符要小写。

2.多个单词采用横线隔开,例如data-other-id => otherId 读出来的属性会去掉横线并将首字母大写。

以上就是浅谈H5的data-*中容易被忽略的一个小问题的详细内容,更多请关注jQuery中文网其它相关文章!

-->
  • 本文转载于:博客园,如有侵犯,请联系jquerycn@qq.com删除
  • 您可能感兴趣的文章:
    如何设计网站结构与地址URL?
    从JavaScript 到 JQuery (1)学习小结
    jquery ajax 调用失败的原因示例介绍
    jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
    电商网站怎么规划好网站内部链接详解
    (图)php模板引擎Smarty详细介绍
    批处理教程之FOR的参数/F之delims详解
    WordPress JQuery处理沙发头像
    JQuery中html()方法使用不当带来的陷阱
    JavaScript获取onclick、onchange等事件值的代码

    [关闭]