欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法詳解

 更新時(shí)間：2016年04月14日 17:40:20   作者：wql19881207  
這篇文章主要介紹了jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法,結(jié)合實(shí)例形式詳細(xì)分析了filter的功能及4種具體用法,需要的朋友可以參考下

本文實(shí)例分析了jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法。分享給大家供大家參考，具體如下：

.filter(selector)

此方法用于在匹配元素中按照選擇器表達(dá)式進(jìn)行篩選。
記?。菏褂么朔椒ū仨毜脗魅脒x擇器表達(dá)式參數(shù)，不然會(huì)報(bào)錯(cuò)“'nodeType' 為空或不是對(duì)象”

另外請(qǐng)注意這個(gè)filter方法和jquery中的find方法的區(qū)別:
filter方法是對(duì)匹配元素進(jìn)行篩選，而find方法是對(duì)匹配元素的后代元素進(jìn)行篩選。

從jquery1.4版本開始，filter方法又添加了兩個(gè)新的用法，現(xiàn)在一共有四種用法了。

下面來具體看看這四種用法：

一、 .filter(selector)

這種用法是在已匹配的元素中按照給定的selector參數(shù)（jquery選擇器表達(dá)式）進(jìn)行篩選，然后將匹配的元素包裝成jquery元素集合返回。這個(gè)方法是用來縮小匹配范圍的，selector參數(shù)可以是多個(gè)表達(dá)式用逗號(hào)連接起來。

來看例子：

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");
//將索引為偶數(shù)的li背景變?yōu)榧t色

上面的jquery代碼和下面的jquery代碼效果是一樣的

$("ul>li:even").css("color","red");
//將索引為偶數(shù)的li背景變?yōu)榧t色

再來看一下選擇器表達(dá)式用逗號(hào)連接起來的用法：

$("ul>li").filter(":even,.item").css("color","blue");
//將索引為偶數(shù)和calss為item的li背景變?yōu)樗{(lán)色

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="獲取索引為偶數(shù)的li">
<input type="button" id="test2" value="獲取索引為偶數(shù)和calss為item的li">
<script>
$(function(){
  $("#test1").click(function(){
    $("ul>li").filter(":even").css("color","red");//將索引為偶數(shù)的li背景變?yōu)榧t色
    //這個(gè)式子和 $("ul>li:even").css("color","red"); 等效
  });
  $("#test2").click(function(){
    $("ul>li").filter(":even,.item").css("color","blue");//將索引為偶數(shù)和calss為item的li背景變?yōu)樗{(lán)色
  });
});
</script>

二、 .filter( function(index) )

這種使用方法是對(duì)匹配的元素進(jìn)行遍歷，如果function(index)返回的值為true的話，那么這個(gè)元素就被選中，如果返回值為false的話，那么這個(gè)元素就不被選中

index參數(shù)是當(dāng)前的匹配元素在原來的元素集合中的索引。

如果您對(duì)上面的解釋不清楚的話（本人表達(dá)能力有點(diǎn)欠缺~^_^），可以好好看看下面的例子：

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");

上面代碼的結(jié)果是 第二個(gè)div元素和 id為“fourth”的div元素的邊框變成了雙線顏色為藍(lán)色

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="點(diǎn)擊我看看上面的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參數(shù)為DOM對(duì)象，如果element DOM對(duì)象和匹配的元素是同一個(gè)元素的話，那么這個(gè)元素會(huì)被匹配。這種用法是1.4版本新加的，我還沒想出來有什么用處

看例子吧：

還是對(duì)上面的HTML代碼，看jquery代碼：

復(fù)制代碼 代碼如下:
$("div").filter(document.getElementById("third")).css("border", "5px double blue");

結(jié)果是id為third的div元素邊框有變化。

這個(gè)例子舉得很雞肋，大家會(huì)說何必這么麻煩呢？還不如直接:

$("#third").css("border", "5px double blue");

的確，我也是這樣想的，但是既然是1.4版本新加的，那肯定會(huì)是有用到的地方的，不會(huì)是雞肋的，只是我的jquery水平還太低，還沒發(fā)現(xiàn)而已，如果哪位看官有想到用處的話，還望賜教！

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="點(diǎn)擊我看看上面的div的變化">
<script>
$("#test").click(function(){
  $("div").filter(document.getElementById("third")).css("border", "5px double blue");
});
</script>

四、 .filter(jQuery object)

這個(gè)用法和上面的.filter( element )的用法差不多，只是一個(gè)參數(shù)為DOM對(duì)象，一個(gè)參數(shù)為jquery對(duì)象，我還是感覺比較雞肋。

看例子：

同樣是對(duì)上面的HTML代碼，看jquery代碼：

$("div").filter($("#third")).css("border", "5px double blue");

結(jié)果是id為third的div元素邊框有變化。
同樣直接用下面的jquery代碼會(huì)更好：

$("#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="點(diǎn)擊我看看上面的div的變化">
<script>
$("#test").click(function(){
  $("div").filter($("#third")).css("border", "5px double blue");
});
</script>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery遍歷算法與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論