您的位置：首页 > Web前端 > JQuery

jQuery中选择器空格注意事项

2016-08-26 20:26 411 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery 选择器 javascript
相关文章推荐
新的分享
章节导航