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. Python爬虫一：爬取上交所上市公司信息

    前几天领导让写一个从新闻语料中识别上市公司的方案.上市公司属于组织机构的范畴,组织机构识别属于命名实体识别的范畴.命名实体识别包括人名.地名.组织机构等信息的识别. 要想从新闻语料中识别上市公司就需要 ...

  2. 原生JS Ajax 请求

    var username = document.getElementById('username').value; var password = document.getElementById('pa ...

  3. 【JavaScript你需要知道的基础知识~】

    最近开始学习JavaScript,整理了一些相关的基础知识 JS注释方式:// 单行注释(Ctrl+/ )/* 段落注释(Ctrl+shift+/ )*/ [JavaScript基础]JavaScri ...

  4. Python下划线的使用

    References: [1]. http://python.jobbole.com/81129/ 本文将讨论Python中下划线(_)字符的使用方法.我们将会看到,正如Python中的很多事情,下划 ...

  5. MySQL高可用方案MHA自动Failover与手动Failover的实践及原理

    集群信息 角色                             IP地址                 ServerID      类型 Master                     ...

  6. 教育类APP开发现新增长，多款APP该如何突围？

    "十二五"以来,国家共出台相关的重大教育政策文件741个,而进入到"十三五"时期教育领域综合改革深入推进的关键期,不断促进教育现代化的实现.加快迈入人力资源强国 ...

  7. AjaxPro.AjaxMethod 简单应用,

    用AjaxPro无刷新实现站内信息实时提示功能,用AjaxPro.2.dll实现表数据绑定和无刷新分页 首先,必不可少的就是dll-----AjaxPro.2 下载地址:http://down7.pc ...

  8. haproxy内存管理-free_list原理

    haproxy的内存管理中,通过pool_head->free_list,存储空闲内存块,free_list是个二级指针,却把空闲内存块都串了起来,没有用next,pre之类的指针.怎么实现的? ...

  9. web—URL不同形式地址的问题

    浏览网页时,不同的网站有不同的URL显示方式. 第一种形式: http://www.cnblogs.com/sylarmeng/p/6738695.html 具体的文章用数字(或组合字母)字符串来标识 ...

  10. Spring component-scan 的逻辑 、单例模式下多实例问题、事务失效

    原创内容,转发请保留:http://www.cnblogs.com/iceJava/p/6930118.html,谢谢 之前遇到该问题,今天查看了下 spring 4.x 的代码 一,先理解下 con ...