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 ...
随机推荐
- 用2D动画做遮罩
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- meta标签属性总结
一.常见name属性.不同参数含义 meta标签的name属性语法格式是: <meta name="参数" content="具体的参数值"> 其中 ...
- 对RabbitMQ.Client进行一下小小的包装，绝对实用方便
RabbitMQ是一个老牌的非微软的消息队列组件,一般来说应该能满足中小型公司对消息队列生产的需求,平时我们在.NET开发环境下运用它是可能会需要RabbitMQ.Client的SDK库,此库是官网提 ...
- [原创]CentOS下Radius服务器搭建
一. 实现环境: 1.系统:CentOS release 6.6 (Final) 2.需要软件包: 1) freeradius-2.1.12-6.e16.x86_64 freeradius-m ...
- cuda学习2-block与thread数量的选取
由上一节可知,在main函数中,cuda程序的并行能力是在add<<<N,1>>>( dev_a, dev_b, dev_c )函数中体现的,这里面设置的是由N个b ...
- 纯CSS3向右循环闪过效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 对pathtracing的一些个人理解
本人水平有限,若有错误也请指正~ 上面说到pathtracing(pt)的一些优点和缺点,优点即其实现很简单,这就是大概为什么当今市面上流行的很多渲染器如今都相继采用pathtracing算法为核心进 ...
- javaScript 设计模式系列之二：适配器模式
介绍 适配器模式将一个类的接口转接成用户所期待的,有助于避免大规模改写现有客户代码. In software engineering, the adapter pattern is a softwar ...
- MySql俩种分页区别(注意)
注意俩个分页的区别哦~ SELECT * FROM city LIMIT 2 OFFSET 1; 从第二条记录开始 取二条记录 如下: SELECT * FROM city LIMIT 3,2; 从第 ...
- 使用外部容器运行spring-boot项目：不使用spring-boot内置容器让spring-boot项目运行在外部tomcat容器中
前言:本项目基于maven构建 spring-boot项目可以快速构建web应用,其内置的tomcat容器也十分方便我们的测试运行: spring-boot项目需要部署在外部容器中的时候,spring ...