jQuery遍历DOM节点操作之filter()方法详解


Posted in Javascript onApril 14, 2016

本文实例分析了jQuery遍历DOM节点操作之filter()方法。分享给大家供大家参考,具体如下:

.filter(selector)

此方法用于在匹配元素中按照选择器表达式进行筛选。
记住:使用此方法必须得传入选择器表达式参数,不然会报错“'nodeType' 为空或不是对象”

另外请注意这个filter方法和jquery中的find方法的区别:
filter方法是对匹配元素进行筛选,而find方法是对匹配元素的后代元素进行筛选。

从jquery1.4版本开始,filter方法又添加了两个新的用法,现在一共有四种用法了。

下面来具体看看这四种用法:

一、 .filter(selector)

这种用法是在已匹配的元素中按照给定的selector参数(jquery选择器表达式)进行筛选,然后将匹配的元素包装成jquery元素集合返回。这个方法是用来缩小匹配范围的,selector参数可以是多个表达式用逗号连接起来。

来看例子:

HTML代码:

<ul>
  <li>11111</li>
  <li class="item">22222</li>
  <li>33333</li>
  <li>44444</li>
  <li>55555</li>
  <li>66666</li>
  <li>77777</li>
</ul>

Jquery代码:

$("ul>li").filter(":even").css("color","red");
//将索引为偶数的li背景变为红色

上面的jquery代码和下面的jquery代码效果是一样的

$("ul>li:even").css("color","red");
//将索引为偶数的li背景变为红色

再来看一下选择器表达式用逗号连接起来的用法:

$("ul>li").filter(":even,.item").css("color","blue");
//将索引为偶数和calss为item的li背景变为蓝色

demo示例如下:

<ul>
  <li>11111</li>
  <li class="item">22222</li>
  <li>33333</li>
  <li>44444</li>
  <li>55555</li>
  <li>66666</li>
  <li>77777</li>
</ul>
<input type="button" id="test1" value="获取索引为偶数的li">
<input type="button" id="test2" value="获取索引为偶数和calss为item的li">
<script>
$(function(){
  $("#test1").click(function(){
    $("ul>li").filter(":even").css("color","red");//将索引为偶数的li背景变为红色
    //这个式子和 $("ul>li:even").css("color","red"); 等效
  });
  $("#test2").click(function(){
    $("ul>li").filter(":even,.item").css("color","blue");//将索引为偶数和calss为item的li背景变为蓝色
  });
});
</script>

二、 .filter( function(index) )

这种使用方法是对匹配的元素进行遍历,如果function(index)返回的值为true的话,那么这个元素就被选中,如果返回值为false的话,那么这个元素就不被选中

index参数是当前的匹配元素在原来的元素集合中的索引。

如果您对上面的解释不清楚的话(本人表达能力有点欠缺~^_^),可以好好看看下面的例子:

HTML代码:

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>

jquery代码:

$("div").filter(function(index) {
  return index == 1 || $(this).attr("id") == "fourth";
}).css("border", "5px double blue");

上面代码的结果是 第二个div元素和 id为“fourth”的div元素的边框变成了双线颜色为蓝色

demo示例如下:

<style>
 div{ width:60px; height:60px; margin:5px; float:left;border:3px white solid;background:#ff0000 }
</style>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>
<br><br><br><br><br><br>
<input type="button" id="test" value="点击我看看上面的div的变化">
<script>
$("#test").click(function(){
  $("div").filter(function(index) {
    return index == 1 || $(this).attr("id") == "fourth";
  }).css("border", "5px double blue");
});
</script>

三、 .filter( element )

element参数为DOM对象,如果element DOM对象和匹配的元素是同一个元素的话,那么这个元素会被匹配。这种用法是1.4版本新加的,我还没想出来有什么用处

看例子吧:

还是对上面的HTML代码,看jquery代码:

$("div").filter(document.getElementById("third")).css("border", "5px double blue");

结果是id为third的div元素边框有变化。

这个例子举得很鸡肋,大家会说何必这么麻烦呢?还不如直接:

$("#third").css("border", "5px double blue");

的确,我也是这样想的,但是既然是1.4版本新加的,那肯定会是有用到的地方的,不会是鸡肋的,只是我的jquery水平还太低,还没发现而已,如果哪位看官有想到用处的话,还望赐教!

demo示例如下:

<style>
 div{ width:60px; height:60px; margin:5px; float:left;border:3px white solid;background:#ff0000 }
</style>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>
<br><br><br><br><br><br>
<input type="button" id="test" value="点击我看看上面的div的变化">
<script>
$("#test").click(function(){
  $("div").filter(document.getElementById("third")).css("border", "5px double blue");
});
</script>

四、 .filter(jQuery object)

这个用法和上面的.filter( element )的用法差不多,只是一个参数为DOM对象,一个参数为jquery对象,我还是感觉比较鸡肋。

看例子:

同样是对上面的HTML代码,看jquery代码:

$("div").filter($("#third")).css("border", "5px double blue");

结果是id为third的div元素边框有变化。
同样直接用下面的jquery代码会更好:

$("#third").css("border", "5px double blue");

demo示例如下:

<style>
 div{ width:60px; height:60px; margin:5px; float:left;border:3px white solid;background:#ff0000 }
</style>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>
<br><br><br><br><br><br>
<input type="button" id="test" value="点击我看看上面的div的变化">
<script>
$("#test").click(function(){
  $("div").filter($("#third")).css("border", "5px double blue");
});
</script>

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

Javascript 相关文章推荐
动态添加js事件实现代码
Mar 12 Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 #Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 #Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 #Javascript
详解Jquery实现ready和bind事件
Apr 14 #Javascript
一起学写js Calender日历控件
Apr 14 #Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 #Javascript
原生js实现autocomplete插件
Apr 14 #Javascript
You might like
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php实现简单文件下载的方法
2015/01/30 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
php生出随机字符串
2017/07/06 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
python中私有函数调用方法解密
2016/04/29 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
Django REST framework 视图和路由详解
2019/07/19 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
python实现串口通信的示例代码
2020/02/10 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
产品包装策划方案
2014/05/18 职场文书
安全责任书模板
2014/07/22 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
走近毛泽东观后感
2015/06/04 职场文书
公司借款担保书
2015/09/22 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
聊聊Python String型列表求最值的问题
2022/01/18 Python
golang连接MySQl使用sqlx库
2022/04/14 Golang