jquery 选择器中含有空格注意

时间：2022-12-18 13:32:26
<!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>

	<title> new document </title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<!--   引入jQuery -->

	<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

	<script type="text/javascript">

		$(function(){

		  //注意区分类似这样的选择器

		  //虽然一个空格，却截然不同的效果.

		   var $t_a = $('.test :hidden');  //选取class为“test”的元素里面的隐藏元素

		   var $t_b = $('.test:hidden');  //选取隐藏的class为“test”的元素

		   var len_a = $t_a.length;

		   var len_b = $t_b.length;

		   alert("$('.test :hidden') = "+len_a);  //输出 7

		   alert("$('.test:hidden') = "+len_b);  //输出 4

		})

	</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 style="display:none;">dd</div>

       <div style="display:none;">ee</div>

	   <div class="test" style="display:none;">dd</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>

</html>

　　

相关文章