jQuery选择器的上下文参数

标签:jQuery

刚发现jQuery选择器里可以一次填入多个参数,找了半天也没看到相关文档,于是自己测试了一下。
<script type="text/javascript">
$(function (){
  $("p", "div").css("color","red");
});
</script>
<div>
  div
  <p>p in div</p>
</div>
<p>p not in div</p>
结果:
div
p in div
p not in div
可以看到,只有包含在div里面的p才变红了。
也就是说,这个选择器会先找到所有的div,然后在div里找p,并返回匹配结果。

当然,这个选择器也支持id、class等所有选择器。而且参数也不限制在2个,你可以按需求写任意多个。
实际上它等同于find函数:
$(".loli", ".keakon", "div").css("color","red");
//等同于
$("div").find(".keakon").find(".loli").css("color","red");
//也等同于
$("div .keakon .loli").css("color","red");
当然,最后的写法最简洁,也是用得最多的。
然而最后的写法不能利用已有的jQuery对象和函数返回值,例如$(this)和$("input").parents("div:first"),所以当需要用到这些对象时,第一种写法便可以派上用场了(毕竟比find更简短)。

最后我在《jQuery in Action》里找到了这个术语:context parameter of jQuery selector,直译就是jQuery选择器的上下文参数了。
嘛,我感觉叫多级选择器更形象~

0条评论 你不来一发么↓

    想说点什么呢?