H5-data属性的一个问题

关于前端存数据的问题，前面写过一个博客：前端页面存取数据
看个例子：
  
<!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
posted @ 2016-10-13 10:14  小虫1  阅读(1372)  评论(0)    收藏  举报