用示例说明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 相关文章推荐
理解Javascript_02_理解undefined和null
Oct 11 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 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 MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
php字符串截取的简单方法
2013/07/04 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
不懂JavaScript应该怎样学
2008/04/16 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
Vue仿今日头条实例详解
2018/02/06 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
Python中asyncio模块的深入讲解
2019/06/10 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
python爬虫添加请求头代码实例
2019/12/28 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
翻译学院毕业生自荐书
2014/02/02 职场文书
个人投资合作协议书
2014/10/12 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
生活委员竞选稿
2015/11/21 职场文书
MySQL之DML语言
2021/04/05 MySQL
MySQL通过binlog恢复数据
2021/05/27 MySQL
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB