用示例说明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 相关文章推荐
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
Jquery倒计时源码分享
May 16 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
bootstrap table实例详解
Jan 06 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
使用Python对Excel进行读写操作
2017/03/30 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
python之语音识别speech模块
2020/09/09 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
实现向右循环移位
2014/07/31 面试题
团委书记的竞聘演讲稿
2014/04/24 职场文书
网络编辑求职信
2014/04/30 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL