jquery中filter方法用法實(shí)例分析
本文實(shí)例講述了jquery中filter方法用法。分享給大家供大家參考。具體分析如下：
filter()方法將匹配元素集合縮減為匹配指定選擇器的元素。
filter方法中的參數(shù)可以為字符串值，包含供匹配當(dāng)前元素集合的選擇器表達(dá)式。
一、filter的參數(shù)類型可分為兩種
1、傳遞選擇器
$('a').filter('.external')
2、傳遞過(guò)濾函數(shù)
return $(this).hasClass('external');
})
二、Jquery中find與filter區(qū)別
1、find()會(huì)在div元素內(nèi) 尋找 class為classname的元素。
2、filter()則是篩選div的class為classname的元素。
3、基本是find子元素找，filter是平級(jí)找
4、find 函數(shù)是在當(dāng)前對(duì)象集合的子元素中進(jìn)行查詢;
5、filter 函數(shù)是對(duì)當(dāng)前對(duì)象集合進(jìn)行過(guò)濾, 利用過(guò)濾條件縮小范圍;
6、find 函數(shù)的參數(shù)是 jQuery 選擇器表達(dá)式;
7、filter 的參數(shù)也是選擇器表達(dá)式, 但可以有多個(gè)條件, 用逗號(hào)分隔(邏輯或關(guān)系);
8、filter 的參數(shù)也可以是個(gè)函數(shù), 調(diào)用函數(shù)時(shí)會(huì)自動(dòng)傳入 index 參數(shù), 函數(shù)需返回 true或false 以選中或排除元素.
例如：
<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>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- JQuery遍歷DOM節(jié)點(diǎn)的方法
- jQuery向上遍歷DOM樹(shù)之parents(),parent(),closest()之間的區(qū)別
- jQuery里filter()函數(shù)與find()函數(shù)用法分析
- jQuery中filter()方法用法實(shí)例
- jQuery filter函數(shù)使用方法
- jQuery 過(guò)濾not()與filter()實(shí)例代碼
- jQuery中filter(),not(),split()使用方法
- Jquery find與filter函數(shù)區(qū)別 說(shuō)明
- JQuery替換DOM節(jié)點(diǎn)的方法
- JQuery復(fù)制DOM節(jié)點(diǎn)的方法
- JQuery刪除DOM節(jié)點(diǎn)的方法
- JQuery插入DOM節(jié)點(diǎn)的方法
- JQuery創(chuàng)建DOM節(jié)點(diǎn)的方法
- JQuery查找DOM節(jié)點(diǎn)的方法
- jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法詳解
相關(guān)文章
將要高亮顯示的文字加上<span>段落標(biāo)記， class=”mask”的div 做為遮罩層，使此遮罩層位于文字內(nèi)容之上（z-index屬性，使用Jquery給段落動(dòng)態(tài)添加樣式類。2009-12-12
jQuery事件多次綁定與解綁問(wèn)題實(shí)例分析
這篇文章主要介紹了jQuery事件多次綁定與解綁問(wèn)題,結(jié)合實(shí)例形式分析了jQuery事件多次綁定情況下的運(yùn)行情況,以及解綁相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
通過(guò)XMLHttpRequest和jQuery實(shí)現(xiàn)ajax的幾種方式
AJAX大家已經(jīng)都知道了，是為了實(shí)現(xiàn)異步通訊，提高用戶體驗(yàn)度，而將很多舊知識(shí)（XML,DOM,JavaScript,HTML,Jquery,Css……）重新融合的一個(gè)新的知識(shí)框架。而，XMLHttpRequest對(duì)象則是其中的重重之中,本篇文章主要給大家介紹通過(guò)XMLHttpRequest和jQuery實(shí)現(xiàn)ajax的幾種方式2015-08-08
這篇文章主要介紹了jQuery仿寫百度百科的目錄樹(shù)醫(yī)保詞條樣式，點(diǎn)擊右側(cè)的目錄樹(shù)，左側(cè)跳轉(zhuǎn)到指定的錨點(diǎn)位置，滾動(dòng)鼠標(biāo)，游標(biāo)跟隨一起滾動(dòng)至響應(yīng)鏈接位置，具體實(shí)現(xiàn)思路大家參考下本文2017-01-01
jquery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后展開(kāi)列表內(nèi)容的導(dǎo)航欄效果
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后展開(kāi)列表內(nèi)容的導(dǎo)航欄效果,通過(guò)簡(jiǎn)單的jQuery鏈?zhǔn)讲僮鲗?shí)現(xiàn)針對(duì)頁(yè)面元素的遍歷及樣式動(dòng)態(tài)變換功能,需要的朋友可以參考下2015-09-09
jQuery File Upload 是一個(gè)Jquery文件上傳組件，支持多文件上傳、取消、刪除，上傳前縮略圖預(yù)覽、列表顯示圖片大小，支持上傳進(jìn)度條顯示；支持各種動(dòng)態(tài)語(yǔ)言開(kāi)發(fā)的服務(wù)器端.這篇文章主要介紹了jQuery File Upload文件上傳插件使用,需要的朋友可以參考下2016-12-12
Bootstrap是最流行的前端開(kāi)發(fā)框架。本文涉及到bootstrap的特性介紹，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-10-10
jQuery+jqmodal彈出窗口實(shí)現(xiàn)代碼分明
jQuery+jqmodal彈出窗口的制作方法，需要的朋友可以參考下。2010-06-06
表格增行刪行一般情況下都是通過(guò)修改html結(jié)構(gòu)實(shí)現(xiàn)的，接下來(lái)為大家介紹下如何使用jquery實(shí)現(xiàn)表格增行刪行，感興趣的各位可不要錯(cuò)過(guò)了哈2013-03-03
這篇文章主要介紹了jQuery必不可少的小技巧，這些小技巧就像是創(chuàng)建的快捷方式，可以幫助大家快速開(kāi)發(fā)，感興趣的小伙伴們可以參考一下2015-11-11