通常把这两个函数，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. JavaWeb之问题集(1) —— Tomcat启动闪退

    1. 问题描述 环境: System:Windows 10 Professional JDK:1.8.0.212 Tomcat:9.0.22 原本可以正常的启动和关闭,后来突然的就无法使用了,无法启动 ...

  2. 三大框架 之 Hibernate查询（一对多、多对多、查询关系）

    目录 一对多 表之间关系 表之间关系建表原则 一对多关系配置 建立表 建立ORM 添加配置文件 在hibernate.cfg.xml中的标签里,添加核心配置文件 引入工具类 编写测试类 级联操作 什么 ...

  3. oralce 超过1亿条数据的数据库表清理实践

    2018-08-18 16:58 无腿鸟 阅读(331) 评论(0) 编辑 收藏 问题:当一个表的数据量超过一亿条,要删除其中的5000w条,如何处理. 如果直接使用delete语句,会涉及到到大量的 ...

  4. 优化Unity游戏项目的脚本（上）

    本文将由捷克独立游戏工作室Lonely Vertex的开发工程师Ondřej Kofroň,分享C#脚本的一系列优化方法,并提供改进Unity游戏性能的最佳实践. 在开发游戏时,我们遇到了游戏过程中偶 ...

  5. ActiveMQ相关API

    一.Producer 1,发送消息 MessageProducer send(Message message)发送消息到默认目的地,就是创建Producer时指定的目的地. send(Destinat ...

  6. 007 搜索API

    1.说明 这个API用于在elasticsearch中搜索内容,用户可以通过发送以查询字符串为参数的get请求进行搜索,也可以在post请求的消息体中进行查询. 2.多索引 允许搜索所有的索引或某些特 ...

  7. 【E2E】Tesseract5+VS2017+win10源码编译攻略

    一,记录我目前在win10 X64和VS2017的环境下成功编译Tesseract5.0的方式: 二,记录在VS2017 C++工程中调用Tesseract4.0的方法: 三,记录编译和调用Tesse ...

  8. 数据分析入门——pandas之DataFrame基本概念

    一.介绍 数据帧(DataFrame)是二维数据结构,即数据以行和列的表格方式排列. 可以看作是Series的二维拓展,但是df有行列索引:index.column 推荐参考:https://www. ...

  9. Django中的QuerySet查询优化之prefetch_related

    转载的,做个笔记,原文链接 在数据库有外键的时候,使用 select_related() 和 prefetch_related() 可以很好的减少数据库请求的次数,从而提高性能.本文通过一个简单的例子 ...

  10. chrome devTool

    在console中访问节点 使用document.querySelectAll()访问元素 使用$0快速访问选中的元素,光标选中的元素,早console中输入$0获取选中元素的dom信息 拷贝 > ...