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需再刷新一下页面才能执行]

您可能感兴趣的文章:

PHP+jquery+ajax实现分页
这篇文章主要为大家详细介绍了PHPjquery+ajax实现分页的代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
点击表单提交时出现jQuery没有权限的解决方法
击表单提交的时候会出现 jQuery 没有权限，试了一下jquery自带的json方式提交成功
2014-07-07
jquery1.4 教程二 ajax方法的改进
jquery1.4在ajax方法上进一步的进行优化和调整，主要是做了如下的改进。
2010-02-02
jquery无缝向上滚动实现代码
向上滚动的效果想必大家都见过吧!无缝间歇向上滚动应该也不会陌生吧，接下来为大家介绍下jquery实现无缝间歇滚动，感兴趣的朋友可以参考下哈，希望可以帮助到你们
2013-03-03
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
下面小编就为大家带来一篇浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
jquery css实现邮箱自动补全
这篇文章主要为大家详细介绍了jquery css实现邮箱自动补全功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
JQuery点击行tr实现checkBox选中的简单实例
下面小编就为大家带来一篇JQuery点击行tr实现checkBox选中的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
jQuery创建自己的插件(自定义插件)的方法
在该系列之前的文章使用 jQuery：UI 项目中，我介绍了使用 jQuery 代码中的插件来提高 web 应用程序的效率。
2010-06-06
Jquery 焦点图用于图片展示效果代码
今天因网站需要写了个图片展示效果,其中用到了Jquery的data函数，刚学就被我用这了，昨天看时还觉得无甚用处，因为可以人为地给一个节点加属性嘛，不过省却了几句代码而已。
2010-05-05
EasyUI 结合JS导出Excel文件的实现方法
下面小编就为大家带来一篇EasyUI 结合JS导出Excel文件的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11