jQuery中选择器空格注意事项

关注

原创最新推荐文章于 2026-03-02 00:02:07 发布 1k 阅读 AI 写同款· GEO 优化 ›

python文件转为可执行文件（.exe）的详细步骤本文详细介绍了如何从零开始把python文件打包成为可执行文件（.exe）。阅读详情

jQuery以它强大的选择器，给开发带来了极大的方便，有敲空格习惯的程序猿很容易在这这里栽跟头，jQuery中选择器中的空格是不容忽视的，下面是《锋利的jQuery》中的例子:

<body>
    <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>
</body>

<script type="text/javascript">
        $(function(){
          //注意区分类似这样的选择器
          //虽然一个空格，却截然不同的效果.
           var $t_a = $('.test :hidden');
           var $t_b = $('.test:hidden');
           var len_a = $t_a.length;
           var len_b = $t_b.length;
           alert("$('.test :hidden') = "+len_a);  //输出 4 
           alert("$('.test:hidden') = "+len_b);  //输出 3
        });
    </script>

    在输出结果中，不难看出这两个仅仅是一个空格区别，匹配到的元素完全不一样。
    在《锋利的jQuery》中讲层次选择器中有一个后代选择器  :   $("ancestor descendant")，加了空格之后，后面那个元素的位置就是后代的元素，所以回到书中例子，加了空格的过滤选择器是在对后代进行过滤。没有将空格的过滤器在对class是test进行过滤。

所以例子中选择器的含义也不难看出:

alert("$('.test :hidden') = "+len_a);  //输出 4 
// 这句所匹配到的是以下几行:(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>

alert("$('.test:hidden') = "+len_b); //输出 3
//这句所匹配的是以下几行:(选取隐藏的class为"test"的元素)
//      <div class="test" style="display:none;">dd</div>
//      <div class="test" style="display:none;">ee</div>
//      <div class="test" style="display:none;">ff</div>