用示例说明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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
javascript 面向对象编程基础:继承
Aug 21 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 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图片验证码制作实现分享(全)
2012/05/10 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
使用Python更换外网IP的方法
2018/07/09 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
双语教学实施方案
2014/03/23 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
合同纠纷调解书
2015/05/20 职场文书
城南旧事读书笔记
2015/06/29 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers