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 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
JavaScript中实现块作用域的方法
Apr 01 Javascript
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
基于JavaScript获取base64图片大小
Oct 18 Javascript
vue实现分页加载效果
Dec 24 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
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
php实现图片添加水印功能
2014/02/13 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Django之模型层多表操作的实现
2019/01/08 Python
对python周期性定时器的示例详解
2019/02/19 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
学习python需要有编程基础吗
2020/06/02 Python
C++面试题目
2013/06/25 面试题
网络安全类面试题
2015/08/01 面试题
心理健康课教学反思
2014/02/13 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
施工员岗位职责
2014/03/16 职场文书
医院节能减排方案
2014/06/13 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Java字符串逆序方法详情
2022/03/21 Java/Android