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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
js的with语句使用方法
Sep 21 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
JS验证码实现代码
Sep 14 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
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 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
PHP文件与目录操作示例
2016/12/24 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
vue项目实战总结篇
2018/02/11 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
python能在浏览器能运行吗
2020/06/17 Python
基于python实现计算两组数据P值
2020/07/10 Python
python批量修改交换机密码的示例
2020/09/22 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
计算机专业推荐信范文
2013/11/20 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
腾讯广告词
2014/03/19 职场文书
行政内勤岗位职责
2014/04/07 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
教代会闭幕词
2015/01/28 职场文书
2016年父亲节寄语
2015/12/04 职场文书
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
Golang获取List列表元素的四种方式
2022/04/20 Golang
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers