jQuery过滤函数

最新推荐文章于 2022-11-04 21:57:15 发布
最新推荐文章于 2022-11-04 21:57:15 发布
阅读量447 收藏
点赞数
分类专栏： web开发

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

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">$("li:eq(1)").css("color","red");  
  2. </span>  

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

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">$("li").eq(1).css("color","red");  
  2. </span>  

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

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


说明：

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

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

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

实例3-1：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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 在CODE上查看代码片 派生到我的代码片
  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>  
执行结果如图：

实例3-3 $,each例子：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:SimSun;font-size:12px;">$("p").not("#selected")</span>  

4、slice(start,[end])

根据下标选取匹配的子集

实例3-4：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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
jQuery实现的搜索列表过滤
06-08
用jQuery实现了搜索List子项内容过滤的功能.
jQuery 遍历函数详解
10-23
.andSelf()函数将之前操作返回的元素集添加到当前jQuery对象集合中，这通常用在多重过滤之后要合并之前的集合时。 .children()函数用于获取匹配元素集合中每个元素的所有直接子元素。如果元素有多个同级子元素，它...
jQuery整理笔记三----jQuery过滤函数
曹海成的专栏
04-19 3480
六、过滤函数 在前面介绍了许多功能实用的选择器，jQuery在此基础上还拓展了许多功能函数，这些函数作为jQuery对象的方法直接实用，这样就能够在选择器的基础上更加精确地控制对象。请注意：筛选函数与选择器在用法上是不同的。例如，在下面这个列表结构中。 1 2 3 如果要设置第二个列表项的字体颜色为红色，可以用选择器进行选择 $("li:eq(1)").css("col
jQuery函数操作汇总~过滤与查找
风一样的少年
08-26 487
除了选择器之外，jQuery还为我们提供了以“方法”（类似于函数方法,更加语义化）形式存在的2种方式：（1）过滤方法；（2）查找方法。 过滤方法部分 jQuery过滤方法： 方法 说明 hasClass() 判断所选元素是否含有某个类，返回值为true或false eq(n) 选择元素集合中指定下标元素，下标从0开始（选择器作用）...
jQuery基础——使用过滤器—1过滤
weixin_57575133的博客
11-04 2942
jQuery选择器能够模仿CSS和XPath语法，提供高效、准确匹配元素的方法，jQuery过滤器是一系列简单、实用的jQuery对象方法，建立在选择器基础上对jQuery对象进行二次过滤。在jQuery框架中，过滤器通过Sizzle.filter子类实现，包含过滤、查找和串联三类操作行为。
jQuery函数操作汇总——过滤和查找
qq_43608567的博客
04-22 242
除了选择器之外，jQuery还为我们提供了以“方法”（类似于函数方法,更加语义化）形式存在的2种方式：（1）过滤方法；（2）查找方法。 jQuery进行对象过滤和对象选择的方法： 在jQuery对象中的元素对象数组中过滤出一部分元素来 1.first() 获取第一个元素 2.last() 获取最后个元素 3.eq(index|-index) 获取第N个元素 4.filter(selector...
jQuery中$.grep() 过滤函数 数组过滤
10-21
本文将深入讲解jQuery中`$.grep()`函数的工作原理、参数以及如何使用它来过滤数组。 `$.grep()`函数的语法如下： ```javascript $.grep(array, callback, [invert]) ``` - `array`: 这是第一个参数，你需要过滤的...
jquery数组过滤筛选方法grep()简介
10-25
1. `array`：这是待过滤的数组，你想要从中筛选出符合条件的元素。 2. `callback`：这是一个函数，它会接收两个参数，即当前遍历到的元素值（`a`）和元素的索引（`i`）。这个回调函数应返回一个布尔值，如果返回`...
jQuery数组处理函数整理
10-21
这个函数常用于转换或过滤数组元素。 8. **$.inArray(val, array)**: 这个函数检查给定的值是否存在于数组中，并返回其索引（从0开始）。如果找不到，返回-1。这对于查找特定元素的位置很有用。 9. **$.merge...
jquery过滤特殊字符’,防sql注入的实现方法
11-22
在本文中，我们将深入探讨如何使用jQuery来过滤特殊字符，以防止SQL注入攻击。SQL注入是一种常见的网络安全威胁，攻击者通过输入恶意的SQL语句来操纵数据库，获取、修改或删除敏感数据。以下是一个实际的jQuery实现...
jQuery搜索框过滤筛选信息列表代码
06-10
这是一款简单、易用、方便、快捷的jQuery搜索框过滤筛选信息列表代码，搜索框显示列表总数，输入关键词进行过滤筛选列表数量代码。
jQuery对象的过滤
一李
02-06 255
过滤：在原有的里面找出一部分 查找：查找原有的兄弟父母子孙后代 过滤 //子标签中找 // $ul.children('span:eq(1)').css('background','red') //find后代标签中找 // $ul.find('span:eq(1)').css('background','red') ...
jQuery Recipies - 使用map来过滤对应的元素集
weixin_34151004的博客
02-04 117
<table id="tblEmployee" class="normal_table"> <tr> <td>Employee Name</td><td>Department Name</td><td>Salary</td> ...
jQuery 查找和过滤
JoshuaJosue的博客
05-04 381
find()方法 <!-- HTML结构 --> <ul class="lang"> <li class="js dy">JavaScript</li> <li class="dy">Python</li> <li id="swift">Swift</li> <...
jQuery学习笔记四：查找和过滤
Arthur的专栏
08-06 383
jQuery查找和过滤
jQuery对象的过滤方法
qq_44604924的博客
08-30 331
first():获得第一个元素 last():获得1最后一个元素 eq():获取指定元素 filter():过滤 has():获取包含某标签的元素 用法示例：想看哪个就把注释去掉 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>过滤</title> </head> <script type="text/javascript" src=
过滤jQuery对象
weixin_30533797的博客
05-20 76
一、.filter()方法 1、http://api.jquery.com/filter/#filter-selection 二、.has()方法 1、http://api.jquery.com/has/ 三、.map()方法 1、http://api.jquery.com/map/ 四、.not()方法 1、http://api.jquery.com/not/ ...
Jquery之使用过滤和遍历
有 prepare , No out
09-05 1272
1 StripingTable $(document).ready(function() { // $("ul").find("li").each(function(i) { $("#orderedlist").find("li").each(function(i) { // 和$("#orderedlist li")一样效果 $(this).html( $(th
【jQuery学习】—jQuery对象的过滤
道阻且长，行则将至。
06-15 1156
jQuery学习（十三）—jQuery对象的过滤 一、eq方法 作用：获取对应下标的jQuery对象 格式：jQuery对象集合.eq(下标) 二、first方法 作用：获取匹配元素集合中的第一个元素 格式：jQuery对象集合.first() 三、last方法 作用：获取匹配元素集合中的最后一个元素 格式：jQuery对象集合.last() 四、is方法 作用：判断当前匹配元素集合中的元素是否与指定的参数匹配，匹配的返回值为true，否则返回值为true 格式：元素.is
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值