jQuery选择器的上下文参数

jQuery选择器的上下文参数

2009 5 5 03:57 AM 3821次查看

分类：JavaScript 标签：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条评论你不来一发么↓

想说点什么呢？