jQuery 的過(guò)濾方法可以允許我們根據(jù)特定元素在一組元素中的位置來(lái)選擇該元素嫂冻。關(guān)于 jQuery 過(guò)濾方法有以下幾種梭稚，前三種是最基本的方法，后兩種是其他方法絮吵，它們可以讓我們選擇與特定條件匹配或者是不匹配的元素：
| 方法 | 描述 |
|---|---|
| first() | 返回被選元素的首個(gè)元素 |
| last() | 返回被選元素的最后一個(gè)元素 |
| eq() | 返回被選元素中帶有指定索引號(hào)的元素 |
| filter() | 規(guī)定一個(gè)標(biāo)準(zhǔn)，不匹配這個(gè)標(biāo)準(zhǔn)的元素會(huì)被從集合中刪除忱屑，匹配的元素會(huì)被返回 |
| not() | 返回不匹配標(biāo)準(zhǔn)的所有元素 |
first()方法
first() 方法用于返回指定元素的第一個(gè)元素蹬敲。
示例：
我們來(lái)看下面這個(gè)例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("li").first().css({"background-color":"pink"});
});
</script>
</head>
<body>
<h3>我最喜歡吃的水果</h3>
<div class="my">
<ul>
<li>西瓜</li>
<li>哈密瓜</li>
<li>菠蘿</li>
<li>水蜜桃</li>
<li>草莓</li>
</ul>
</div>
<div class="you">
<p>你最喜歡吃的水果是什么呢？</p>
</div>
</body>
</html>
上述代碼中莺戒，first() 方法會(huì)幫我們找到第一個(gè) <li> 元素伴嗡，并且通過(guò) css() 方法將找到的第一個(gè) <li> 元素背景顏色設(shè)置為粉色。效果如下所示：
last()方法
last()方法剛好與 first() 方法作用相反从铲，用于返回指定元素的最后一個(gè)元素瘪校。
示例：
例如假設(shè)我們要找到最后一個(gè) <li> 元素，可以像下面這樣寫(xiě)：
$(function(){
$("li").last().css({"background-color":"pink"});
});
效果如下所示：
eq()方法
eq() 方法用于返回一個(gè)具有特定元素的特定索引號(hào)的元素名段。需要注意的是阱扬，首個(gè)元素的索引號(hào)是從 0 開(kāi)始，而不是 1伸辟。
示例：
例如在前面的示例中麻惶，一共有五個(gè) <li> 元素，那么第一個(gè) <li> 元素的索引號(hào)為 0信夫，第二個(gè)為 1窃蹋，以此類(lèi)推卡啰。
我們可以試著將索引號(hào)為 3 的 <li> 元素背景顏色設(shè)置為粉色，代碼如下所示：
$(function(){
$("li").eq(3).css({"background-color":"pink"});
});
演示效果：
從上圖中我們可以很清楚的看出警没，索引號(hào)為 3 的元素為"水蜜桃"匈辱。
filter()方法
filter() 方法允許我們指定一個(gè)條件，與條件不匹配的元素將從選擇中刪除杀迹，并返回匹配的元素亡脸。
示例：
例如下面代碼中，選出 class 屬性為 sweet 的 <li> 元素佛南，并將其背景顏色設(shè)置為粉色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("li").filter(".sweet").css({"background-color":"pink"});
});
</script>
</head>
<body>
<h3>我最喜歡吃的水果</h3>
<div class="my">
<ul>
<li class="sweet">西瓜</li>
<li class="sweet">哈密瓜</li>
<li>菠蘿</li>
<li class="sweet">水蜜桃</li>
<li>草莓</li>
</ul>
</div>
<div class="you">
<p>你最喜歡吃的水果是什么呢梗掰？</p>
</div>
</body>
</html>
演示效果：
not()方法
not() 方法返回所有與條件不匹配的元素。作用正好與 filter() 方法相反嗅回。
示例：
選出 class 屬性值不為 sweet 的 <li> 元素：
$(function(){
$("li").not(".sweet").css({"background-color":"pink"});
});
演示效果：
