jQuery過濾方法filter()使用詳解
- php中世界最好的语言原創
- 2018-04-24 11:52:183413瀏覽
這次帶給大家jQuery過濾方法filter()使用詳解，jQuery過濾方法filter()使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
現在有這樣一種需求,需要選擇所有有背景圖片的元素.
這個問題有點棘手.我們無法使用選擇表達式來完成這個問題了.
使用jQuery的DOM過濾方法filter(),可以根據函數中表達的任何條件選擇元素.
jQuery中的過濾器方法允許傳遞一個字串(也就是選擇器表達式)作為參數.
或者傳遞的是一個函數.它的返回值將定義某個元素是否被選中.
傳遞的函數將對當前選擇集中的每個元素運行.
當函數返回假時,對應的函數就從選擇集中被刪除掉.每當回傳值為真的時候,對應的元素
不受影響.
jQuery('*').filter(function(){
return !!jQuery(this).css('
background
');
});上述程式碼選擇所有具有背景圖片的元素.
初始集合是所有元素( *).然後以一個函數為參數呼叫filter().
這個函數在每個集合上進行是否有屬性background屬性的判斷,
如果有,則保留.否則,則在結果集中刪除這個元素.
你所看到的!! 是javascript中間任何undefined ,空類型,當然還有false.
如果函數呼叫傳回的是這些值,那麼函數傳回false,從而在集合中刪除
沒有background屬性的元素.
實際上,!!並不是必要的.因為jQuery將把這些返回值轉化為Boolean類型.但是保留仍然是一個好的主意.
這樣任何人看到你的程式碼的時候,都能絕對肯定你的意圖.(這有助於程式碼的可讀性).
在傳遞個filter()的函數中,可以透過this關鍵字引用當前元素.
將它包含在jQuery函數中就變成了一個jQuery物件了.
this //常規的元素物件.
jQuery(this) //jQuery物件.
下面是激發你想像的一些例子.
jQuery('p').filter(function(){
var width = jQuery(this).width;
return width >100 && widht < 200;
});
//返回子元素有10个或者20个的元素.
jQuery('*').filter(function(){
var children = jQuery(this).childern().length;
return children ===10 || children ===20;
});<html>
<head>
<title></title>
<style type="text/css">
.c1{
background-color
: yellow;
}
.c2{
background-color: green;
}
p{
background-color: pink;
}
h3{
background-color: gray;
}
</style>
</head>
<body>
<p class="c1">Bye Bye Beautiful</p>
<p class="c2">Nothing but the girl</p>
<p>The Lazy song</p>
<h2>If I die young</h2>
<h3>New soul</h3>
<script type="text/javascript" src="jquery.2.0.3.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var ret = $('*').filter(function(index) {
return !$(this).css('background-color');
});
$.each(ret, function(index, val) {
$(val).css('background-color','black');
});
});
</script>
</body>
</html>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是jQuery過濾方法filter()使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！