首頁 > 開發者 > JavaScript
jquery中filter方法用法執行個體分析，jqueryfilter
本文執行個體講述了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>
希望本文所述對大家的jQuery程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
