jQuery中选择器的空格问题

<html>
    <head>
        <title>选择器空格的问题</title>
        <script type="text/javascript" src="jquery.js"></script>
         <script type="text/javascript">
            $(document).ready(function()
            {
                alert("带空格的选择器的长度是："+$(".test   :hidden").length);
                alert("不带空格的选择器的长度是："+$(".test:hidden").length);
            });
         </script>
    </head>
    <body>
        <div class="test">
            <div style="display:none;">我是内部div</div>
            <div style="display:none;">我是内部div</div>
            <div style="display:none;">我是内部div</div>
            <div class="test" style="display:none;">我是内部div</div>
        </div>
        <div class="test" style="display:none;">我是外部div</div>
        <div class="test" style="display:none;">我是外部div</div>
    </body>
</html>

对于上边的这两行来说：

“alert("带空格的选择器的长度是："+$(".test :hidden").length);”的弹出结果为4

“alert("不带空格的选择器的长度是："+$(".test:hidden").length);”的弹出结果为3

对于过滤选择器加上了空格的来说，它所获取的是其子元素的过滤，所以上边的例子是选取class为test的元素的子元素的隐藏元素。

而对于过滤选择器没有加上空格的来说，它所获取的是其自身元素的过滤，所以上边的例子选取隐藏的class为test的元素。

这两个经常把人搞混，但是他们所表达的意思是不一样的。

摘自：

https://blog.csdn.net/longyuhome/article/details/7628284