jQuery 选择器中的空格问题

直接来看例子：

   

 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>

对于上边的这两行来说：

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

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

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

posted on 2017-02-25 13:29  Cultivate  阅读(379)  评论(0)  编辑  收藏  举报

导航