通常把这两个函数，filter()函数和find()函数称为筛选器。

下面的例子分别使用filter函数和find函数对一组列表进行筛选操作。

一组列表：

 <li>1</li>

 <li class="f">2</li>

 <li><a>3</a></li>

 <li>4</li>

 <li>5</li>

filter()函数

 $('li').filter('.f').addClass('filter');

find()函数

 $('li').find('a').addClass('find');

完整的html代码：

 <html>

     <head>

         <title>filter和find函数</title>

         <script src="jquery.js"></script>

     </head>

     <body>

         <li>1</li>

         <li class="f">2</li>

         <li><a>3</a></li>

         <li>4</li>

         <li>5</li>

     </body>

     <script>

         $('li').filter('.f').addClass('filter');

         $('li').find('a').addClass('find');

     </script>

 </html>

在chrome浏览器中，运行效果如下：

 <html><head>

         <title>filter和find函数</title>

         <script src="jquery.js"></script>

     </head>

     <body>

         <li>1</li>

         <li class="f filter">2</li>

         <li><a class="find">3</a></li>

         <li>4</li>

         <li>5</li>

     <script>

         $('li').filter('.f').addClass('filter');

         $('li').find('a').addClass('find');

     </script>

 </body></html>

filter()函数从li标签中筛选出含有类f的li标签，推测是在同级筛选。

find()函数从li标签中找到a标签，推测是在后代中查找。

jquery中filter()和find()函数区别的更多相关文章

  1. 【jQuery】【转】jQuery中filter()和find()的区别

    Precondition: 现在有一个页面,里面HTML代码为: <div class="css"> <p class="rain">测 ...

  2. jquery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...

  3. jquery 中 html与text函数的区别

    jquery 中 html与text函数的区别 共同点:它们都能讲函数中的参数渲染到页面中: 异同点: text() 只是简单的讲参数的内容写入到页面中: html() 会根据参数的值,判断是否字体符 ...

  4. 【jQuery】【转】jQuery中的trigger和triggerHandler区别

    trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...

  5. JQuery中的html(),text(),val()区别

    jQuery中.html()用为读取和修改元素的HTML标签,.text()用来读取或修改元素的纯文本内容,.val()用来读取或修改表单元素的value值. 1.HTML html():取得第一个匹 ...

  6. 基于jquery中children()与find()的区别介绍

    本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选 ...

  7. jquery中filter(fn)的使用研究

    jquery中filter(fn)给出的官方说明是: 筛选出与指定函数返回值匹配的元素集合 这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除 ...

  8. jquery中prop和attr的区别

    jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...

  9. jquery中mouseover和mouseenter的区别

    jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...

随机推荐

  1. 优雅地使用eruda在移动端上调试网页

    注:本文有一小部分截图为桌面端,但所有内容都亲测在移动端上可用. 你曾否在洛谷上用<F12>把错的数据点改成AC?是否有过自己尝试搭建网站,在移动端上js代码运行出错?如果你的回答是肯定的 ...

  2. WINDOWS远程控制LINUX终端XSHELL

    WINDOWS远程控制LINUX终端XSHELL 笔者购买的腾讯云CENTOS7,通过腾讯云的控制台登录,每次都要打开相关网页.输入密码,感觉操作非常不方便. 使用XSHELL远程控制LINUX终端, ...

  3. cross socket tcp客户端开发

    cross socket tcp客户端开发 uses Net.SocketAPI, Net.CrossSocket.Base, Net.CrossSocket FCrossTcp: ICrossSoc ...

  4. 谈谈你对This对象的理解？

    1.this总是指向函数的直接调用者(而非间接调用者):2.如果有new关键字,this指向new出来的那个对象:3.在事件中,this指向触发这个事件的对象,特殊的是,IE中的attachEvent ...

  5. $objPHPExcel=$objReader->load() 报错路径不存在

    PHPexcel导入excel内容到数据库出错, $objPHPExcel=$objReader->load()报错 Could not open /public/upload/20191028 ...

  6. linux下的/dev/shm/及对Oracle 的影响

    一./dev/shm/介绍: /dev/shm/是linux下一个非常有用的目录,因为这个目录不在硬盘上,而是在内存里.因此在linux下,就不需要大费周折去建ramdisk,直接使用/dev/shm ...

  7. mediacoder固定质量CRF

    视频编码:crf 与 bitrate 对照表 CRF(constant rate factor)就是x264/x265下压制视频的一种恒定量化值的编码方式,码率不恒定.其实就相当于vbr1pass.采 ...

  8. Windows下压缩包安装Mysql

    1. 下载mysql压缩包 2. 解压到指定目录,例如D:\Program Files\mysql-5.7.25-winx64 3. 在目录下创建配置文件my.ini [mysqld] port = ...

  9. 品优购商城项目（二）mybatis分页插件

    品优购商城项目第二天,使用mybatis分页插件实现分页.主要实现的是 SSM整合mybatis分页. 一.引用mybatis分页插件 SqlMapConfig.xml <?xml versio ...

  10. Spring cloud微服务安全实战-3-14章节小结

    认证:一个httpBasic 一个是用户名密码的认证 授权:数据库内判断的r就是读 w就是写 ,ACL 获取用户信息的这段逻辑,实际上着也是安全机制的一种.防止越权,当前只能看到自己的信息. Spri ...