本文實例分析了jQuery遍歷DOM節點操作之filter()方法。分享給大家供大家參考，具體如下：
.filter(selector)
此方法用于在匹配元素中按照選擇器表達式進行篩選。
記?。菏褂么朔椒ū仨毜脗魅脒x擇器表達式參數，不然會報錯“'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代碼：
結果是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程序設計有所幫助。
新聞熱點
疑難解答
