Jquery find與filter函數區別說明

2019-11-21 00:30:48

字體：大中小

來源：轉載

供稿：網友

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

基本是find子元素找，filter是平級找

?find 函數是在當前對象集合的子元素中進行查詢;
?filter 函數是對當前對象集合進行過濾, 利用過濾條件縮小范圍;
?find 函數的參數是 jQuery 選擇器表達式;
?filter 的參數也是選擇器表達式, 但可以有多個條件, 用逗號分隔(邏輯或關系);
?filter 的參數也可以是個函數, 調用函數時會自動傳入 index 參數, 函數需返回 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="iwvjtn8m0"   class="first">first content<span id="iwvjtn8m0"    class="test">test content</span></div> <div   id="iwvjtn8m0"   class="last">last<span id="iwvjtn8m0"    class="test">last test content</span></div> <div   id="iwvjtn8m0"   class="last">last<span>last no test content</span></div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：JS 事件延遲執行說明分析

下一篇：關于可運行代碼無法正常執行的使用說明