jQuery data()函数应用_jqda-优快云博客

本文链接：https://blog.youkuaiyun.com/xuzengqiang2/article/details/42493977

本文介绍了如何使用jQuery的data()方法替代HTML中的自定义属性，以保持代码整洁。并通过实例展示了如何利用此方法实现文本框焦点事件的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们经常会用到在html标签中加上自定义属性,用来记录一些需要用到的属性，然后利用jQuery的attr方法获取对应的值从而进行其它操作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试用例</title>
<style type="text/css">
	*{margin:0px;padding:0px;font-family:微软雅黑;font-size:9pt;}
</style>
<script type="text/javascript" src="jquery-1.9.1.js"></script> 
</head>
<body>
	<input type="text" class="test" data_link_id="1002"/>
</body>

<script type="text/javascript">
jQuery(document).ready(function(){
	var dataId=$(".test").attr("data_link_id");
	alert(dataId);
});
</script>
</html>

但是这样写就会觉得很乱，我们其实有更好的办法，怎么说，可以利用jQuery的data()方法：

data(name,value);他可以返回指定元素上存储的相应的名字的数据。他不会在HTML标签中增加任何自定义的属性，而是把数据以隐藏的方式设置的，这样写HTML就很干净了。

用途：经常用于jQuery UI设计。

下面用这个方法来实现一个比较常见的问题。

我们可能有这么一个需求：当文本框获取焦点的时候弹出一个隐藏层，然后当失去焦点的时隐藏该层、但点击在层上的时候不能隐藏。由于点击在层上的时候也属于失去焦点，这样的话也会隐藏层，这个时候我们考虑使用data()来处理：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试用例</title>
<style type="text/css">
	*{margin:0px;padding:0px;font-family:微软雅黑;font-size:9pt;}
	.hidden_div{height:300px;width:200px;border:1px solid #AFAFAF;background:#FFFFFF;position:absolute;left:10px;
	top:32px;display:none;}
	.content{width:200px;height:300px;background:#EFEFEF;}
</style>
<script type="text/javascript" src="jquery-1.9.1.js"></script> 
</head>
<body>
	<input type="text" class="test" style="width:200px;height:20px;border:1px solid #3399CC;
	margin-left:10px;margin-top:10px"/>
	<div class="hidden_div">
		<div class="content">
		</div>
	</div>
</body>

<script type="text/javascript">
jQuery(document).ready(function(){
	var $test=$(".test"),
		$hiddenDiv=$(".hidden_div");
	$hiddenDiv.data("hidden",1);
	$test.data("hidden",1);
	$test.focus(function(){
		$hiddenDiv.slideDown(100);
	});
	$(window).bind("click",function(event){
		var $target=$(event.target);		
		if($target.data("hidden") == 1) return false;
		parents=$target.parents();
		for(var i=0,maxLen=parents.length;i<maxLen;i++){
			var hidden = $(parents[i]).data("hidden");
			if(hidden == 1) return false;
		}
		$hiddenDiv.slideUp(100);
	});
});
</script>
</html>