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

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

例子如下：

<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"); //打空格的选择器
var $t_b = $(".test:hidden");  //不带空格的选择器
var len_a = $t_a.length;
var len_b = $t_b.length;
console.log(len_a) // 输出 4
console.log(len_b) // 输出 3

$(".test :hidden") 是选取样式为test的元素下的所有隐藏元素 (带空格)

$(".test:hidden") 是选取样式为test的元素的隐藏元素 (不带空格)

注意区分 空格 和 > 的区别
$("div span") 选取<div> 里面所有的<span>元素
$("div > span") 选取<div>元素下元素名是<span>的子元素