关于前端存数据的问题,前面写过一个博客:前端页面存取数据
看个例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div data-shopId="6">woshidiv</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('div').click(function(){
console.log($(this).data('shopId'));
})
</script>
</body>
</html>

  

点击按钮,打印出“undefined”。查了资料发现:属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符(w3cshool)。
问题就在这里。
那如果属性名中有大写呢?chrome浏览器会自动转换为小写。
如果使用jquery的data()方法存数据,则不会有这个问题:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>woshidiv</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
//并不会给html元素增加属性
$('div').data('shopID','1'); console.log($('div').data('shopID'));
</script>
</body>
</html>

  

上面的例子可以打印出1

H5-data属性的一个问题的更多相关文章

  1. Vue之vue中的data为什么是一个函数+vue中路径别名alias设置

    问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...

  2. JS组件系列——使用HTML标签的data属性初始化JS组件

    前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...

  3. 【wpf】Path画扇形以及Path的Data属性的理解

    <Path x:Name="PathFillColor" Fill="{TemplateBinding Property=Button.Background}&qu ...

  4. HTML data属性简介以及低版本浏览器兼容算法

    实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...

  5. data属性

    本框架内置组件以及部分插件可以通过data属性来初始化并使用,通常通过data-toggle来调用API(toggle是触发器的意思,例如我们创建一个navtab标签可以通过为a的data-toggl ...

  6. HTML 5:你必须知道的data属性

    原文:All You Need to Know About the HTML5 Data Attribute 译文:你必须知道HTML 5 的Data属性 译者:dwqs HTML 5的Data属性可 ...

  7. linq to sql用partial扩展属性,创建一个部分类(用于多表连接)

    1.在窗体中创建dataGridView显示表: using System; using System.Collections.Generic; using System.ComponentModel ...

  8. Intent的属性及Intent-filter配置——实例Action、Data属性启动系统Activity

    一旦为Intent同时指定了Action.Data属性,那么Android将可根据指定的数据类型来启动特定的应用程序,并对指定数据类型执行相应的操作. 下面是几个Action属性.Data属性的组合. ...

  9. Bootstrap入门(二十四)data属性

    Bootstrap入门(二十四)data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码.这是 Bootstrap 中的一 ...

  10. ajax data属性传值的方式总结

    在和后台同事对接口的时候,有一个小问题一直困扰着我.那就是用ajax请求后台接口数据,需要用data属性传值的时候,data属性传值的方式感觉没有统一用一种方式. 后来仔细想想,其实哪种方式都可以,主 ...

随机推荐

  1. hdu 3572 最大流判断满流

    #include<stdio.h> #include<string.h> #include<queue> using namespace std; #define ...

  2. nyoj 309

    #include<stdio.h> #include<stdlib.h> #define N 1100 int c[N]; int main() { int l,n,i,m,a ...

  3. N - Corporate Identity

    Beside other services, ACM helps companies to clearly state their “corporate identity”, which includ ...

  4. 洛谷—— P1077 摆花

    https://www.luogu.org/problem/show?pid=1077 题目描述 小明的花店新开张,为了吸引顾客,他想在花店的门口摆上一排花,共m盆.通过调查顾客的喜好,小明列出了顾客 ...

  5. Mac下使用OpenMP

    Mac下使用OpenMP,修改Build Options 下面的compiler for c/c++/objective-C 为 LLVM GCC 4.2 - Language 则可以找到Enable ...

  6. MVC.Net:Razor指定模板

    在MVC.Net开发中,我们通常会在_ViewStart.cshtml中指定一个默认的模板,在文件开头输入如下代码: @{ Layout = "~/Views/Shared/[自己定义的模板 ...

  7. 豆瓣 jsonp 请求数据 并分页

    豆瓣分页 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 ...

  8. keras 与tensorflow 混合使用

    keras 与tensorflow 混合使用 tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > t ...

  9. 获取url地址

    用JS获取地址栏参数的方法(超级简单) 采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new Reg ...

  10. 【iOS】代理传值与块代码传值

    主线程与子线程常常须要进行数据的传递.不同的类之间,不同的控制器之间都须要. 并且常常须要监听一个动作的完毕.而后才去做对应事件. (代理是一对一的关系). 一.代理传值 代理是一种设计模式. iOS ...