jQuery中选择器空格注意事项

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值