【jQuery使用手册】四：筛选
时间：2010-08-24 来源：Tony_Zhang
四：筛选
eq(index) 返回值：jQuery
获取第index个元素，从0算起。示例：获取匹配的第二个元素。
1 HTML代码：2 <p>This is just a test.</p><p>So is this</p>
3 jQuery代码：
4 $("p").eq(1);
5 结果：
6 [<p>This is just a test.</p>]
first() 返回值：jQuery
获取第一个元素。示例：获取匹配的第一个元素。
代码
1 HTML代码：
代码
2 <ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul>
3 jQuery代码：
4 $("li").first();
5 结果：
6 [<li>list item 1</li>]
last() 返回值：jQuery
获取最后个元素。示例：获取匹配的最后个元素。
HTML代码：<ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul>
jQuery代码：
$("li").last();
结果：
[<li>list item 5</li>]
hasClass(class) 返回值：Boolean
检查当前的元素是否含有某个特定的类，如果有，则返回true。等同于is("."+class)。示例：隐藏包含某个类的元素。
代码
1 HTML代码：2 <div class="protected"></div><div></div>
3 jQuery代码：
4 $("div").click(function(){
5 if($(this).hasClass("protected"))
6 $(this).slideUp("slow");
7 });
filter(expr) 返回值：jQuery
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围值，用逗号分隔多个表达式。
示例：保留带有select类的元素。
1 HTML代码：2 <p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
3 jQuery代码：
4 $("p").filter(".selected");
5 结果：
6 [<p class="selected">And Again</p>]
示例：保留第一个及带有select类的元素。
1 HTML代码：2 <p>Hello</p><p>Hello Again</p><p>And Again</p>
3 jQuery代码：
4 $("p").filter(".selected,:first");
5 结果：
6 [<p>Hello</p>,<p class="selected">And Again</p>]
filter(fn) 返回值:jQuery
筛选出与指定函数返回值匹配的元素集合。这个函数内部将对每个对象计算一次(正如'$.each')。如果调用的函数返回false则这个元素被删除，否则就保留。
代码
1 HTML代码：2 <p><ol><li>Hello</li></ol></p><p>How are you?</p>
3 jQuery代码：
4 $("p").filter(function(){
5 return $("ol",this).length==0;
6 });
7 结果：
8 [<p>How are you?</p>]
is(expr) 返回值：Boolean
用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回'false'。
1 HTML代码：2 <form><input type="checkbox" /></form>
3 jQuery代码：
4 $("input[type='checkbox']").parent().is("form");
5 结果：
6 true
map(callback) 返回值：jQuery
将一组元素转换成其他数组(不论是否是元素数组)。可以用这个函数建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式，都可以用'$.map()'来方便的建立。
示例：把form中每个input元素的值建立一个列表。
代码
1 HTML代码：2 <p><b>Values:</b></p>
3 <form>
4 <input type="text" name="name" value="John" />
5 <input type="text" name="password" value="password" />
6 <input type="text" name="url" value="http://www.hongbird.com" />
7 </form>
8 jQuery代码：
9 $("p").append($("input").map(function(){
10 return $(this).val();
11 }).get().join(","));
12 结果：
13 [<p>John,password,http://www.hongbird.com</p>]
has(expr) 返回值：jQuery
保留包含特定后代的元素，去掉那些不含有特定后代的元素。.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代，含有匹配后代的对象得以保留。示例：给含有ul的li加上背景色。
代码
1 HTML代码：2 <ul>
3 <li>list item 1</li>
4 <li>list item 2
5 <ul>
6 <li>list item 2-a</li>
7 <li>list item 2-b</li>
8 </ul>
9 </li>
10 <li>list item 3</li>
11 <li>list item 4</li>
12 </ul>
13 jQuery代码：
14 $("li").has("ul").css("background-color","red");
not(expr) 返回值：jQuery
删除与指定表达式匹配的元素。示例：从p元素中删除带有 select 的ID的元素。
1 HTML代码：2 <p>Hello</p><p id="selected">Hello Again</p>
3 jQuery代码：
4 $("p").not($("#selected")[0]);
5 结果：
6 [<p>Hello</p>]
slice(start,[end]) 返回值：jQuery
选取一个匹配的子集。参数start：开始选取子集的位置，第一个元素是0，如果是负数则可以从集合的尾部开始选起。参数end：结束选取的位置，如果不指定则就是本身的结尾。
示例：选择第一个p元素。
1 HTML代码：2 <p>Hello</p><p>cruel</p><p>World</p><p>World</p>
3 jQuery代码：
4 $("p").slice(0,1).warpInner("<b></b>");
5 结果：
6 [<p><b>Hello</b></p>]
示例：选择第二、三个p元素。
1 HTML代码：2 <p>Hello</p><p>cruel</p><p>World</p>
3 jQuery代码：
4 $("p").slice(1).wrapInner("<b></b>");
5 结果：
6 [<p><b>cruel</b></p>,<p><b>World</b></p>]
示例：选择最后一个p元素。
HTML代码：<p>Hello</p><p>cruel</p><p>World</p>
jQuery代码：
$("p").slice(-1).wrapInner("<b></b>");
结果：
[<p><b>World</b></p>]
children([expr]) 返回值：jQuery
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可以通过可选的表达式来过滤所匹配的子元素。parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。示例：查找DIV中的每个子元素。
1 HTML代码：2 <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
3 jQuery代码：
4 $("div").children();
5 结果：
6 [<span>Hello Again</span>]
示例：在每个div中查找.selected的类。
代码
1 HTML代码：2 <div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
3 jQuery代码：
4 $("div").children(".selected");
5 结果：
6 [<p class="selected">Hello Again</p>]
closest(expr,[context]) 返回值jQuery
从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身，如果不匹配则向上查找父元素，层层向上，知道找到匹配的元素，如果没有匹配元素则返回空的jQuery对象。
closest和parents的主要区别：前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；前者逐级向上查找，直到发现匹配的元素后就停止，后者一直向上查找知道根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；前者返回0或1个元素，后者可能包含0、1或多个元素。closest对于处理事件委托非常有用。
示例：展示如何使用clostest查找多个元素。
1 HTML代码：2 <ul><li></li><li></li></ul>
3 jQuery代码：
4 $("li:first").closest(["ul","body"]);
5 结果：
6 [ul,body]
示例：展示如何使用closest来完成事件委托。
代码
1 HTML代码：2 <ul>
3 <li><b>Click me!</b></li>
4 <li>You can also<b>Click me!</b></li>
5 </ul>
6 jQuery代码：
7 $(doucment).bind("click",function(e){
8 $(e.target).closest("li").toggleClass("hilight");
9 });
find(expr) 返回值：jQuery
搜索所有与指定表达式匹配的元素，这个函数时找出正在处理元素的后代的好方法。示例：从所有段落开始，进一步搜索下面的span元素，与$("p span")相同。
1 HTML代码:2 <p><span>Hello</span>,how are you?</p>
3 jQuery代码：
4 $("p").find("span");
5 结果：
6 [<span>Hello</span>]
next([expr]) 返回值：jQuery
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
示例：找到每个段落后面紧邻的同辈元素。
1 HTML代码：2 <p>Hello<p><p>Hello Again</p><div><span>And Again</span></div>
3 jQuery代码：
4 $("p").next();
5 结果：
6 [<p>Hello Again</p><div><span>And Again</span></div>]
示例：找到每个段落后面紧邻的同辈元素中类名为selected的元素。
HTML代码：<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
jQuery代码：
$("p").next(".selected");
结果：
[<p class="selected">Hello Again</p>]
nextAll([expr]) 返回值：jQuery
查找当前元素之后所有的同辈元素。示例：给第一个div之后的所有元素加个类。
代码
HTML代码：<div></div><div></div><div></div><div></div>
jQuery代码：
$("div:first").nextAll().addClass("after");
结果：
[<div class="after"></div>,<div class="after"></div>,<div class="after"></div>]
nextUntil([expre]) 返回值：jQuery
查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为至。示例：给#ter-2后面知道dt前面的元素加上红色背景。
代码
HTML代码：<dl>
<dt>term 1</dt>
<dd>definition 1-a</dd>
<dd>definition 1-b</dd>
<dd>definition 1-c</dd>
<dd>definition 1-d</dd>
<dt id="term-2">term 2</dt>
<dd>definition 2-a</dd>
<dd>definition 2-b</dd>
<dd>definition 2-c</dd>
<dt>term 3</dt>
<dd>definition 3-a</dd>
<dd>definition 3-b</dd>
</dl>
jQuery代码：
$('#term-2').nextUntil('dt').css('background-color', 'red');
offsetParent() 返回值：jQuery
返回第一个匹配元素用于定位的父节点。返回父元素中第一个其position设为relative或者absolute的元素，此方法仅对可见元素有效。
parent([expr]) 返回值：jQuery
取得一个包含着所有匹配元素的唯一父元素的元素集合。示例：查找段落的父元素中每个类名为selected的父元素。
1 HTML代码：2 <div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>
3 jQuery代码：
4 $("p").parent(".selected");
5 结果：
6 [<div class="selected"><p>Hello Again</p></div>]
parents([expr]) 返回值：jQuery
取得一个包含所有元素的祖先元素的元素集合(不包含跟元素)。示例：找到每个span元素的所有祖先元素。
1 HTML代码：2 <html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
3 jQuery代码：
4 $("span").parents();
parentsUntil([expr]) 返回值：jQuery
查找当前元素的所有父辈元素，知道遇到匹配的那个元素为止。
代码
1 HTML代码；2 <ul class="level-1">
3 <li class="item-i">I</li>
4 <li class="item-ii">II
5 <ul class="level-2">
6 <li class="item-a">A</li>
7 <li class="item-b">B
8 <ul class="level-3">
9 <li class="item-1">1</li>
10 <li class="item-2">2</li>
11 <li class="item-3">3</li>
12 </ul>
13 </li>
14 <li class="item-c">C</li>
15 </ul>
16 </li>
17 <li class="item-iii">III</li>
18 </ul>
19 jQuery代码：
20 $("li.item-a").parentsUntil(".level-1").css("background-color","red");
prev([expr]) 返回值：jQuery
取得一个包含匹配元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevAll([expr]) 返回值：jQuery
查找当前元素之前所有的同辈元素。
prevUntil([expr]) 返回值：jQuery
查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
sliblings([expr]) 返回值：jQuery
取得一个包含匹配元素集合中每一个元素的唯一同辈元素的元素集合。示例：找到每个div的所有同辈元素中带有类名为selected的元素。
代码
1 HTML代码：2 <div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
3 jQuery代码：
4 $("div").siblings(".selected");
5 结果：
6 [<p class="selected">Hello Again</p>]
add(expr,[context]) 返回值：jQuery
把与表达式匹配的元素条件到jQuery对象中。这个函数可以用于连接分别于两个表达式匹配的元素结果集。示例：添加一个新元素到一组匹配的元素中，并且这个新元素能匹配给定的表达式。
1 HTML代码：2 <p>Hello</p>
3 jQuery代码：
4 $("p").add("<span>Again</span>");
5 结果：
6 [<p>Hello</p>,<span>Again</span>]
示例：为匹配的元素添加一个或多个元素。
代码
HTML代码:<p>Hello</p><p><span id="a">Hello Again</span></p>
jQuery代码：
$("p").add(document.getElementById("a"));
结果：
[<p>Hello</p>, <p><span id="a">Hello Again</span></p>, <span id="a">Hello Again</span>]
andSelf() 返回值：jQuery
加入先前所选的加入当前元素中。对于筛选或查找后的元素，要加入先前所选元素时将会很有用。
代码
1 HTML代码：2 <div><p>First Paragraph</p><p>Second Paragraph</p></div>
3 jQuery代码：
4 $("div").find("p").andSelf().addClass("border");
5 结果：
6 <div class="border">
7 <p class="border">First Paragraph</p>
8 <p class="border">Second Paragraph</p>
9 </div>
contents() 返回值：jQuery
查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe，则查找文档内容。示例：查找所有文本节点并加粗。
代码
<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
jQuery代码：
$("p").contents().not("[nodetype=1]").warp("<b/>");
结果：
<p><b>Hello</b> <a href="http://ejohn.org/">John</a>, <b>how are you doing?</b></p>
end() 返回值：jQuery
回到最近一个"破坏性"操作之前，即，将匹配的元素列表变为前一次的状态。
1 HTML代码：2 <p><span>Hello</span>,how are you?</p>
3 jQuery代码：
4 $("p").find("span").end();
5 结果：
6 [<p><span>Hello</span> how are you?</p>]
相关阅读 更多 +
