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-*容易忽略的问题的更多相关文章
- Vue入门到精通
Vue.js - Day1 课程介绍 前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...
- jQuery与ajax 基础运用
jQuery是一个轻量级js框架,使用方便快捷,更是封装ajax处理方法,如$.load() $.get() $.post() 等 但最常用的方法还是$.ajax() 一.一般的格式为 $.ajax( ...
- ASP.Net MVC开发基础学习笔记：五、区域、模板页与WebAPI初步
一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新 ...
- Code First ：使用Entity. Framework编程(5) ----转发 收藏
第五章 对数据库映射使用默认规则与配置 到目前为止我们已经领略了Code First的默认规则与配置对属性.类间关系的影响.在这两个领域内,Code First不仅影响模型也影响数据库.在这一章,你将 ...
- web api 初体验之 GET和POST传参
上一篇我们讲到了web api跨域的问题 它几乎是每一个用web api的人都需要去解决的问题,不然都没法测试.接下来会遇到的问题就是传参了.还是用js前台调用服务的方式. GET 方式 get方式传 ...
- 《你必须知道的.NET》读书笔记：从Hello World认识IL
通用的语言基础是.NET运行的基础,当我们对程序运行的结果有异议的时候,如何透过本质看表面,需要我们从底层来入手探索,这时候,IL便是我们必须知道的基础. 一.IL基础概念 1.1 什么是IL? IL ...
- Web Api中的get传值和post传值
GET 方式 get方式传参 我们一般用于获取数据做条件筛选,也就是 “查” 1.无参 var look = function () { $.ajax({ type: "GET", ...
- MVC4 WEBAPI(一)使用概述
所谓概述,也就是总结一些WEB API常用的使用用法.MVC APIWEB是一个轻量级的服务接口,完全符合RestFul框架设计,每个URL代表一种资源,使用方便,没有WCF那么庞大,但是麻雀虽小五脏 ...
- ASP.Net MVC开发基础学习笔记（5）：区域、模板页与WebAPI初步
一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新 ...
- 了解HTML5和“她”的 API (二)
Communication(通信) Cross Document Messaging (跨文档消息通信) postMessage API origin security(源安全) chat ...
随机推荐
- 3、J2EE学习推荐书籍
3.J2EE学习推荐书籍 J2EE的学习应该循序渐进,一本好书会很快上手和深入.在学习J2EE之前,应该学好SQL,基本上,程序设计都会跟数据库打交道.如果SQL没学好,就如同房子没有基脚 ...
- EntityFramework6.X之DataAnnotations
DataAnnotations 在web开发中不仅在客户端需要执行验证逻辑,会对会对用户向表单中输入的数据给出一个即时反馈:且在服务器端也需验证逻辑,因为来自网络的信息都是不能信任的.在MVC中通常是 ...
- 【 js 基础 】作用域和闭包
一.编译过程 常见编译性语言,在程序代码执行之前会经历三个步骤,称为编译. 步骤一:分词或者词法分析 将由字符组成的字符串分解成有意义的代码块,这些代码块被称为词法单元. 例子: var a = 2 ...
- The dplyr package has been updated with new data manipulation commands for filters, joins and set operations.（转）
dplyr 0.4.0 January 9, 2015 in Uncategorized I’m very pleased to announce that dplyr 0.4.0 is now av ...
- OAuth 2.0 / RCF6749 协议解读
OAuth是第三方应用授权的开放标准,目前版本是2.0版,以下将要介绍的内容和概念主要来源于该版本.恐篇幅太长,OAuth 的诞生背景就不在这里赘述了,可参考 RFC 6749 . 四种角色定义: R ...
- Vulkan Tutorial 05 逻辑设备与队列
操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 在选择要使用的物理设备之后,我们需要设置一个逻辑设备用于交 ...
- js实现导航菜单栏随着屏幕的滚动进行滚动的效果
$(window).scroll(function () { var $nav = $(".floatingMenu ul li"), length = $nav.length-1 ...
- 对于php内存释放问题
大家在使用PhpExcel类时,当打开一个比较大的excel数据文档,会出现Fatalerror: Allowed memorysize of 67108864 bytes exhausted (tr ...
- PHP实现Collection数据集类及其原理
本文目录 : Collection源码 讲解与例子 ArrayAccess的使用 JsonSerializable的使用 Countable的使用 IteratorAggregate.ArrayIte ...
- 网络安全——一图看懂HTTPS建立过程
关于网络安全加密的介绍可以看之前文章: 1. 网络安全--数据的加密与签名,RSA介绍 2. Base64编码.MD5.SHA1-SHA512.HMAC(SHA1-SHA512) 3. When I ...