教程集 > jQuery > jquery 教程 > 正文 Jquery find与filter函数区别说明

Jquery find与filter函数区别说明

发布时间：2013-08-16 编辑：jiaochengji.com

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

基本是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 find与filter函数区别说明
 用示例说明filter()与find()的用法以及children()与find()的区别分析
 jQuery基础知识filter()和find()实例说明
 jQuery中filter()和find()的区别深入了解
 解密jQuery内核 Sizzle引擎筛选器 – 位置伪类（一）
Jquery中的层次选择器与find()的区别示例介绍
 jquery中的过滤操作详细解析
 基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
 jquery中常用的函数和属性详细解析
 从零开始学习jQuery (三) 管理jQuery包装集

上一篇：Jquery change(fontsize,background) 改变颜色与背景的代码下一篇：jquery validate.js表单验证的基本用法入门

[关闭]

Jquery find与filter函数区别说明

最近更新

浏览排行

Jquery find与filter函数区别 说明

最近更新

浏览排行

Jquery find与filter函数区别说明