用示例说明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 相关文章推荐
html下载本地
Jun 19 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
JS通用方法触发点击事件代码实例
Feb 17 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
JavaScript使用cookie
2007/02/02 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
layui select动态添加option的实例
2018/03/07 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
英文版餐饮运营管理求职信
2013/11/06 职场文书
职业技术学校毕业生推荐信
2013/12/03 职场文书
大学自荐信
2013/12/12 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
先进单位事迹材料
2014/12/25 职场文书
2015年班组建设工作总结
2015/05/13 职场文书