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

<!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. 联赛前集训日记Day3

    考试 竟然出了道莫比乌斯函数的应用?? 简直没法玩 刷题 莫比乌斯函数摆在面前,咋能很快改完啊 生活 GGGGGGGGGGG 自己浪过头了,开回家一周 这车翻得猝不及防,然而自己作的,自己受,只是给别 ...

  2. 神奇的幻方 noip2015day1 T1

     题目描述 Description 幻方是一种很神奇的N∗N矩阵:它由数字 1,2,3, … … ,N∗N构成,且每行.每列及两条对角线上的数字之和都相同. 当N为奇数时,我们可以通过以下方法构建一个 ...

  3. nyoj_524_A-B Problem_201312012035

    A-B Problem 时间限制:1000 ms  |           内存限制:65535 KB 难度:3   描述 A+B问题早已经被大家所熟知了,是不是很无聊呢?现在大家来做一下A-B吧. ...

  4. [bzoj2599][IOI2011]Race_树上点分治

    Race bzoj-2599 题目大意:询问一颗树上最短的.长度为k的链,边有边权,n个节点. 注释:$1\le n \le 2\cdot 10^5$,$1\le k \le 10^6$. 想法:树上 ...

  5. Go语言基础介绍

    Go是一个开源的编程语言.Go语言被设计成一门应用于搭载Web服务器,存储集群或类似用途的巨型中央服务器的系统编程语言.目前,Go最新发布版本为1.10. Go语言可以运行在Linux.FreeBSD ...

  6. MVC.Net：将Reponse Redirect从Get变为Post

    在我们使用Response.Redirect命令的时候,有时候希望以POST的方式将参数传递过去.那么Redirect支持这种做法吗?答案是不支持... ======= 怎么办呢? ======= 我 ...

  7. 中国银联mPOS通用技术安全分析和规范解读

    mPOS是近年出现并得到迅速发展的一种新型受理产品,不少机构和生产企业进行了各种形式的试点. 因为mPOS引入了手机.平板电脑等通用智能移动设备.并通过互联网进行信息传输.因此其安全特点与传统银行卡受 ...

  8. linux 进程通信之 共享内存

    共享内存是被多个进程共享的一部分物理内存.共享内存是进程间共享数据的一种最快的方法.一个进程向共享内存区域写入了数据,共享这个内存区域的全部进程就能够立马看到当中的内容. 关于共享内存使用的API k ...

  9. android 音乐播放器总结

    学习从模仿開始 一个星期完毕的音乐播放器基本功能,具有下一首,上一首,暂停和随机.顺序和单曲等播放.以及保存上一次播放的状态,缺少了歌词显示功能.使用了andbase框架的欢迎动画和界面title. ...

  10. 深入剖析Android四大组件(一)——Activity生命周期具体解释

    1.管理Activity的生命周期 不管是正在执行的Activity还是没有执行的Activity,它们都接受Android的框架管理,这使得Activity处于不同的生命周期. ①Activity的 ...