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-*容易忽略的问题的更多相关文章

  1. Vue入门到精通

    Vue.js - Day1 课程介绍 前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...

  2. jQuery与ajax 基础运用

    jQuery是一个轻量级js框架,使用方便快捷,更是封装ajax处理方法,如$.load() $.get() $.post() 等 但最常用的方法还是$.ajax() 一.一般的格式为 $.ajax( ...

  3. ASP.Net MVC开发基础学习笔记：五、区域、模板页与WebAPI初步

    一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新 ...

  4. Code First ：使用Entity. Framework编程(5) ----转发 收藏

    第五章 对数据库映射使用默认规则与配置 到目前为止我们已经领略了Code First的默认规则与配置对属性.类间关系的影响.在这两个领域内,Code First不仅影响模型也影响数据库.在这一章,你将 ...

  5. web api 初体验之 GET和POST传参

    上一篇我们讲到了web api跨域的问题 它几乎是每一个用web api的人都需要去解决的问题,不然都没法测试.接下来会遇到的问题就是传参了.还是用js前台调用服务的方式. GET 方式 get方式传 ...

  6. 《你必须知道的.NET》读书笔记：从Hello World认识IL

    通用的语言基础是.NET运行的基础,当我们对程序运行的结果有异议的时候,如何透过本质看表面,需要我们从底层来入手探索,这时候,IL便是我们必须知道的基础. 一.IL基础概念 1.1 什么是IL? IL ...

  7. Web Api中的get传值和post传值

    GET 方式 get方式传参 我们一般用于获取数据做条件筛选,也就是 “查” 1.无参 var look = function () { $.ajax({ type: "GET", ...

  8. MVC4 WEBAPI(一)使用概述

    所谓概述,也就是总结一些WEB API常用的使用用法.MVC APIWEB是一个轻量级的服务接口,完全符合RestFul框架设计,每个URL代表一种资源,使用方便,没有WCF那么庞大,但是麻雀虽小五脏 ...

  9. ASP.Net MVC开发基础学习笔记（5）：区域、模板页与WebAPI初步

    一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新 ...

  10. 了解HTML5和“她”的 API (二)

    Communication(通信)     Cross Document Messaging (跨文档消息通信) postMessage API   origin security(源安全) chat ...

随机推荐

  1. DES加密例子

    Java密码学结构设计遵循两个原则: 1) 算法的独立性和可靠性. 2) 实现的独立性和相互作用性. 算法的独立性是通过定义密码服务类来获得.用户只需了解密码算法的概念,而不用去关心如何实现这些概念. ...

  2. struts2.1.6教程十、类型转换

    建立struts2conversion项目,并搭建好struts2的基本开发环境 1.基于Action的直接属性转换 建立t.jsp页面,内容如下: <s:form action="p ...

  3. grant all赋权后mysql.user表权限字段还是N,但能登录和新建表

    grant all赋权后mysql.user表权限字段还是N,但能登录和新建表 grant all privileges on linuxeye.* to linuxeye@'localhost' i ...

  4. jQuery插件 -- 图片随页面滚动fixed

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. poj1379

    poj1379 题意 给出 n 个洞的坐标,要求找到一点使得这一点距离最近洞的距离最远. 分析 通过这道题学习一下模拟退火算法, 这种随机化的算法,在求解距离且精度要求较小时很有用. 简而言之,由随机 ...

  6. Java中设计模式之装饰者模式-3

    装饰者模式: 动态地将责任附加到对象上.若要扩展功能,装饰者提供了比继承更加有弹性的替代方案. 装饰者核心:实现功能组合 继承与组合区别: 继承 继承是给一个类添加行为的比较有效的途径.通过使用继承, ...

  7. Spring的<context:property-placeholder.../>在junit中不起作用，失效，解决方法

    大家都知道,我们使用spring框架的时候喜欢把可以配置的变量放入一个properties配置文件中,然后在spring的applicationContext.xml配置文件中加入配置: <co ...

  8. 跨域请求，jsonp

    其实跨域请求,只需要在请求的url后面加上callback=?即可. 提供以下两种获取跨域的ajax的写法,都是基于jQuery.都已经成功使用,兼容做到ie7,(ie6未测试);案例地址来自豆瓣开放 ...

  9. 搭建arm交叉工具链

    1.将arm-linux-gcc-4.4.3压缩包,拷到home/armtoolchain下,进行压缩. 2.压缩命令:tar -xzvf arm-linux-gcc-4.4.3.tgz,解压后得到了 ...

  10. 初学vitmio，vitmio的环境配置及遇到的坑

    1 到官网或者github下载vitamio 官网地址:https://www.vitamio.org/ github地址:https://github.com/yixia/VitamioBundle ...