HTML5中的data-*属性和jQuery中的.data()方法使用

HTML5中的data-*属性

我们往往会根据需要在HTML标记上添加自定义的属性来存储和操作数据,我们自定义的属性名字也千奇百怪,五花八门。我们可以通过原生的 getAttribute()或jQuery中的.attr()来获取我们自定义的属性。但是前端技术在向着规范化前进。HTML5标准规定,自定义的属性都已data—*开头,这样就区分开了固有属性和自定义属性。HTML代码如下
<div id="testDiv" data-cname="张三" data-e-name="zhangsan" data-myName="my name is zs.">测试在元素上存储一个key-value</div>
$(document).ready(function(){
var el = document.getElementById("testDiv");

console.log(el.dataset.cname);//=>张三
el.dataset.cname = "ZS";//设置值为"ZS"
console.log(el.dataset.cname);//=>"ZS"

console.log("jQuery data:",$("#testDiv").data("eName") );
$("#testDiv").data("eName","abcefg");
console.log("jQuery data:",$("#testDiv").data("eName") );

console.log("遍历testDiv上的自有属性");
$.each(el.dataset,function(key,value){
console.log(key+":"+value);
});

//遍历testDiv上的自有属性
//cname:ZS
//eName:zhangsan 
//myname:my name is zs.
<span style="white-space:pre">	</span> 
});
在获取自定义属性的值时,使用dataset属性,然后通过自定义属性(这时去掉data-前缀)的名称去获取值。dataset是JS5规范中新增加的属性,用于和data-*配合使用。
通过each打印的结果,我们需要注意:
1,如果data-后面包含了“-”,例如 date-e-name,"-"会去掉,并转换成为骆驼峰式的命名 eName。这是因为JSON Object 的key不能包含”-“。
2,如果data-后面的单词有大写,例如 myName,将会转存成小写 myname。这里就不理解为什么会转换成小写了,JSON Object的key是区分大小写的。求高人指定??
3,如果你想删除一个data-*属性,请使用 delete dataset.cname或者dataset.cname=null;

data-*属性看起来很好,但是不幸的是只有在Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+的浏览器中实现了此标准。如果你的脚步需要兼容各主流浏览器的不同版本建议还是使用原生的getAttribute()或jQuery中的.attr()。

jQuery中的.data()

jQuery中的.data()方法作用:在jQuery对象对应的DOM元素上获取或存放key-value对。我们可以通过html5的data-*属性在元素上存取数据,在jQuery也可以通过data()来实现。data()方法有多个重载,传递一个参数是获取value值,传递两个参数是存储或覆盖已存在的值,传递一个JSON Object是在元素上存储或覆盖已存在的多个key-value对。如果通过data() 在元素上存储key-value,value可以是一个对象,而不是像data-*只能存储一个字符串的value。下面给出一个综合示例:
<script id="jquery_183" type="text/javascript" class="library" src="//cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<!DOCTYPE html> 
<html>
	<head>
		
	</head>
	<body>
		<div id="testDiv" data-cname="张三" data-e-name="zhangsan" data-myName="my name is zs.">
			测试在元素上存储一个key-value
		</div>
	</body>
</html>


