jQuery选择器练习中,带空格和不带空格的问题

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>选择器空格的问题</title>
 6     <script type="text/javascript" src="jquery.js"></script>
 7     <script type="text/javascript">
 8         $(document).ready(function()
 9         {
10             alert("带空格的选择器的长度是:"+$(".test :hidden").length);//打印8
11             //带空格 在class属性是test的元素中  选取其子元素是hidden类型的
12             alert("不带空格的选择器的长度是:"+$(".test:hidden").length);//打印4
13             //不带空格 在class属性是test的元素中选取hidden类型的 一共有4个
14             alert($(".test").length);//打印5  选取所有的clas属性是test的元素
15         });
16     </script>
17 </head>
18 <body>
19 <div class="test">
20     <div style="display:none;">我是内部div</div>
21     <div style="display:none;">我是内部div</div>
22     <div style="display:none;">我是内部div</div>
23     <div style="display:none;">我是内部div</div>
24     <div style="display:none;">我是内部div</div>
25     <div class="test" style="display:none;">我是内部div</div>
26 </div>
27 <div class="test" style="display:none;">
28     <div style="display:none;">我是内部div</div>
29     <div style="display:none;">我是内部div</div>
30 </div>
31 <div class="test" style="display:none;">我是外部div</div>
32 <div class="test" style="display:none;">我是外部div</div>
33 </body>
34 </html>

 

posted @ 2017-04-25 13:37  乔克叔叔  阅读(1363)  评论(0编辑  收藏  举报