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 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
vue实现购物车的监听
Apr 20 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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
Less 安装及基本用法
2018/05/05 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
少女风vue组件库的制作全过程
2019/05/15 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
美国Max仓库:Max Warehouse
2020/05/31 全球购物
《小熊住山洞》教学反思
2014/02/21 职场文书
学习决心书
2014/03/11 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
地方白酒代理协议书
2014/10/25 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL