jquery中filter方法用法实例分析


Posted in Javascript onFebruary 06, 2015

本文实例讲述了jquery中filter方法用法。分享给大家供大家参考。具体分析如下:

filter()方法将匹配元素集合缩减为匹配指定选择器的元素。
filter方法中的参数可以为字符串值,包含供匹配当前元素集合的选择器表达式。
 
一、filter的参数类型可分为两种
 
1、传递选择器
$('a').filter('.external')
 
2、传递过滤函数

$('a').filter(function(index) {

        return $(this).hasClass('external');

})

二、Jquery中find与filter区别

1、find()会在div元素内 寻找 class为classname的元素。
2、filter()则是筛选div的class为classname的元素。
3、基本是find子元素找,filter是平级找

4、find 函数是在当前对象集合的子元素中进行查询;
5、filter 函数是对当前对象集合进行过滤, 利用过滤条件缩小范围;
6、find 函数的参数是 jQuery 选择器表达式;

7、filter 的参数也是选择器表达式, 但可以有多个条件, 用逗号分隔(逻辑或关系);
8、filter 的参数也可以是个函数, 调用函数时会自动传入 index 参数, 函数需返回 true或false 以选中或排除元素.
 
例如:

<!DOCTYPE> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

<title>Document</title> 

<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>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript 学习笔记 错误处理
Jul 30 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 Javascript
Jquery对select的增、删、改、查操作
Feb 06 #Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 #Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 #Javascript
js实现多选项切换导航菜单的方法
Feb 06 #Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 #Javascript
javascript强制点击广告的方法
Feb 06 #Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 #Javascript
You might like
长波知识介绍
2021/03/01 无线电
php curl 伪造IP来源的实例代码
2012/11/01 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
PHP实现事件机制的方法
2015/07/10 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
javascript中常用编程知识
2013/04/08 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
在Python的Django框架中编写编译函数
2015/07/20 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
Python callable()函数用法实例分析
2018/03/17 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
个人合作协议书范本
2014/04/18 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
企业文化理念标语
2014/06/10 职场文书
医生见习报告范文
2014/11/03 职场文书
创先争优个人总结
2015/03/04 职场文书
新兵入伍决心书
2015/09/22 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书