jQuery基础知识filter()和find()实例说明

首先 我们看.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");

明白他们的区别了吗？

赞 (0)

相关推荐

  • jQuery中filter()和find()的区别深入了解

    一直不是很清楚filter()方法和find()方法的区别,今天在看jQuery Cookbook一书中,终于算是搞清楚了. filter()过滤DOM元素包装集,是指操作当前元素集,删除不匹配的元素,得到一个新的集合 复制代码 代码如下: $('div').filter('.div1');//选择div标签中class属性为div1的div元素 find()在当前选中元素的上下文中找到符合条件的后代,返回的是子元素 复制代码 代码如下: $('div').find('em');//选择div标

  • jQuery中each()、find()和filter()等节点操作方法详解(推荐)

    1.each(callback) 官方解释: 返回值:jQuery 概述 以每一个匹配的元素作为上下文来执行一个函数. 意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素).而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型). 返回 'false' 将停止循环 (就像在普通的循环中使用 'break').返回 'true' 跳至下一个循环(就像在普通的循环中使用'

  • Jquery find与filter函数区别 说明

    find()会在div元素内 寻找 class为classname的元素. filter()则是筛选div的class为classname的元素. 基本是find子元素找,filter是平级找 ·find 函数是在当前对象集合的子元素中进行查询; ·filter 函数是对当前对象集合进行过滤, 利用过滤条件缩小范围; ·find 函数的参数是 jQuery 选择器表达式; ·filter 的参数也是选择器表达式, 但可以有多个条件, 用逗号分隔(逻辑或关系); ·filter 的参数也可以是个函

  • jQuery里filter()函数与find()函数用法分析

    本文实例讲述了jQuery里filter()函数与find()函数用法.分享给大家供大家参考.具体分析如下: $("div .cont"); 等价于$("div").find(".cont") filter()函数是作用在集合的每一个对象($(这里是什么得到的就是什么))上, find()函数是在每一个对象内部查找匹配表达式的子元素 例子: <div class="cont"><p class="c

  • 基于jquery的has()方法以及与find()方法以及filter()方法的区别详解

    基于jquery的has()方法以及与find()方法以及filter()方法的区别详解

    has(selector选择器或DOM元素)   将匹配元素集合根据选择器或DOM元素为条件,检索该条件在每个元素的后代中是否存在,将符合条件的的元素构成新的结果集. 下面举一个例子: 复制代码 代码如下: <ul>  <li>list item 1</li>  <li>list item 2    <ul>      <li><div><span>a</span></div>list

  • jQuery基础知识filter()和find()实例说明

    jQuery基础知识filter()和find()实例说明

    首先 我们看.find()方法: 现在有一个页面,里面HTML代码为; 复制代码 代码如下: <div class="css"> <p class="rain">测试1</p> </div> <div class="rain"> <p>测试2</p> </div> 如果我们使用find()方法: var $find = $("div"

  • 微信小程序开发数据缓存基础知识辨析及运用实例详解

    提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容. 提示:以下是本篇文章正文内容,下面案例可供参考 一.微信数据缓存是什么? 在实际开发中,在用到一个数据时,我们需要调用api接口去得到,然后渲染在页面中,但是对于一些数据,是经常需要使用的,如果每次使用时都需要调用api接口,会十分麻烦.数据缓存就解决了这个问题,我们可以在初次调用某api得到数据的同时将数据缓存,那么在之后的使用过程

  • jQuery基础知识小结

    1.基础 jquery对象集:   $():jquery对象集合 获取jquery对象集中的元素: 使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0] 使用jquery的get方法获取jquery对象集中的javascript元素:var temp = $('img[alt]').get(0) 使用jquery的eq方法获取jquery对象集中的jquery对象元素:     $('img[alt]').eq(0)     $('img[alt

  • jquery基础知识第一讲之认识jquery

    jQuery是一个优秀的JavaScript库,它凭借简洁地语法和跨平台的兼容性,极大地简化了开发人员遍历HTML文档,操作DOM,处理事件,执行动画和开发Ajax操作. jQuery优势: 1.轻量级 2.强大的选择器 3.出色的DOM操作的封装 4.可靠的事件处理机制 5.完善的Ajax 6.不污染顶级变量 7.出色的浏览器兼容性 8.链式操作方式 9.隐式迭代 10.行为层与结构层分离 11.丰富的插件支持 12.完善的文档 13.开源 (1)编写简单的jQuery代码: 注:$ 就是jQ

  • C++基础知识实例解析（一）

    今天小编和大家一起通过几个实例学习C++基础知识,下面进行实例解析: [1-1]编写一个程序,实现一个整数.长整数.浮点数和双精度数除以2的计算. [分析]这是一个典型的函数重载的程序.声明函数div()为除法函数,每个函数的功能基本都是一致的,不同的只是形式参数的类型不同而已.程序代码如下: #include <iostream> using namespace std; int division(int x){ return x/2; } long division(long x){ re

  • jQuery中filter()方法用法实例

    此方法能够筛选出与指定表达式或者方法返回值相匹配的元素或者元素集合. 语法结构一: 筛选出与指定表达式匹配的元素集合. 复制代码 代码如下: $(selector).filter(expr) 参数列表: 参数 描述 expr 字符串值,用于筛选当前元素集合的选择器表达式. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name

  • Javascript & DHTML 实例编程（教程）基础知识

    [ 2007-04-11 14:31:50 | Author: never-online ] 这一节首先请下载JScript.chm这本手册,无论新手老手,有一本手册是免不了的,特别是对于新手,如果你没有空翻犀牛书,那么这本手册将是你了解这门语言的首选.下面所讲的大多数,手册上可以没有提及,或提及很少的内容. 以下的教程都是针对你对上面所说的JScript.chm这本手册了解的基础上而写的,如果你还没有看过JScript.chm,建议你先下载,边看手册,边看教程. JS的语法与大多数类C的语言差

  • jQuery基础的工厂函数以及定时器的经典实例分析

    1. jQuery的基本信息: 1.1 定义: jQuery是JavaScript的程序库之一,它是JavaScript对象和实用函数的封装, 1.2 作用: 许多使用JavaScript能实现的交互特效,使用jQuery都能完美地实现,下面通过五个用途来更多的了解. 1.2.1 访问和操作DOM元素 1.2.2 制作页面样式 1.2.3 对页面时间的处理 1.2.4 方便地使用jQuery插件 1.2.5 与Ajax的完美结合 1.3 优势: 想必有人就会问了:为什么人们会更多的选择jQuer

  • jQuery基础语法实例入门

    本文实例讲述了jQuery基础语法.分享给大家供大家参考.具体分析如下: 此语法规则有两个部分组成:获取jQuery对象和对jQuery对象执行的操作. 复制代码 代码如下: $(selector).action() 下面就对以上语法规则进行详细的阐述: 1.$定义jQuery,将被选的DOM对象转换成jQuery对象. 2.selector是选择器,类似于CSS选择器. 3.action()是要对jQuery对象行的操作. 注: $是jQuery的简写.例如: 复制代码 代码如下: $("di

  • Java基础之Filter的实例详解

    Java基础之Filter的实例详解 定义: Filter,是Servlet的一种,接口类为javax.servlet.Filter,以一种模块化或者可重用的方法封装公共行为,本质是可复用的代码片段. 职责:在请求到达Servlet之前对请求头作预处理,或者在服务器响应完成之后对响应内容作后处理.分界线为chain.doFilter的调用.该调用是将请求处理权交给其Filter列表链上的其它Filter. 生命周期:  Filter在Web容器启动时被容器实例化,并调用其init方法完成初始化,

随机推荐