jquery 后代选择器与过滤选择器区别

于 2010-04-30 22:22:11 发布 · 237 阅读

文章标签：

#jQuery #JavaScript #ViewUI

jquery 专栏收录该内容

10 篇文章

订阅专栏

本文通过一个具体的示例对比了jQuery中选择器 $('.test:hidden') 的两种不同用法：后代选择器与过滤选择器的区别，并展示了它们在实际应用中的不同结果。

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function(){
		  //注意区分类似这样的选择器
		  //虽然一个空格，却截然不同的效果.
		   var $t_a = $('.test :hidden'); // 后代选择器
		   var $t_b = $('.test:hidden');  //过滤选择器
		   var len_a = $t_a.length;
		   var len_b = $t_b.length;
		   alert("$('.test :hidden') = "+len_a);  //输出 4 
		   $t_a.each(function(){
				alert($(this).text());
		   });
		   alert("$('.test:hidden') = "+len_b);  //输出 3
		   $t_b.each(function(){
				alert($(this).text());
		   });
		})
	</script>
</head>
<body>
	<div class="test">
	   <div style="display:none;">aa</div>
	   <div style="display:none;">bb</div>
	   <div style="display:none;">cc</div>
	   <div class="test" style="display:none;">dd</div>
	</div>
	<div class="test" style="display:none;">ee</div>
	<div class="test" style="display:none;">ff</div>
</body>