用示例说明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 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
vue 导出文件,携带请求头token操作
Sep 10 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
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实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
基于jQuery试卷自动排版系统
2010/07/18 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
python 文件查找及内容匹配方法
2018/10/25 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
新领导上任欢迎词
2014/01/13 职场文书
小学英语教学反思案例
2014/02/04 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
明信片寄语大全
2014/04/08 职场文书
社会实践的活动方案
2014/08/22 职场文书
法院授权委托书格式
2014/09/28 职场文书
2016新年致辞
2015/08/01 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
python基础之类方法和静态方法
2021/10/24 Python