表達式過濾，就是根據需要使用“自定義表達式”的方式來選取符合條件的元素。這種自定義的表達式，可以是簡單的選擇器表達式，也可以是復雜的選擇器表達式。
在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選擇器的一種補充，使得我們更加方便靈活地操作元素。