通常把这两个函数，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. SQL中查询现有未释放连接

    SELECT dbid,count() FROM [Master].[dbo].[SYSPROCESSES] WHERE spid> and status='sleeping' group by ...

  2. 2019UNCTF竞技赛部分writeup

    Reverse unctf_babyre2 这题flag分为两部分,第一部分每四个字符一组打包成int后,每次把四个int传入函数,后三个参数异或后先以每位为索引查表,将新数据进行循环移位.异或,将结 ...

  3. docker 访问宿主机网络

    使用宿主机IP 在安装Docker的时候,会在宿主机安装一个虚拟网关docker0,我们可以使用宿主机在docker0上的IP地址来代替localhost. 首先,使用如下命令查询宿主机IP地址: i ...

  4. Python 23种设计模式全（python例子）

    从今年5月份开始打算把设计模式都写到博客里,持续到现在总算是写完了.写的很慢,好歹算是有始有终.对这些设计模式有些理解的不准确,有些甚至可能是错的,请看到的同学拍砖留言.内容来源很杂,大部分参考或者摘 ...

  5. Gradle: 一个诡异的问题(ERROR: Failed to parse XML AndroidManifest.xml ParseError at [row,col]:[5,5] Message: expected start or end tag)

    今天同事说他下了一个老版本的AS项目死活编不过,我心想不就是一个项目么,编不过要么就是代码有问题,要么就是依赖库不完整这能有什么问题,于是自己在自己电脑试了下,结果自己也中招了: 乍一看这个错误,说是 ...

  6. linux都有哪些运行级别？

    答: 一共有七种运行级别,如下: 0 – System halt i.e the system can be safely powered off with no activity. 1 – Sing ...

  7. 【转载】 漫谈Code Review的错误实践

    原文地址: https://www.cnblogs.com/chaosyang/p/code-review-wrong-practices.html ------------------------- ...

  8. IDEA 修改某个Module名称

    一.选择module右键——>Refactor——>Rename 二.修改该module下的pom.xml文件对应module名改掉 三.修改项目的pom文件中modules里的modul ...

  9. Linux expect的安装与使用

    Expect是在Tcl的基础上创建的,可以用来做一些Linux下无法做到交互的命令操作,可用于远程管理服务器. 一.安装Tcl: 1.下载源码包: wget http://nchc.dl.source ...

  10. java-mybaits-015-mybatis逆向工程最佳实践【基础mybatis-generator、tk.mybatis、mubatis-plus】

    一.概述 三款框架的功能对比 Mybatis-generator 通用Mapper Mybatis-Plus 代码生成器 支持自动生成Model,Mapper,Mapper XML文件 生成方式不够灵 ...