这是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. 如何通过SecureCRT FTP上传下载文件

    通过SecureCRT  FTP方式从一台机器下载文件到另一台机器上: [root@TEST144239 ~]# ftp 10.30.1.25 Connected to 10.30.1.25 (10. ...

  2. [Hibernate] - Load and Get

    Hibernate中使用session的load(...)和get(...)区别: 1.load()方法是在返回的类被后期调用时,才会去提交SQL查询数据库. 2.get()方法是在调用get()时就 ...

  3. UIDatePicker自定义背景

    selectDatePicker = [[UIDatePicker alloc]init];    selectDatePicker.frame = CGRectMake(0, 10, 280, 21 ...

  4. Js获取当前日期时间

    Js获取当前日期时间 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4 ...

  5. Linux下高并发socket最大连接数所受的各种限制

    http://blog.csdn.net/guowake/article/details/6615728 1.修改用户进程可打开文件数限制 在Linux平台上,无论编写客户端程序还是服务端程序,在进行 ...

  6. [Freescale]Freescale L3.14.52_1.1.0 yocto build

    可参照:http://blog.csdn.net/wince_lover/article/details/51456745 1. Refer to <基于i.mx6处理器的Yocto项目及Lin ...

  7. Linux LVM简明教程

    逻辑卷管理LVM是一个多才多艺的硬盘系统工具.无论在Linux或者其他类似的系统,都是非常的好用.传统分区使用固定大小分区,重新调整大小十分麻烦.但是,LVM可以创建和管理“逻辑”卷,而不是直接使用物 ...

  8. [摘]PE中安装Windows 7/8

    1. 用WinPE U盘启动盘进入电脑.2. 格式化C盘,C盘一定要是激活状态(活动状态).3. 把Win8的ISO文件提取到D:/win8下 4. 从提取的文件中拷备:bootmgr boot(整个 ...

  9. 个人卡付款sql

    select arap_djfb.billdate as 单据日期, bd_corp.unitname as 付款单位, arap_djfb.zy as 付款摘要, bd_cubasdoc.custc ...

  10. 黄聪:C#禁止Webbrowser中的脚本错误提示,自动屏蔽弹出窗口

    using System; using System.Collections.Generic; using System.Text; using System.Windows.Forms; using ...