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

<!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. 关于卷积网络以及反卷积网络shape的计算

    CNN的计算方式: w1 = (w - F_w + 2p) / s_w + 1 h1 = (h - F_h + 2p) / s_h + 1 其中 w, h 分别为上一层的宽高, Filters(ker ...

  2. Win10中如何把语言栏缩到系统托盘

    Win10中如何把语言栏缩到系统托盘 原来语言栏是在系统托盘中的,右键点击,然后选择“显示语言栏”,就不能缩回去了: 后来在“控制面板\时钟.语言和区域\语言\高级设置”里面,有一个选项: “使用桌面 ...

  3. 【自己定义控件】android事件分发机制

    自己定义Viewgrou中我们或许会常常碰到这种情况,2个子控件的事件冲突导致滑动没实用了.滑动反应非常慢,点击没用了,要划非常多次才移动一点点等等.或许我们第一反应就是百度,google去搜索下答案 ...

  4. 编程算法 - 和为s的连续正整数序列 代码(C)

    和为s的连续正整数序列 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 输入一个正数s, 打印出全部和为s的连续正数序列(至少含有两个数). 起 ...

  5. Android按键添加和处理的方案【转】

    本文转载自:http://www.cnblogs.com/skywang12345/p/3142851.html Android按键添加和处理的方案  版本号 说明 作者 日期  1.0  Andro ...

  6. bzoj1231 [Usaco2008 Nov]mixup2 混乱的奶牛——状压DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1231 小型状压DP: f[i][j] 表示状态为 j ,最后一个奶牛是 i 的方案数: 所以 ...

  7. Linux防火墙设置

    对于Internet上的系统,不管是什么情况都要明确一点:网络是不安全的.因此,虽然创建一个防火墙并不能保证系统100%安全,但却是绝对必要的. Linux提供了一个非常优秀的防火墙工具-netfil ...

  8. 运行项目psychologicalTest

    [mysql] # 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] #设置3306端口 port = 3306 # 设置mysql的安装目录 b ...

  9. C# Event.ClickCount 解决垃圾鼠标带来的烦恼

    今天调试遇到个Bug,百思不得其解的是在自己的设备上重来不重现,在测试机上百分百重现,如下: 问题:点击一次Button执行两次Click操作 分析:看Log的确是执行了两次,就像真的点击了两次But ...

  10. vue ssr 项目改造经历

    vue ssr 项目改造经历 由于工作项目需求,需要将原有的项目改造,vue ssr 没有用到nuxt,因为vue ssr更利于seo,没办法,一个小白的改造经历, 首先说明一下,小白可以借鉴,高手也 ...