Jquery find与filter函数区别说明

更新时间：2010年05月13日 01:10:58 作者：

基本是find子元素找，filter是平级找

find()会在div元素内寻找 class为classname的元素。
filter()则是筛选div的class为classname的元素。

基本是find子元素找，filter是平级找

·find 函数是在当前对象集合的子元素中进行查询;
·filter 函数是对当前对象集合进行过滤, 利用过滤条件缩小范围;
·find 函数的参数是 jQuery 选择器表达式;
·filter 的参数也是选择器表达式, 但可以有多个条件, 用逗号分隔(逻辑或关系);
·filter 的参数也可以是个函数, 调用函数时会自动传入 index 参数, 函数需返回 true或false 以选中或排除元素.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Document</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <script> $(function(){ $('#btn1').click(function(){ alert($('div').find('.test').html()); }); $('#btn2').click(function(){ alert($('div').filter('.test').html()); }); $('#btn3').click(function(){ alert($('div').filter('.last').html()); }); $('#btn4').click(function(){ alert($('div').filter('.first,.last').html()); }); }); </script> </head> <body> <input type="button" value="test-find" id="btn1" /> <input type="button" value="test-filter" id="btn2" /> <input type="button" value="test-filter" id="btn3" /> <input type="button" value="test-filter" id="btn4" /> <div class="first">first content<span class="test">test content</span></div> <div class="last">last<span class="test">last test content</span></div> <div class="last">last<span>last no test content</span></div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JQuery异步获取返回值中文乱码的解决方法
这篇文章主要介绍了JQuery异步获取返回值中文乱码的解决方法,除了正常的编码设置需要统一外,还要设置一个setCharacterEncoding才可以避免乱码,需要的朋友可以参考下
2015-01-01
jQuery+CSS 半开折叠效果原理及代码(自写)
jQuery做一个可以半折叠的DIV元素由于jQueryUI中accordion没有提供相关的方法因此自己写了个，代码质量很低希望大家多多指点
2013-03-03
一个简单的jquery的多选下拉框(自写)
想在网上找一个插件用用，可是，网上的插件看起来都比较杂乱，我参考了网上的一些插件，自己用jquery写了一个多选下拉框
2014-05-05
前端必备神器 Snap.svg 弹动效果
SVG(可缩放矢量图形)是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。
2014-11-11
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件。下文给大家介绍jQuery使用Selectator插件实现多选下拉列表过滤框，需要的朋友一起学习吧
2016-04-04
jQuery检测鼠标左键和右键点击的方法
这篇文章主要介绍了jQuery检测鼠标左键和右键点击的方法,涉及jQuery操作鼠标事件的技巧,且针对IE浏览器具备良好的兼容性,需要的朋友可以参考下
2015-03-03
treepanel动态加载数据实现代码
本文介绍一个treepanel动态加载数据的例子，需要了解的朋友可以参考下
2012-12-12
jquery实现网页查找功能示例分享
当需要在页面中查找某个关键字时，一是可以通过浏览器的查找功能实现，二是可以通过前端脚本准确查找定位，本文介绍通过jQuery实现的页面内容查找定位的功能，并可扩展显示查找后的相关信息
2014-02-02
jQuery判断div随滚动条滚动到一定位置后停止
这篇文章主要介绍了jQuery判断div随滚动条滚动到一定位置后停止的方法,需要的朋友可以参考下
2014-04-04
轻松掌握jQuery获取第二个子元素集合的技巧！
在这篇指南中,我们将探讨如何使用jQuery获取第二个子元素集合,如果你正在寻找一种简单的方法来快速获取一个元素的第二个子元素,那么你来对地方了！跟着我们的步骤,你将很快成为一个jQuery专家,需要的朋友可以参考下
2023-12-12