jQuery基礎(chǔ)知識(shí)filter()和find()實(shí)例說(shuō)明
更新時(shí)間：2010年07月06日 23:06:06 作者：
這是jQuery里常用的2個(gè)方法。他們2者功能是完全不同的，而初學(xué)者往往會(huì)被誤導(dǎo)。
首先 我們看.find()方法：
現(xiàn)在有一個(gè)頁(yè)面，里面HTML代碼為;
<div class="css">
<p class="rain">測(cè)試1</p>
</div>
<div class="rain">
<p>測(cè)試2</p>
</div>
如果我們使用find()方法：
var $find = $("div").find(".rain");
alert( $find.html() ) ;
將會(huì)輸出：
如果使用filter（）方法：
var $filter = $("div").filter(".rain");
alert( $filter.html() );
將會(huì)輸出：
也許你已經(jīng)看出它們的區(qū)別了。
find()會(huì)在div元素內(nèi) 尋找 class為rain 的元素。
而filter()則是篩選div的class為rain的元素。
一個(gè)是對(duì)它的子集操作，一個(gè)是對(duì)自身集合元素篩選。
另外find()其實(shí)還可以用選擇器表示:
var $select = $("div .rain");
明白他們的區(qū)別了嗎？
現(xiàn)在有一個(gè)頁(yè)面，里面HTML代碼為;
復(fù)制代碼 代碼如下:
<div class="css">
<p class="rain">測(cè)試1</p>
</div>
<div class="rain">
<p>測(cè)試2</p>
</div>
如果我們使用find()方法：
var $find = $("div").find(".rain");
alert( $find.html() ) ;
將會(huì)輸出：
如果使用filter（）方法：
var $filter = $("div").filter(".rain");
alert( $filter.html() );
將會(huì)輸出：
也許你已經(jīng)看出它們的區(qū)別了。
find()會(huì)在div元素內(nèi) 尋找 class為rain 的元素。
而filter()則是篩選div的class為rain的元素。
一個(gè)是對(duì)它的子集操作，一個(gè)是對(duì)自身集合元素篩選。
另外find()其實(shí)還可以用選擇器表示:
var $select = $("div .rain");
明白他們的區(qū)別了嗎？
相關(guān)文章
基于jQuery 實(shí)現(xiàn)bootstrapValidator下的全局驗(yàn)證
這篇文章主要介紹了基于jQuery 實(shí)現(xiàn)bootstrapValidator下的全局驗(yàn)證 的相關(guān)資料,需要的朋友可以參考下2015-12-12
firefox下jQuery UI Autocomplete 1.8.*中文輸入修正方法
在FF下，切換到中文輸入法，再輸入中文，是不能立即自動(dòng)查詢，需要按下其他按鍵，比如CTRL，后來(lái)，通過(guò)修改源代碼即可修復(fù)這個(gè)問(wèn)題2012-09-09
基于jquery的loading 加載提示效果實(shí)現(xiàn)代碼
有時(shí)候?yàn)榱烁玫挠脩趔w驗(yàn)，使用jquery的朋友可以參考下代碼。2011-09-09
jQuery實(shí)現(xiàn)的隔行變色功能【案例】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的隔行變色功能,結(jié)合具體實(shí)例形式分析了jQuery事件響應(yīng)、元素遍歷及屬性動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了JQuery樣式與屬性設(shè)置方法,結(jié)合實(shí)例形式分析了jQuery屬性的獲取與設(shè)置、以及樣式的添加與刪除相關(guān)操作技巧,需要的朋友可以參考下2019-12-12
用自定義圖片代替原生checkbox實(shí)現(xiàn)全選,刪除以及提交的方法
下面小編就為大家?guī)?lái)一篇用自定義圖片代替原生checkbox實(shí)現(xiàn)全選,刪除以及提交的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
基于jQuery實(shí)現(xiàn)文本框只能輸入數(shù)字(小數(shù)、整數(shù))
在實(shí)際應(yīng)用中，文本框中有時(shí)候只能夠允許輸入整數(shù)，但是有時(shí)候可能更為"博愛(ài)"一點(diǎn)，可以允許輸入浮點(diǎn)數(shù)，下面就通過(guò)實(shí)例代碼介紹一下如何利用jquery實(shí)現(xiàn)此功能2016-01-01
基于EasyUI的基礎(chǔ)之上實(shí)現(xiàn)樹(shù)形功能菜單
這篇文章主要介紹了基于EasyUI的基礎(chǔ)之上實(shí)現(xiàn)樹(shù)形功能菜單,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-06-06
etmvc+jQuery EasyUI+combobox多值操作實(shí)現(xiàn)角色授權(quán)實(shí)例
本篇文章主要介紹了etmvc+jQuery EasyUI+combobox多值操作實(shí)現(xiàn)角色授權(quán)，實(shí)現(xiàn)對(duì)角色role進(jìn)行授權(quán)操作，有需要的可以了解一下。2016-11-11