jquery中filter方法用法实例分析
更新时间：2015年02月06日 15:14:36 作者：whazhl
这篇文章主要介绍了jquery中filter方法用法,实例分析了filter方法的功能并对比了与find方法的区别,需要的朋友可以参考下
本文实例讲述了jquery中filter方法用法。分享给大家供大家参考。具体分析如下：
filter()方法将匹配元素集合缩减为匹配指定选择器的元素。
filter方法中的参数可以为字符串值，包含供匹配当前元素集合的选择器表达式。
一、filter的参数类型可分为两种
1、传递选择器
$('a').filter('.external')
2、传递过滤函数
复制代码 代码如下:
$('a').filter(function(index) {
return $(this).hasClass('external');
})
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>
<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程序设计有所帮助。
您可能感兴趣的文章:
- JQuery遍历DOM节点的方法
- jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
- jQuery里filter()函数与find()函数用法分析
- jQuery中filter()方法用法实例
- jQuery filter函数使用方法
- jQuery 过滤not()与filter()实例代码
- jQuery中filter(),not(),split()使用方法
- Jquery find与filter函数区别 说明
- JQuery替换DOM节点的方法
- JQuery复制DOM节点的方法
- JQuery删除DOM节点的方法
- JQuery插入DOM节点的方法
- JQuery创建DOM节点的方法
- JQuery查找DOM节点的方法
- jQuery遍历DOM节点操作之filter()方法详解
相关文章
将要高亮显示的文字加上<span>段落标记， class=”mask”的div 做为遮罩层，使此遮罩层位于文字内容之上（z-index属性，使用Jquery给段落动态添加样式类。2009-12-12
这篇文章主要介绍了jQuery事件多次绑定与解绑问题,结合实例形式分析了jQuery事件多次绑定情况下的运行情况,以及解绑相关操作技巧,需要的朋友可以参考下2019-02-02
通过XMLHttpRequest和jQuery实现ajax的几种方式
AJAX大家已经都知道了，是为了实现异步通讯，提高用户体验度，而将很多旧知识（XML,DOM,JavaScript,HTML,Jquery,Css……）重新融合的一个新的知识框架。而，XMLHttpRequest对象则是其中的重重之中,本篇文章主要给大家介绍通过XMLHttpRequest和jQuery实现ajax的几种方式2015-08-08
这篇文章主要介绍了jQuery仿写百度百科的目录树医保词条样式，点击右侧的目录树，左侧跳转到指定的锚点位置，滚动鼠标，游标跟随一起滚动至响应链接位置，具体实现思路大家参考下本文2017-01-01
这篇文章主要介绍了jquery实现鼠标点击后展开列表内容的导航栏效果,通过简单的jQuery链式操作实现针对页面元素的遍历及样式动态变换功能,需要的朋友可以参考下2015-09-09
jQuery File Upload 是一个Jquery文件上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端.这篇文章主要介绍了jQuery File Upload文件上传插件使用,需要的朋友可以参考下2016-12-12
Bootstrap是最流行的前端开发框架。本文涉及到bootstrap的特性介绍，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-10-10
jQuery+jqmodal弹出窗口的制作方法，需要的朋友可以参考下。2010-06-06
表格增行删行一般情况下都是通过修改html结构实现的，接下来为大家介绍下如何使用jquery实现表格增行删行，感兴趣的各位可不要错过了哈2013-03-03
这篇文章主要介绍了jQuery必不可少的小技巧，这些小技巧就像是创建的快捷方式，可以帮助大家快速开发，感兴趣的小伙伴们可以参考一下2015-11-11
最新评论