Jquery find與filter函數(shù)區(qū)別說(shuō)明

更新時(shí)間：2010年05月13日 01:10:58 作者：

基本是find子元素找，filter是平級(jí)找

find()會(huì)在div元素內(nèi) 尋找 class為classname的元素。
filter()則是篩選div的class為classname的元素。

基本是find子元素找，filter是平級(jí)找

·find 函數(shù)是在當(dāng)前對(duì)象集合的子元素中進(jìn)行查詢(xún);
·filter 函數(shù)是對(duì)當(dāng)前對(duì)象集合進(jìn)行過(guò)濾, 利用過(guò)濾條件縮小范圍;
·find 函數(shù)的參數(shù)是 jQuery 選擇器表達(dá)式;
·filter 的參數(shù)也是選擇器表達(dá)式, 但可以有多個(gè)條件, 用逗號(hào)分隔(邏輯或關(guān)系);
·filter 的參數(shù)也可以是個(gè)函數(shù), 調(diào)用函數(shù)時(shí)會(huì)自動(dòng)傳入 index 參數(shù), 函數(shù)需返回 true或false 以選中或排除元素.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Document</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <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   id="skrhc77"   class="first">first content<span id="niahoqx"    class="test">test content</span></div> <div   id="wdcoln2"   class="last">last<span id="7tkr2ta"    class="test">last test content</span></div> <div   id="bjg2rik"   class="last">last<span>last no test content</span></div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

PHP+jquery+ajax實(shí)現(xiàn)分頁(yè)
這篇文章主要為大家詳細(xì)介紹了PHPjquery+ajax實(shí)現(xiàn)分頁(yè)的代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
點(diǎn)擊表單提交時(shí)出現(xiàn)jQuery沒(méi)有權(quán)限的解決方法
擊表單提交的時(shí)候會(huì)出現(xiàn) jQuery 沒(méi)有權(quán)限，試了一下jquery自帶的json方式提交成功
2014-07-07
jquery1.4 教程二 ajax方法的改進(jìn)
jquery1.4在ajax方法上進(jìn)一步的進(jìn)行優(yōu)化和調(diào)整，主要是做了如下的改進(jìn)。
2010-02-02
jquery無(wú)縫向上滾動(dòng)實(shí)現(xiàn)代碼
向上滾動(dòng)的效果想必大家都見(jiàn)過(guò)吧!無(wú)縫間歇向上滾動(dòng)應(yīng)該也不會(huì)陌生吧，接下來(lái)為大家介紹下jquery實(shí)現(xiàn)無(wú)縫間歇滾動(dòng)，感興趣的朋友可以參考下哈，希望可以幫助到你們
2013-03-03
淺談jQuery this和$(this)的區(qū)別及獲取$(this)子元素對(duì)象的方法
下面小編就為大家?guī)?lái)一篇淺談jQuery this和$(this)的區(qū)別及獲取$(this)子元素對(duì)象的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11
jquery css實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全
這篇文章主要為大家詳細(xì)介紹了jquery css實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
JQuery點(diǎn)擊行tr實(shí)現(xiàn)checkBox選中的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JQuery點(diǎn)擊行tr實(shí)現(xiàn)checkBox選中的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
jQuery創(chuàng)建自己的插件(自定義插件)的方法
在該系列之前的文章使用 jQuery：UI 項(xiàng)目中，我介紹了使用 jQuery 代碼中的插件來(lái)提高 web 應(yīng)用程序的效率。
2010-06-06
Jquery 焦點(diǎn)圖用于圖片展示效果代碼
今天因網(wǎng)站需要寫(xiě)了個(gè)圖片展示效果,其中用到了Jquery的data函數(shù)，剛學(xué)就被我用這了，昨天看時(shí)還覺(jué)得無(wú)甚用處，因?yàn)榭梢匀藶榈亟o一個(gè)節(jié)點(diǎn)加屬性嘛，不過(guò)省卻了幾句代碼而已。
2010-05-05
EasyUI 結(jié)合JS導(dǎo)出Excel文件的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇EasyUI 結(jié)合JS導(dǎo)出Excel文件的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11