这是jQuery里常用的2个方法。
他们2者功能是完全不同的,而初学者往往会被误导。

首先 我们看.find()方法:
现在有一个页面,里面HTML代码为;
程序代码

<div class="css">
     <p class="rain">测试1</p>
</div>
<div class="rain">
     <p>测试2</p>
</div>

如果我们使用find()方法:

var $find = $("div").find(".rain");
alert( $find.html() ) ;

将会输出:

 


如果使用filter()方法:

var $filter = $("div").filter(".rain");
alert( $filter.html() );

将会输出:

 


也许你已经看出它们的区别了。
find()会在div元素内 寻找 class为rain 的元素。
而filter()则是筛选div的class为rain的元素。
一个是对它的子集操作,一个是对自身集合元素筛选。

另外find()其实还可以用选择器表示:

var $select = $("div .rain");

明白他们的区别了吗?

jQuery基础---filter()和find()的更多相关文章

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

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

  2. jQuery 基础语法

    jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...

  3. 《jQuery基础教程(第四版)》学习笔记

    本书代码参考:Learning jQuery Code Listing Browser 原书: jQuery基础教程 目录: 第2章 选择元素 1. 使用$()函数 2. 选择符 3. DOM遍历方法 ...

  4. 《jQuery基础》总结

    目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的<jQuery基础>(jQuery Fundamentals).这本书虽然是入门教材,但也足足有100多页.我 ...

  5. JQuery基础知识梳理篇

    这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...

  6. 【JavaWeb】jQuery 基础

    jQuery 基础 介绍 顾名思义,它是 JavaScript 和 查询,是辅助 JavaScript 开发的类库. 它的核心思想是 write less, do more. 所以它实现了很多浏览器的 ...

  7. jQuery基础课程

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  8. JQuery基础总结上

    最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...

  9. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

随机推荐

  1. (五)Linux引导流程解析

    目录 Linux引导流程 Linux运行级别 Linux启动服务管理 GRUB配置与应用 启动故障分析与解决 Linux引导流程 Linux系统引导流程如下图: 固件(Firmware)就是写入ERO ...

  2. SQL 查看数据库表的容量大小

    --==============查看数据库表的容量大小========start================================?============ Create Table # ...

  3. C# winform 右下角弹出窗口结果

    using System.Runtime.InteropServices; [DllImport("user32")] private static extern bool Ani ...

  4. HTML 文本格式化

    HTML 可定义很多供格式化输出的元素,比如粗体和斜体字. 下面有很多例子,您可以亲自试试: HTML 文本格式化实例 文本格式化 此例演示如何在一个 HTML 文件中对文本进行格式化 预格式文本 此 ...

  5. c# win form 显示支付宝二维码图片

    System.Net.WebClient web = new System.Net.WebClient(); byte[] buffer = web.DownloadData(网络图片的地址); we ...

  6. 【转】linux-系统启动流程详解

    第二十章.启动流程.模块管理与 Loader 最近升级日期:2009/09/14 1. Linux 的启动流程分析 1.1 启动流程一览 1.2 BIOS, boot loader 与 kernel ...

  7. Netdom query基本用法

    C:\Users\user1>netdom queryThe syntax of this command is: NETDOM QUERY [/Domain:domain] [/Server: ...

  8. Android Please ensure that adb is correctly located at问题解决

    转载于:http://breezylee.iteye.com/blog/2032588 遇到问题描述: 运行android程序控制台输出 [2012-07-18 16:18:26 - ] The co ...

  9. Android Gradle实用技巧——APK文件名中加上SVN版本号,日期等

    有时候,我们会希望能把APK文件名上带上打包日期,打包时svn的版本号,应用版本号等.当然这些也可以手动添加,但是手动的话也未免太不优雅了,而且可能会出错. 利用Gradle,我们可以让打包出来的ap ...

  10. MongoDB 3.0 导入命令

    在MongoDB的bin目录下执行 ./mongoimport -h 192.168.77.129 --db test --collection restaurants --drop --file / ...