jQuery的筛选函数提供了串联、查找和过滤函数，为我们的jQuery对象操作带来了很多的方便，今天我们就来温习下jQuery带来的这些筛选函数。

1：串联函数：
（1）：andSelf()

return：jQuery；

explain：

加入先前所选的加入当前元素中

对于筛选或查找后的元素，要加入先前所选元素时将会很有用。

 

   
   
   
   
    
    
    
    
    
  1. test：  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <div><p>testp>div> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. example：  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. $(“div”).find(“p”).andSelf().addClass(“class1”);  
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. result：  
    10. 
    
    
    
    
  10.  
    11. 
    
    
    
    
  11. <div><p class=”class1”>testp>div> 
    12. 
    
    
    
    
  12.  
    13.

(2):

   
   
   
   
    
    
    
    
    
  1. end()  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return :jQuery;  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6. 
    
    
    
    
  6.  
    7.

回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。

   
   
   
   
    
    
    
    
    
  1. test:  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <div><p>testp>div> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. example:  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. $(“div”).find(“p”).end();  
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. //$(“div”).find(“p”)：<p>testp> 
    10. 
    
    
    
    
  10.  
    11. 
    
    
    
    
  11. result:<div><p>testp>div> 
    12.

2:查找函数:

(1):

   
   
   
   
    
    
    
    
    
  1. add(exp);  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return :jQuery;  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6. 
    
    
    
    
  6.  
    7.

把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

   
   
   
   
    
    
    
    
    
  1. test:  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <p>test1p><a>test2a> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. example：  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. $(“p”).add(“a”);  
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. result:  
    10. 
    
    
    
    
  10.  
    11. 
    
    
    
    
  11. [<p>test1p>,<a>test2a>]//数组  
    12.

(2):

   
   
   
   
    
    
    
    
    
  1. children([expr]);  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return:jQuery  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6. 
    
    
    
    
  6.  
    7.

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()之考虑子元素而不考虑所有后代元素。

   
   
   
   
    
    
    
    
    
  1. test:  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <div><span>Hello Againspan>div> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. example:  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. $(“div”).children();  
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. result:<span>Hello Againspan> 
    10.

(3):

   
   
   
   
    
    
    
    
    
  1. find(expr)  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return:jquery  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6. 
    
    
    
    
  6.  
    7.

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

   
   
   
   
    
    
    
    
    
  1. test:  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <p><span>Hellospan>, how are you?p> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. example:  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. $("p").find("span");  
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. result:<span>Hellospan> 
    10.

(4):

   
   
   
   
    
    
    
    
    
  1. next([expr])  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return :jquery  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6. 
    
    
    
    
  6.  
    7.

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。

   
   
   
   
    
    
    
    
    
  1. test:  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <p><span>Hellospan><a>h1a>p>;  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. example:  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. $(“span”).next();  
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. result:<a>h1a>;  
    10.

(5):

   
   
   
   
    
    
    
    
    
  1. nextAll([expr])  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return:jQuery  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:查找当前元素之后所有的同辈元素。  
    6. 
    
    
    
    
  6.  
    7. 
   
   
   
   
   
   
   
   
    
    
    
    
    
  1. test:<div>h1div><div>h2div><div>h3div>;  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. example:  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. $(“div:first”).nextAll();  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. result:<div>h2<div>,<div>h3div>;:  
    8.

(6):

   
   
   
   
    
    
    
    
    
  1. offsetParent()  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return :jQuery  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6. 
    
    
    
    
  6.  
    7.

返回第一个匹配元素用于定位的父节点。

这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。

(7):

   
   
   
   
    
    
    
    
    
  1. parent([expr])  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return:jQuery  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6. 
    
    
    
    
  6.  
    7.

取得一个包含着所有匹配元素的唯一父元素的元素集合。

你可以使用可选的表达式来筛选。

   
   
   
   
    
    
    
    
    
  1. test:  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <div><p>Hellop><p>Hellop>div> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. example:  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. $(“p”).parent();  
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. result:<div><p>Hellop><p>Hellop>div>;  
    10.

(8

   
   
   
   
    
    
    
    
    
  1. ):parents([expr])  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3.  return:jquery;  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。  
    6. 
    
    
    
    
  6.  
    7. 
   
   
   
   
   
   
   
   
    
    
    
    
    
  1. test:  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <body><div><p><span>Hellospan>p><span>Hello Againspan>div>body> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. example:$(“span”).parents(“p”);  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. result:<p><span><Hello>span>p> 
    8.

(9):

   
   
   
   
    
    
    
    
    
  1. prev([expr])  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return:jquery  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6. 
    
    
    
    
  6.  
    7.

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

   
   
   
   
    
    
    
    
    
  1. test:  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <div><span>Hello Againspan>div><p>And Againp> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. example:  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. $(“p”).prev();  
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. result:<div><span>Hello Againspan>div>;  
    10.

(9

   
   
   
   
    
    
    
    
    
  1. ):prevAll([expr])  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return:jQuery  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6. 
    
    
    
    
  6.  
    7.

查找当前元素之前所有的同辈元素;

   
   
   
   
    
    
    
    
    
  1. test:  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <div>div><div>div><div>div><div>div> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. example:  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. $(“div:last”).prevAll();  
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. result:<div>div><div>div><div>div> 
    10.

