用示例说明filter()与find()的用法以及children()与find()的区别分析


Posted in Javascript onApril 26, 2013

jquery的find()方法与filter()方法对于初学者来说容易混淆,在这里对这两个方法通过一个小例子来进行比较和说明。旨在了解这两种方法的区别。

html代码

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

先看看find()方法
$("div").find(".rain").css('color', '#FF0000');
//等价于:$("div .rain").css('color','#ff0000');
//也等价于:$(".rain","div").css('color','#ff0000');

显示结果:

用示例说明filter()与find()的用法以及children()与find()的区别分析

问题:这里为什么“测试2”不变为红色?

find() 方法定义:它是获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。

find()方法要注意的地方:find()方法是在当前元素集合内部查找。不包括自己。

上面例子中$("div")包含两个元素。第一个元素符合要求。但第二个元素div本身的class虽然是"rain",但其内部没有class=rain。所以不符合。

下面使用filter()方法看看有什么新玩意

$("div").filter(".rain").css('color', '#FF0000');

显示结果:

用示例说明filter()与find()的用法以及children()与find()的区别分析
filter()方法定义:filter() 方法将匹配元素集合缩减为指定选择器的元素。

意思就是对匹配元素的集合,用选择器测试每个元素本身(不是后代),符合选择器的元素包含在集合中,不符合的去掉(选择器就是起过滤作用)。形成一个新的结果集。

在上面例子中:find()会在div元素内部(后代)寻找 class为rain 的元素。而filter()则是筛选div的class为rain的元素。一个是对它的子集操作,一个是对自身集合元素筛选。

在看两个filter()方法的例子:例一  例二

使用filter()方法的第二个形式是,通过函数而不是选择器来筛选元素。对于每个元素,如果该函数返回 true,则元素会被包含在已筛选集合中;否则,会排除这个元素。

看一下下面的例子:

---------------------------
来自网页的消息
---------------------------
The code is in your clipboard now
---------------------------
确定   
---------------------------

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');


结果如下:
用示例说明filter()与find()的用法以及children()与find()的区别分析

这里在顺便说一下find()方法和children()方法的区别

find()方法上面已经说过了,在此不在熬述,下面说一下children()方法。

children,表面意思就是:孩子,儿童,子女的意思。我一般这里理解为子女或儿子。为什么这样理解?下面先看一下children的定义吧

children()方法定义:它是获得匹配元素集合中每个元素的所有子元素。(不包括自己,只能在儿子辈(第一层)查找) 

find() 方法定义:       它是获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。

我理解是children是匹配集合中每个元素的“儿子辈”的子元素。find()除了儿子辈,还包括孙子辈。即只要是它的后代就行。

下面通过一个例子来看看:

<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="http://lock.5186.me/js/jQuery1.6.2.js"></script>
<style>
  body {font-size:16px; font-weight:bolder;}
  p {margin:5px 0;}
</style>
</head>
<body>
  <div>
    <span>Hello</span>
    <span>
      <p class="selected">test</p>
    </span>
    <p>And One Last Time</p>
    <p class="selected">again</p>
  </div>
  <p class="selected">Hello Again</p>
<script>$("div").children(".selected").css("color", "blue");</script>
</body>
</html>

结果如下图所示:

用示例说明filter()与find()的用法以及children()与find()的区别分析

Javascript 相关文章推荐
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
Vue实现PopupWindow组件详解
Apr 28 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 #Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 #Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 #Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 #Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 #Javascript
jQuery.Validate验证库的使用介绍
Apr 26 #Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 #Javascript
You might like
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
javascript 面向对象继承
2009/11/26 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
Python常用随机数与随机字符串方法实例
2015/04/09 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
读书之星事迹材料
2014/05/12 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
国家助学金受助感言
2015/08/01 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
Win10系统下配置Java环境变量
2021/06/13 Java/Android
MySQL分区表管理命令汇总
2022/03/21 MySQL