锋利的jQuery中值得记下的例子(2)

选择器中的空格是不容忽视的，多一个空格或少一个空格也许得到的结果会截然不同的。下面来看一个例子。
先构建如下的HTML代码：

<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>

使用如下的JQuery选择器分别获取它们：

var $test_a = $(".test :hidden");//带空格的jQuery选择器 
var $test_b = $(".test:hidden");//不带空格的jQuery选择器 
var len_a = $t_a.length; 
var len_b = $t_b.length; 
alert("$('.test :hidden') = "+len_a);//输出 4 
alert("$('.test:hidden') = "+len_b);//输出 3

之所以会出现不同的结果，这就是后代选择器和过滤选择器的不同。

var len_a = $t_a.length; // 带空格的 

上面这段代码是选取class为“test”的元素里面的隐藏元素。（后代选择器）

var len_b = $t_b.length; //不带空格

这上面的代码则是选取隐藏的class为“test”的元素