(10):

   
   
   
   
    
    
    
    
    
  1. siblings([expr])  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return :jquery  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6. 
    
    
    
    
  6.  
    7.

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

   
   
   
   
    
    
    
    
    
  1. test:  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <p>Hellop><div><span>Hello Againspan>div><p>And Againp> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. example:$("div").siblings()  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. result:  
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. [ <p>Hellop>, <p>And Againp> ]  
    10.

3:过滤函数：

(1

   
   
   
   
    
    
    
    
    
  1. ):eq(insex);  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return:jQuery  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6.

获取第N个元素.这个元素的位置是从0算起。

   
   
   
   
    
    
    
    
    
  1. test:<p> This is just a test.p> <p> So is thisp> 
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. example:$(“p”).eq(1);  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. result:<p> So is thisp> 
    6.

(2):

   
   
   
   
    
    
    
    
    
  1. filter(expr)  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return:jQuery  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6. 
    
    
    
    
  6.  
    7.

筛选出与指定表达式匹配的元素集合。

这个方法用于缩小匹配的范围。用逗号分隔多个表达式

   
   
   
   
    
    
    
    
    
  1. test:  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <p>Hellop><p>Hello Againp><p class="selected">And Againp> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. example:  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. $("p").filter(".selected");  
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. result:  
    10. 
    
    
    
    
  10.  
    11. 
    
    
    
    
  11. <p class="selected">And Againp> 
    12.

(3

   
   
   
   
    
    
    
    
    
  1. ):filter(fn)  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return:jquery  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6. 
    
    
    
    
  6.  
    7.

筛选出与指定函数返回值匹配的元素集合

   
   
   
   
    
    
    
    
    
  1. test:  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <p><ol><li>Helloli>ol>p><p>How are you?p> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. example:  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. $("p").filter(function(index) {   
    8. 
    
    
    
    
  8.   return $("ol", this).length == 0;   
    9. 
    
    
    
    
  9. });  
    10. 
    
    
    
    
  10.  
    11. 
    
    
    
    
  11. result:  
    12. 
    
    
    
    
  12.  
    13. 
    
    
    
    
  13. <p>How are you?p> 
    14.

(4):

   
   
   
   
    
    
    
    
    
  1. hasClass(class)  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return:jQuery  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6. 
    
    
    
    
  6.  
    7.

检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是 is("." + class)。

   
   
   
   
    
    
    
    
    
  1. test:  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <div class="protected">div><div>div> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. example:  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. $(“div”).hasClass("protected")  
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. result:  
    10. 
    
    
    
    
  10.  
    11. 
    
    
    
    
  11. true  
    12.

(5):

   
   
   
   
    
    
    
    
    
  1. is(expr)  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return:jquery  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6. 
    
    
    
    
  6.  
    7.

用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

   
   
   
   
    
    
    
    
    
  1. test:  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <form><input type="checkbox" />form> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explam:  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. $("input[type='checkbox']").parent().is("form")  
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. result:  
    10. 
    
    
    
    
  10.  
    11. 
    
    
    
    
  11. true;  
    12.

(6):

   
   
   
   
    
    
    
    
    
  1. map(callback)  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return:jQuery  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6. 
    
    
    
    
  6.  
    7.

将一组元素转换成其他数组（不论是否是元素数组);

   
   
   
   
    
    
    
    
    
  1. test:  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <p><b>Values: b>p>   
    4. 
    
    
    
    
  4. <form>   
    5. 
    
    
    
    
  5.   <input type="text" name="name" value="John"/>   
    6. 
    
    
    
    
  6.   <input type="text" name="password" value="password"/>   
    7. 
    
    
    
    
  7.   <input type="text" name="url" value="http://ejohn.org/"/>   
    8. 
    
    
    
    
  8. form> 
    9. 
    
    
    
    
  9.  
    10. 
    
    
    
    
  10. explam:  
    11. 
    
    
    
    
  11.  
    12. 
    
    
    
    
  12. $("p").append( $("input").map(function(){   
    13. 
    
    
    
    
  13.   return $(this).val();   
    14. 
    
    
    
    
  14. }).get().join(", ") );  
    15. 
    
    
    
    
  15.  
    16. 
    
    
    
    
  16. result:  
    17. 
    
    
    
    
  17.  
    18. 
    
    
    
    
  18. <p>John, password, http://ejohn.org/p> 
    19.

(7):

   
   
   
   
    
    
    
    
    
  1. not(expr)  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return:jQuery  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6. 
    
    
    
    
  6.  
    7.

删除与指定表达式匹配的元素

   
   
   
   
    
    
    
    
    
  1. test:  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <p>Hellop><p id="selected">Hello Againp> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. example:  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. $("p").not( $("#selected")[0] )  
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. result:  
    10. 
    
    
    
    
  10.  
    11. 
    
    
    
    
  11. <p>Hellop> 
    12.

(8):

   
   
   
   
    
    
    
    
    
  1. slice(start,[end])  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. return:jQuery  
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. explain:  
    6. 
    
    
    
    
  6.  
    7.

选取一个匹配的子集;

   
   
   
   
    
    
    
    
    
  1. test:  
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. <p>Hellop><p>cruelp><p>Worldp> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. example:  
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7. $("p").slice(0, 1).wrapInner("<b>b>");  
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9. result:  
    10. 
    
    
    
    
  10.  
    11. 
    
    
    
    
  11. <p><b>Hellob>p> 
    12.

 本博客中同类文章还有，请见：我jQuery系列之目录汇总