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 高级语法介绍
Jun 15 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
js自定义瀑布流布局插件
May 16 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
js实现简易计算器小功能
Nov 18 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
用PHP编写PDF文档生成器
2006/10/09 PHP
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
35个Python编程小技巧
2014/04/01 Python
python django集成cas验证系统
2014/07/14 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
Python3多线程操作简单示例
2018/05/22 Python
python爬取个性签名的方法
2018/06/17 Python
python实现图片转字符小工具
2019/04/30 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
Django学习之文件上传与下载
2019/10/06 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
环境科学专业个人求职信
2013/12/15 职场文书
小组合作学习反思
2014/02/18 职场文书
意向书范文
2014/03/31 职场文书
环保倡议书100字
2014/05/15 职场文书
化工见习报告范文
2014/10/31 职场文书
导游词之唐山景点
2019/12/18 职场文书
导游词之西安骊山
2019/12/20 职场文书
聊一聊python常用的编程模块
2021/05/14 Python