jQuery整理笔记三----jQuery过滤函数

àì夳堔傛蜴生んèń 2022-08-27 10:54 199阅读 0赞

**在前面介绍了许多功能实用的选择器，jQuery在此基础上还拓展了许多功能函数，这些函数作为jQuery对象的方法直接实用，这样就能够在选择器的基础上更加精确地控制对象。请注意：筛选函数与选择器在用法上是不同的。**例如，在下面这个列表结构中。

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1. **<****span** style="font-family:SimSun;font-size:12px;"**>**   **<****ul****>**  
2.         **<****li****>**1**</****li****>**  
3.         **<****li****>**2**</****li****>**  
4.         **<****li****>**3**</****li****>**  
5.     **</****ul****>****</****span****>**

如果要设置第二个列表项的字体颜色为红色，可以用选择器进行选择

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1. **<****span** style="font-family:SimSun;font-size:12px;"**>**$("li:eq(1)").css("color","red");  
2. **</****span****>**

而如果使用过滤函数，则可以使用如下方法来实现

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1. **<****span** style="font-family:SimSun;font-size:12px;"**>**$("li").eq(1).css("color","red");  
2. **</****span****>**

选择器是构建jQuery对象的基础，而过滤函数则是jQuery对象的成员，用法截然不同，jQuery定义的过滤函数如下表所示：

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px"> 
 表2-7 jQuery过滤函数 
 <tbody> 
 <tr> 
 <th>jQuery过滤函数</th> 
 <th>说 &nbsp; &nbsp;明</th> 
 </tr> 
 </tbody> 
 <tbody> 
 <tr> 
 <td>eq(index)</td> 
 <td>获得指定索引值位置上的元素,索引值从0开始计数</td> 
 </tr> 
 <tr> 
 <td>hasClass(class)</td> 
 <td>检查当前元素是否含有某个特定的类，如果有则返回true</td> 
 </tr> 
 <tr> 
 <td>filter(expr)</td> 
 <td>筛选出与指定表达式匹配的元素集合，这个方法用于缩小匹配的范围，用逗号分隔多个表达式</td> 
 </tr> 
 <tr> 
 <td>filter(fn)</td> 
 <td>筛选出与指定函数返回值匹配的元素集合</td> 
 </tr> 
 <tr> 
 <td>is(expr)</td> 
 <td>用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true</td> 
 </tr> 
 <tr> 
 <td>map(callback)</td> 
 <td>将一组元素转换成其他数组(不论是否是元素数组)</td> 
 </tr> 
 <tr> 
 <td>not(expr)</td> 
 <td>删除与指定表达式匹配的元素</td> 
 </tr> 
 <tr> 
 <td>slice(start,[end])</td> 
 <td>选取一个匹配的子集，与原来的slice方法类似</td> 
 </tr> 
 <tr> 
 <td>add(expr)</td> 
 <td>把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集</td> 
 </tr> 
 <tr> 
 <td>children([expr])</td> 
 <td>取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合</td> 
 </tr> 
 <tr> 
 <td>contents()</td> 
 <td>查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个ifame，则查找文本内容</td> 
 </tr> 
 <tr> 
 <td>find (expr)</td> 
 <td>搜索所有与指定表达式匹配的元素。这个元素是找出正在处理的元素的后代元素</td> 
 </tr> 
 <tr> 
 <td>next([expr])</td> 
 <td>取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合</td> 
 </tr> 
 <tr> 
 <td>nextAll([expr])</td> 
 <td>查找当前元素之后的所有元素</td> 
 </tr> 
 <tr> 
 <td>parent([expr])</td> 
 <td>取得一个包含着所有匹配元素的唯一父元素的元素集合</td> 
 </tr> 
 <tr> 
 <td>parents([expr])</td> 
 <td>取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）</td> 
 </tr> 
 <tr> 
 <td>prev([expr])</td> 
 <td>取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合</td> 
 </tr> 
 <tr> 
 <td>prevAll([expr])</td> 
 <td>查找当前元素之前所有的同辈元素，可以用表达式过滤</td> 
 </tr> 
 <tr> 
 <td>siblings([expr])</td> 
 <td>取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选</td> 
 </tr> 
 <tr> 
 <td>andSelf()</td> 
 <td>加入先前所选的当前元素中，对于筛选或查找后的元素，加入先前所选元素的将会很有用</td> 
 </tr> 
 <tr> 
 <td>end()</td> 
 <td>回到最近的一个‘破坏性’操作之前，即将匹配的元素列表变为前一次的状态</td> 
 </tr> 
 </tbody> 
</table>

说明：

**1、find() 和 filter()两者的区别**

**简单的说就是find()是在jQuery对象集合的所有的子元素中查找，而filter()是在jQuery对象集合中查找。**

还有就是两者参数的区别，find()需要的参数是且只是jQuery选择器的表达式，而filter()的参数可以是jQuery选择器的表达式，也可以是多个jQuery选择器的表达式并列，中间用逗号隔开（逻辑或的关系），filter()参数也可以是一个函数，调用函数时自动传入index参数(jQuery对象集合的长度),函数需返回true或者false来选中或者排除元素。看个例子就明白两者的用法了：

实例3-1：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1. **<****span** style="font-family:SimSun;font-size:12px;"**>**<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"**>**   
2. **<****html** xmlns="http://www.w3.org/1999/xhtml"**>**   
3. **<****head****>**   
4. **<****meta** http-equiv="Content-Type" content="text/html; charset=gb2312"**>**   
5. **<****title****>**Document**</****title****>**   
6. **<****script**  src="jquery-2.1.0.min.js" type="text/javascript"**>****</****script****>**  
7. **<****script****>**   
8. $(function()\{   
9.     $('\#btn1').click(function()\{   
10.         alert('这样的jQuery对象有'+$('div').find('.test').length+'个')  
11.     \});   
12.     $('\#btn2').click(function()\{   
13.         alert('这样的jQuery对象有'+$('div').filter('.test').length+'个');   
14.     \});   
15.     $('\#btn3').click(function()\{   
16.         alert('这样的jQuery对象有'+$('div').filter('.last').length+'个');   
17.     \});   
18.     $('\#btn4').click(function()\{   
19.         alert('这样的jQuery对象有'+$('div').filter('.test,.last').length+'个');   
20.     \});   
21.     $('\#btn5').click(function()\{  
22.         alert('这样的jQuery对象有'+$('div').filter(function(index)\{  
23.             return $(this).hasClass("haha");//检查当前元素是否含有haha类  
24.         \}).length+'个')  
25.     \})  
26. \});   
27. **</****script****>**   
28. **</****head****>**   
29. **<****body****>**   
30.     **<****input** type="button" value="test-find" id="btn1" **/>**   
31.     **<****input** type="button" value="test-filter" id="btn2" **/>**   
32.     **<****input** type="button" value="test-filter" id="btn3" **/>**   
33.     **<****input** type="button" value="test-filter" id="btn4" **/>**   
34.     **<****input** type="button" value="test-filter" id="btn5" **/>**   
35.     **<****div** class="first"**>**  
36.         first content  
37.         **<****span** class="test"**>**  
38.             test content  
39.         **</****span****>**  
40.         **<****span** class="test"**>**  
41.             test1 content  
42.         **</****span****>**  
43.     **</****div****>**   
44.   
45.     **<****div** class="last"**>**  
46.         last  
47.         **<****span** class="test"**>**  
48.             last test content  
49.         **</****span****>**  
50.     **</****div****>**   
51.   
52.     **<****div** class="last"**>**  
53.         last  
54.         **<****span****>**  
55.             last no test content  
56.         **</****span****>**  
57.     **</****div****>**   
58.     **<****div** class="haha"**>**  
59.           
60.     **</****div****>**   
61. **</****body****>**   
62. **</****html****>**   
63. **</****span****>**

**2、map和each的区别**

$.map(array,fn(value))的作用是将一个数组转换成另一个数组，循环传递数组内的每个元素（value）进行处理，将所有的返回值组成一个新的数组。

特别需要注意的是.$map()不能处理json格式的数组。

$.each(array,fn(value))的作用是循环处理数组中的各个元素，也就是相当于java中的for循环，它没有返回值。它可以处理json格式的数组。

分别看一下例子就了解这两个函数的区别了

实例3-2 $.map()例子：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1. **<****span** style="font-family:SimSun;font-size:12px;"**>**<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"**>**  
2. **<****html****>**  
3. **<****head****>**  
4. **<****title****>**$.map()函数**</****title****>**  
5. **<****script**  src="jquery-2.1.0.min.js" type="text/javascript"**>****</****script****>**  
6. **<****script** language="javascript"**>**  
7. $(function()\{  
8.     var aArr = \["a", "b", "c", "d", "e"\];  
9.     $("p:eq(0)").text(aArr.join());  
10.     aArr = $.map(aArr,function(value,index)\{  
11.        //将数组转化为大写并添加序号  
12.        return (value.toUpperCase() + index);  
13.     \});  
14.     $("p:eq(1)").text(aArr.join());  
15.     aArr = $.map(aArr,function(value)\{  
16.        //将数组元素的值双份处理  
17.        return value + value;  
18.     \});  
19.     $("p:eq(2)").text(aArr.join());  
20. \});  
21. **</****script****>**  
22. **</****head****>**  
23. **<****body****>**  
24. **<****p****>****</****p****>****<****p****>****</****p****>****<****p****>****</****p****>**  
25. **</****body****>**  
26. **</****html****>****</****span****>**

执行结果如图：

![SouthEast][]

实例3-3 $,each例子：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1. **<****span** style="font-family:SimSun;font-size:12px;"**>**   var arr = \{ "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" \};//json格式的对象(dict)  
2.     $.each(arr, function(key, value) \{ alert(key+"="+value); \});**</****span****>**

**3、not()用法  需要参数为jQuery选择器的表达式**

例如，要从jQuery对象集合中删除id为seleced的

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1. **<****span** style="font-family:SimSun;font-size:12px;"**>**$("p").not("\#selected")**</****span****>**

**4、slice(start,\[end\])**

根据下标选取匹配的子集

实例3-4：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1. **<****span** style="font-family:SimSun;font-size:12px;"**>**<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"**>**  
2. **<****html****>**  
3.  **<****head****>**  
4.   **<****script**  src="jquery-2.1.0.min.js" type="text/javascript"**>****</****script****>**  
5.   **<****script** type="text/javascript"**>**  
6.     $(function()\{  
7.         $("body").html($("p").slice(0, 1))  
8.     \})  
9.   **</****script****>**  
10.  **</****head****>**  
11.  **<****body****>**  
12.   **<****p****>**Hello**</****p****>****<****p****>**cruel**</****p****>****<****p****>**World**</****p****>**  
13.  **</****body****>**  
14. **</****html****>**  
15. **</****span****>**

执行结果：Hello

[view plain]: http://blog.csdn.net/caohaicheng/article/details/23998933#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/302319
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/302319/fork
[SouthEast]: /images/20220824/b5c080891db545dc9d67e98649fcdd1b.png