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. 使用NetronGraphLib类库开发Qfd质量屋编制工具

    前言 可执行文件下载 QfdHouse-exe.zip 因项目需要做了一个质量功能配置(Quality Function Deployment 简称Qfd)的质量屋编制工具软件,本软件是在发布一个免费 ...

  2. jQuery选择器中的空格问题

    前几天就遇到过这样的问题,明明我用的是('tr :even').css('background','#ccc')想改变表格中行的背景色,反复试了还是没改变.还问了度娘还是没找到原因所在(当时问题描述的 ...

  3. Servlet 详解

    1.什么是 Servlet? Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序 ...

  4. javaScript-什么是变量?

    什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX1就是盒子的名 ...

  5. ajax传数组到后台，后台springmvc接收数组参数

    var   ids= new Array();  $("input[class='detailCheck']:checked").each(function(i,k){   var ...

  6. 【小练习05】HTML+CSS--淘宝商铺小页面

    要求实现如下效果图: 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  7. python爬虫从入门到放弃（九）之 实例爬取上海高级人民法院网开庭公告数据

    通过前面的文章已经学习了基本的爬虫知识,通过这个例子进行一下练习,毕竟前面文章的知识点只是一个 一个单独的散知识点,需要通过实际的例子进行融合 分析网站 其实爬虫最重要的是前面的分析网站,只有对要爬取 ...

  8. 【Spark2.0源码学习】-10.Task执行与回馈

         通过上一节内容,DriverEndpoint最终生成多个可执行的TaskDescription对象,并向各个ExecutorEndpoint发送LaunchTask指令,本节内容将关注Exe ...

  9. shared_ptr注意点

    1.原始指针不能直接使用赋值运算符对shared_ptr进行赋值运算 std::shared_ptr<int> p; p= ); //error p.reset(); //success ...

  10. JQuery 实现返回顶部

    1.添加html <div id="back-to-top"> <a href="javascript:;" title="返回顶部 ...