用示例说明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加解密功能页面
Dec 12 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
js表单登陆验证示例
Oct 19 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 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开发环境
2015/07/28 PHP
一段实用的php验证码函数
2016/05/19 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
python人人网登录应用实例
2014/09/26 Python
Python 调用Java实例详解
2017/06/02 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
Python爬虫文件下载图文教程
2018/12/23 Python
appium+python adb常用命令分享
2020/03/06 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
html5唤起app的方法
2017/11/30 HTML / CSS
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
幼儿园门卫制度
2014/01/29 职场文书
学校安全教育制度
2014/01/31 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
我的小天地教学反思
2014/04/30 职场文书
外科护士长工作总结
2015/08/12 职场文书
销售口号霸气押韵
2015/12/24 职场文书
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL