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 日期计算算法
Sep 11 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
Postman参数化实现过程及原理解析
Aug 13 Javascript
React forwardRef的使用方法及注意点
Jun 13 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
PHP 作用域解析运算符(::)
2010/07/27 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
Python中的yield浅析
2014/06/16 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
python实现音乐下载器
2018/04/15 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python多线程下信号处理程序示例
2019/05/31 Python
python实现打砖块游戏
2020/02/25 Python
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
一套软件测试笔试题
2014/07/25 面试题
中学家长会邀请函
2014/02/03 职场文书
挂牌仪式主持词
2014/03/20 职场文书
导师评语大全
2014/04/26 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
Python+Appium新手教程
2021/04/17 Python
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers