表達式過濾,就是根據需要使用“自定義表達式”的方式來選取符合條件的元素。這種自定義的表達式,可以是簡單的選擇器表達式,也可以是復雜的選擇器表達式。
在jQuery中,表達式過濾方法共有2種:(1)filter();(2)has()。
filter()方法是jQuery中功能最為強大的過濾方法。它可以使用表達式進行過濾,也可以使用函數返回值進行過濾。
語法:
filter(expression)
說明:
參數expression是一個jQuery選擇器表達式。所謂的jQuery選擇器表達式,說白了就是我們在前幾章所學到的選擇器。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { $("ul li").filter("#red,#yellow").click(function () { $(this).css("color", "red"); }) }) </script> </head> <body> <ul> <li id="red">紅色red</li> <li>橙色orange</li> <li id="yellow">黃色yellow</li> <li>綠色green</li> <li>藍色blue</li> <li>紫色purple</li> </ul> </body> </html>
默認情況下,在浏覽器預覽效果如下:
當我們點擊“紅色”、“黃色”這兩個列表項,預覽效果如下:
分析:
filter()方法除了表達式過濾之外,還有一種函數過濾的方式。
語法:
filter(fn)
說明:
fn表示函數。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { $("ul li") .filter(function () {return $("span", this).length == 1;}) .css("color", "red"); }) </script> </head> <body> <ul> <li>紅色red</li> <li><span>橙色orange</span></li> <li><span><span>黃色yellow</span></span></li> <li>綠色green</li> <li>藍色blue</li> <li>紫色purple</li> </ul> </body> </html>
在浏覽器預覽效果如下:
分析:
filter(function () {return $("span", this).length == 1;})表示選擇在內部子元素中span長度為1的li元素,這裡只有“橙色orange”這一項符合。
雖然filter()方法非常強大,而且功能幾乎涵蓋我們前幾節所學的到的各種過濾方法。但是由於filter()方法內部封裝的東西太多,導致運行速度過慢。因此我們在實際開發中,能用其他的過濾方法,就盡量少用filter()方法。但是這句話並不是說filter()方法沒啥卵用哈,當實在沒辦法的時候,大家還是義不容辭地去用吧。
在jQuery中,表達式過濾除了filter()方法之外還有一個has()方法。has()方法也是一個過濾方法,雖然沒有filter()方法那麼強大,但是運行速度比較快。在實際開發中,has()相對filter()用得更多一些。
語法:
$().has(expression)
說明:
參數expression是一個jQuery選擇器表達式。所謂的jQuery選擇器表達式,說白了就是我們在前幾章所學到的選擇器。
has()方法用於選取符合條件的元素,符合的就保留,不符合的就刪除。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> body{text-align:center;} #main { text-align:left; margin:100px auto; padding:15px; border:1px dashed gray; display:inline-block; } </style> <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { $("ul li").has("span").css("color", "red"); }) </script> </head> <body> <ul> <li>紅色red</li> <li><span>橙色orange</span></li> <li><span>黃色yellow</span></li> <li>綠色green</li> <li>藍色blue</li> <li>紫色purple</li> </ul> </body> </html>
在浏覽器預覽效果如下:
分析:
has()方法和filter()方法功能是相似的,不過has()方法沒有函數過濾的方式。實際上,我們可以把has()方法看成filter()方法的縮小版。
此外,has()方法類似於jQuery的“:has()”選擇器,跟eq()方法與:eq()選擇器一樣的道理,has()方法也是對jQuery選擇器的一種補充,使得我們更加方便靈活地操作元素。