用示例说明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 相关文章推荐
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 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
用Socket发送电子邮件
2006/10/09 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
linux下编译安装memcached服务
2014/08/03 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
通过javascript设置css属性的代码
2009/12/28 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
Python实现的双色球生成功能示例
2017/12/18 Python
python 重定向获取真实url的方法
2018/05/11 Python
详解python编译器和解释器的区别
2019/06/24 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
什么是会话Bean
2015/05/14 面试题
2014年母亲节寄语
2014/05/07 职场文书
机关作风建设工作总结
2014/10/23 职场文书
六年级小学生评语
2014/12/26 职场文书
经费申请报告范文
2015/05/18 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
干部培训简讯
2015/07/20 职场文书
敬老院活动感想
2015/08/07 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
Python下opencv库的安装过程及问题汇总
2021/06/11 Python
Java使用jmeter进行压力测试
2021/07/09 Java/Android
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL