华山资源网

jQuery遍历DOM节点操作之filter()方法详解
网络编程 2024/11/20 佚名
3 1

本文实例分析了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相关内容感兴趣的读者可查看本站专题：《jQuery遍历算法与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com