jQuery中选择器空格注意事项

最新推荐文章于 2024-01-14 11:54:30 发布

Kindle_code

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量982

点赞数

分类专栏：一些整理文章标签： jquery 选择器 javascript

本文链接：https://blog.csdn.net/kindle_code/article/details/52331487

版权

一些整理专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>