$(function(){
	
	function printVlaue(){
	
		//通过data()在testDiv元素上存储 {ename:zhangsan} 健/值对。
		$("#testDiv").data("ename","zhangsan");
		//修改data()通过 data-* 属性存储的值
		$("#testDiv").data("cname","我是张三");
	
		console.log( "获取通过data()存储在testDiv元素上的ename值:",$("#testDiv").data("ename") );
		console.log( "获取通过 data-* 存储在testDiv元素上的cname值:",$("#testDiv").data("cname") );
		//$("#testDiv").jQueryremoveAttr("data-"+"abc");
		
		console.log( "获取ename值:",$("#testDiv").data("ename") );
		console.log( "获取cname值:",$("#testDiv").data("cname") )
		
		console.log("删除testDiv元素上 ename 和 cname 键/值对。");
		$("#testDiv").removeData("ename");
		$("#testDiv").removeData("cname");
		
		console.log("输出 eanem 和 canme 对应的值,看是否已经删除");
		console.log( $("#testDiv").data("ename") );
		console.log( $("#testDiv").data("cname") );
		
	
	};
	
	$("<button>获取值</button>").appendTo("body").bind("click",printVlaue);;
	console.log("debug use.");;
	
});
/*
获取通过data()存储在testDiv元素上的ename值: zhangsan
获取通过 data-* 存储在testDiv元素上的cname值: 我是张三
获取ename值: zhangsan
获取cname值: 我是张三
删除testDiv元素上 ename 和 cname 键/值对。
输出 eanem 和 canme 对应的值,看是否已经删除
undefined
张三
*/
从上例中我们可以看出,.data()可以获取通过data-*属性存储的值。但是通过.data()修改data-*属性的值不会显示在HTML标记中,我们只是通过.data()在元素存储了一个新值。.removeData()也不能删除通过data-*存储的数据。由于jQuery是一个通用的JS框架,最浏览器兼容性做的非常好,大多数情况,我们应该通过.data()在元素上存取数据(有一个好处是可以存储一个对象)。如果我们必须通过data-*来存取和修改数据,建议使用JS5的dataset属性,这个属性的兼容问题,我们可以通过写jQuery插件来解决。这是我的插件代码,如下:
	<script id="jquery_183" type="text/javascript" class="library" 
src="//cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<!DOCTYPE html> 
<html>
	<head>
		
	</head>
	<body>
		<div id="testDiv" data-cname="张三" data-e-nAme="zhangsan" data-myName="my name is zs.">
			测试在元素上存储一个key-value
		</div>
	</body>
</html>
$(document).ready(function(){
	function printValue(){

		var $testDiv = $("#testDiv").udDataAttr();
		
		console.log("udDataAttr get()=>",$testDiv.get("cname") );
		$testDiv.set("cname","set 张三");
		console.log("udDataAttr get()=>",$testDiv.get("cname") );
		console.log("打印所有已data-*开头的属性和值=>",$testDiv.dataset());
		
		console.log("udDataAttr get e-name=>",$testDiv.get("e-name") );
		
		 

		//var el = document.getElementById("testDiv");
		//console.log("el.dataset.eName=>",el.dataset.eName);
	};
	
	$("<button>获取值</button>").appendTo("body").bind("click",printValue); 

	console.log("debug use.");
}); 	

(function($,window){
	//user-defined Attribute
	var plugName = "udDataAttr";
	
	$.fn[plugName] = function(){
		var $self = $(this),obj = ($self.length && $self[0].dataset) || null;
		
		return {
			get: function(name){
				return obj===null? $self.attr("data-"+name) : obj[ this._format(name) ];
			},set: function(name,value){
				if(obj === null){
					$self.attr("data-"+name,value);
				}else{
					obj[ this._format(name) ] = value;
				}
				return $self; 	
			},dataset: function(){
				var newObj = {};
				if(obj === null){
					$.each(obj,value){
						newObj[key] = value;
					});
				}else{
					newObj = $self.data(); //获取所有以data-*开头的属性
				}
				
				return newObj;
			}
			/*
			 *	将name转换成dataset可识别的格式。
			 *	例如:e-name 转换成 eName
			 * 	总感觉 _format()的实现不是最优的,求高手给出实现
			 */,_format: function(name){
				console.log("_format old name=>",name);
				name = name.toLowerCase();
				if(name.indexOf('-')>-1){
					var array = name.split('-');
					for(var i=1,len=array.length; i<len; i++){ 
						var v = array[i];
						array[i] = v.substr(0,1).toUpperCase() + v.substr(1,v.length);
						name=array.join("");
					}
				}
				console.log("_format() new name=>",name);
				return name;
			}
		};
		
	};
	

}(jQuery,window));

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法