直接来看例子：
1 <html> 2 <head> 3 <title>选择器空格的tips</title> 4 <script type="text/javascript" src="jquery.js"></script> 5 <script type="text/javascript"> 6 $(document).ready(function() 7 { 8 alert("带空格的选择器的长度是："+$(".test :hidden").length); 9 alert("不带空格的选择器的长度是："+$(".test:hidden").length); 10 }); 11 </script> 12 </head> 13 <body> 14 <div class="test"> 15 <div style="display:none;">我是内部的div</div> 16 <div style="display:none;">我是内部的div</div> 17 <div style="display:none;">我是内部的div</div> 18 <div class="test" style="display:none;">我是内部的div</div> 19 </div> 20 <div class="test" style="display:none;">我是外部的div</div> 21 <div class="test" style="display:none;">我是外部的div</div> 22 </body> 23 </html>
对于上边的这两行来说：
- “alert("带空格的选择器的长度是："+$(".test :hidden").length);”的弹出结果为4；
- “alert("不带空格的选择器的长度是："+$(".test:hidden").length);”的弹出结果为3；
对于过滤选择器加上了空格的来说，它所获取的是其子元素的过滤，所以上边的例子是选取class为test的元素的子元素的隐藏元素。
而对于过滤选择器没有加上空格的来说，它所获取的是其自身元素的过滤，所以上边的例子选取隐藏的class为test的元素。