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

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

一组列表：

  1.  <li>1</li>
  2.  <li class="f">2</li>
  3.  <li><a>3</a></li>
  4.  <li>4</li>
  5.  <li>5</li>

filter()函数

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

find()函数

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

完整的html代码：

  1.  <html>
  2.      <head>
  3.          <title>filter和find函数</title>
  4.          <script src="jquery.js"></script>
  5.      </head>
  6.      <body>
  7.          <li>1</li>
  8.          <li class="f">2</li>
  9.          <li><a>3</a></li>
  10.          <li>4</li>
  11.          <li>5</li>
  12.      </body>
  13.      <script>
  14.          $('li').filter('.f').addClass('filter');
  15.          $('li').find('a').addClass('find');
  16.      </script>
  17.  </html>

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

  1.  <html><head>
  2.          <title>filter和find函数</title>
  3.          <script src="jquery.js"></script>
  4.      </head>
  5.      <body>
  6.          <li>1</li>
  7.          <li class="f filter">2</li>
  8.          <li><a class="find">3</a></li>
  9.          <li>4</li>
  10.          <li>5</li>
  11.  
  12.      <script>
  13.          $('li').filter('.f').addClass('filter');
  14.          $('li').find('a').addClass('find');
  15.      </script>
  16.  </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. elasticsearch type类型创建时注意项目，最新的elasticsearch已经不建议一个索引下多个type

    https://www.elastic.co/guide/cn/elasticsearch/guide/current/mapping.html如果有两个不同的类型,每个类型都有同名的字段,但映射不同 ...

  2. java.util之一：ArrayList

    ArrayList是java中的线性结构的一种表示方法,在java中使用频率非常高,下面来一步一步分析其底层的实现.(JDK1.8) 一.构造函数 ArrayList的构造函数有三个,分别如下, 我们 ...

  3. mysql 替换函数replace()实现mysql替换指定字段中的字符串

    mysql 替换字符串的实现方法: mysql中replace函数直接替换mysql数据库中某字段中的特定字符串,不再需要自己写函数去替换,用起来非常的方便. mysql 替换函数replace() ...

  4. android strings: %s、%1$s、%d、%1$d占位符

    实际开发的过程中我们有时候会遇到,一个TextView里面会遇到会有一个一大串固定的文字,而里面的数字或者个别字需要根据后台的接口而展示的.这个时候我们最简单的方法就是在string.xml文件里 使 ...

  5. C++main函数命令行选项——学习笔记

    atoi字符串的数转化为整数 atof转化为小数

  6. PHP 自动加载类

    类的自动加载 (Autoloading Classes) 在编写面向对象(OOP) 程序时,很多开发者为每个类新建一个 PHP 文件. 这会带来一个烦恼:每个脚本的开头,都需要包含(include)一 ...

  7. Ubuntu配置国内高速apt-get更新源

    Ubuntu配置国内高速apt-get更新源     具体内容直接参考这篇博客:https://www.linuxidc.com/Linux/2017-11/148627.htm 此网站可直接找到符合 ...

  8. 下周文件ie 谷歌兼容性处理

    https://blog.csdn.net/u014628388/article/details/81738704 问题描述window.URL.createObjectURL()可以直接生成blob ...

  9. ISO/IEC 9899:2011 条款6.7.3——类型限定符

    6.7.3 类型限定符 语法 1.type-qualifier: const restrict volatile _Atomic 约束 2.除了指针类型(其被引用的类型是一个对象类型)之外的类型,不应 ...

  10. maven项目中，添加依赖后，出现"Dependency 'xxxx‘ not found"解决过程

    转自:https://blog.csdn.net/lixld/article/details/82284269 idea中修改pom.xml文件,添加各种工程依赖的jar,一直没有问题, 但今天遇到问 ...