位置: 编程技术 - 正文
jQuery遍历DOM节点操作之filter()方法详解(jquery中遍历指定的对象和数组是哪个方法)
编辑：rootadmin推荐整理分享jQuery遍历DOM节点操作之filter()方法详解(jquery中遍历指定的对象和数组是哪个方法)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery遍历dom元素,jquery遍历div,jquery遍历div,jquery遍历节点的方法,jquery遍历dom元素,js遍历dom节点,jquery遍历节点的方法,jquery遍历div,内容如对您有帮助，希望把文章链接给更多的朋友！
本文实例分析了jQuery遍历DOM节点操作之filter()方法。分享给大家供大家参考，具体如下：
.filter(selector)
此方法用于在匹配元素中按照选择器表达式进行筛选。记住：使用此方法必须得传入选择器表达式参数，不然会报错“'nodeType' 为空或不是对象”
另外请注意这个filter方法和jquery中的find方法的区别:filter方法是对匹配元素进行筛选，而find方法是对匹配元素的后代元素进行筛选。
从jquery1.4版本开始，filter方法又添加了两个新的用法，现在一共有四种用法了。
下面来具体看看这四种用法：
一、 .filter(selector)
这种用法是在已匹配的元素中按照给定的selector参数（jquery选择器表达式）进行筛选，然后将匹配的元素包装成jquery元素集合返回。这个方法是用来缩小匹配范围的，selector参数可以是多个表达式用逗号连接起来。
来看例子：
HTML代码：
Jquery代码：
上面的jquery代码和下面的jquery代码效果是一样的
再来看一下选择器表达式用逗号连接起来的用法：
demo示例如下：
二、 .filter( function(index) )
这种使用方法是对匹配的元素进行遍历，如果function(index)返回的值为true的话，那么这个元素就被选中，如果返回值为false的话，那么这个元素就不被选中
index参数是当前的匹配元素在原来的元素集合中的索引。
如果您对上面的解释不清楚的话（本人表达能力有点欠缺~^_^），可以好好看看下面的例子：
HTML代码：
jquery代码：
上面代码的结果是 第二个div元素和 id为“fourth”的div元素的边框变成了双线颜色为蓝色
demo示例如下：
三、 .filter( element )
element参数为DOM对象，如果element DOM对象和匹配的元素是同一个元素的话，那么这个元素会被匹配。这种用法是1.4版本新加的，我还没想出来有什么用处
看例子吧：
还是对上面的HTML代码，看jquery代码：
结果是id为third的div元素边框有变化。
这个例子举得很鸡肋，大家会说何必这么麻烦呢？还不如直接:
的确，我也是这样想的，但是既然是1.4版本新加的，那肯定会是有用到的地方的，不会是鸡肋的，只是我的jquery水平还太低，还没发现而已，如果哪位看官有想到用处的话，还望赐教！
demo示例如下：
四、 .filter(jQuery object)
这个用法和上面的.filter( element )的用法差不多，只是一个参数为DOM对象，一个参数为jquery对象，我还是感觉比较鸡肋。
看例子：
同样是对上面的HTML代码，看jquery代码：
结果是id为third的div元素边框有变化。同样直接用下面的jquery代码会更好：
demo示例如下：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery遍历算法与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
jQuery中的基本选择器用法学习教程 一．简单选择器在使用jQuery选择器时，必须使用$()函数来包装CSS规则。而CSS规则作为参数传递到jQuery对象内部后，再返回包含页面中对应元素的jQuery对
jQuery遍历DOM元素与节点方法详解 本文实例讲述了jQuery遍历DOM元素与节点方法。分享给大家供大家参考，具体如下：一、向上遍历--祖先元素①$(selector).parent([filter]):返回selector匹配元素
jquery.cookie.js实现用户登录保存密码功能的方法 本文实例讲述了jquery.cookie.js实现用户登录保存密码功能的方法。分享给大家供大家参考，具体如下：需要导入的js有jquery.js和jquery.cookie.jsscripttype="text/ja
上一篇：jQuery获取父元素及父节点的方法小结(jquery获取元素的父元素)
下一篇：jQuery中的基本选择器用法学习教程(jquery中的基本选择器有哪些)
