JQuery选择器中含有空格的注意事项

选择器中的空格也是不容忽视的，多一个空格或少一个空格也许会得到截然不同的结果。

看下面这个例子，它的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 $t_a = $('.test :hidden');         //带空格的JQuery选择器
var $t_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 $t_a = $('.test :hidden');      //带空格的

以上代码是选取class为"test"的元素里面的隐藏元素。

而代码：

var $t_b = $('.test:hidden');    //不带空格的

则是选取隐藏的class为"test"的元素。

转自：http://blog.sina.com.cn/s/blog_4f925fc30100l4te.html