jquery中filter方法用法實例分析

2019-11-20 13:12:27

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jquery中filter方法用法。分享給大家供大家參考。具體分析如下：

filter()方法將匹配元素集合縮減為匹配指定選擇器的元素。
filter方法中的參數可以為字符串值，包含供匹配當前元素集合的選擇器表達式。

一、filter的參數類型可分為兩種

1、傳遞選擇器
$('a').filter('.external')

2、傳遞過濾函數

復制代碼代碼如下:

$('a').filter(function(index) {
        return $(this).hasClass('external');
})

二、Jquery中find與filter區別

1、find()會在div元素內尋找 class為classname的元素。
2、filter()則是篩選div的class為classname的元素。
3、基本是find子元素找，filter是平級找

4、find 函數是在當前對象集合的子元素中進行查詢;
5、filter 函數是對當前對象集合進行過濾, 利用過濾條件縮小范圍;
6、find 函數的參數是 jQuery 選擇器表達式;

7、filter 的參數也是選擇器表達式, 但可以有多個條件, 用逗號分隔(邏輯或關系);
8、filter 的參數也可以是個函數, 調用函數時會自動傳入 index 參數, 函數需返回 true或false 以選中或排除元素.

例如：

復制代碼代碼如下:

<!DOCTYPE> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>Document</title> 
<script> 
$(function(){ 
$('#btn1').click(function(){ 
alert($('div').find('.test').html()); 
}); 
$('#btn2').click(function(){ 
alert($('div').filter('.test').html()); 
}); 
$('#btn3').click(function(){ 
alert($('div').filter('.last').html()); 
}); 
$('#btn4').click(function(){ 
alert($('div').filter('.first,.last').html()); 
}); 
}); 
</script> 
</head> 
<body> 
<input type="button" value="test-find" id="btn1" /> 
<input type="button" value="test-filter" id="btn2" /> 
<input type="button" value="test-filter" id="btn3" /> 
<input type="button" value="test-filter" id="btn4" /> 
<div class="first">first content<span class="test">test content</span></div> 
<div class="last">last<span class="test">last test content</span></div> 
<div class="last">last<span>last no test content</span></div> 
</body> 
</html>