01第1節：jQuery過濾概述
在jQuery中，針對Html元素封裝了一系列的遍歷方法，有遍歷祖先的parent()/parents()，還有遍歷子孫的children()/find()，也有遍歷同胞的siblings()/next()/prev()等等。
這裡我們主要來學習jQuery的過濾操作，也是對Html DOM進行遍歷的，但是其功能更強大，查找的元素更精細。
與jQuery過濾相關的操作方法有3個，分別為：
First()方法：獲取第一個元素。Last()方法：獲取最後一個元素。Eq()方法：獲取相等的元素。Filter()方法：根據條件篩選元素。Not()方法：獲取不匹配的元素。
02第2節：first()方法
在jQuery中，使用first()方法獲取當前元素所在集合的第一個元素，first()方法只能返回單個的一個Html元素。
我們可以使用jQuery選擇器獲取一個Html元素的集合，然後再使用first()得到集合中的第一個元素。
現在舉一個例子，演示一下first()方法的使用：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">$().ready(function () {var p = $("div p").first().css("background-color", "red");console.log(p);});</script></head><body><div id="div1"><p id="p1">P0001</p><p id="p2">P0002</p></div></body></html>
此html代碼先使用$(「div p」)得到div標籤下的所有p元素，然後再使用first()方法得到第一個p元素，最後又使用了css()方法給得到的第一個p元素添加背景色。
運行結果如下：
圖1
從運行的結果上看，確實是給第一個p元素添加了背景色，使用first()方法實現了獲取第一個元素的功能。
03第3節：last()方法
使用jQuery中的last()方法可以獲取當前所選元素集合中的最後一個元素。
使用last()方法定位的只能是一個元素，且是元素集合中的最後一個元素。
使用last()方法得到最後一個元素的代碼如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">$().ready(function () {var p = $("div p").last().css("background-color", "red");console.log(p);});</script></head><body><div id="div1"><p id="p1">P0001</p><p id="p2">P0002</p><p id="p3">P0003</p></div></body></html>
此代碼只是將first()方法的案例中，使用last()方法得到最後一個元素，同樣也是使用css()方法添加背景色。
圖2
在圖2中的結果中，是將最後一個P元素添加了背景色為紅色。使用last()方法得到的是id=p3的元素。
04第4節：eq()方法
在jQuery中，使用eq()方法可以在Html元素集合中根據索引值來獲取元素，索引值是從0開始的，因此第一個Html元素的索引值是 0而不是1。
當使用jQuery選擇器得到一個元素集合後，每個元素都會給一個編號，這個編號就是從0開始的。
因此，使用eq()方法就可以根據編號來獲取Html元素。
在jQuery中使用eq()方法的代碼如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">$().ready(function () {var p = $("div p").eq(1).css("background-color", "red");console.log(p);});</script></head><body><div id="div1"><p id="p1">P0001</p><p id="p2">P0002</p><p id="p3">P0003</p></div></body></html>
在此代碼中，使用了$(「div p」)得到了3個p元素，而使用eq(1)得到編號為1的p元素，其實就是集合中第2個p元素。
將上面的代碼運行結果如下：
圖3
在圖3中，得到的P元素是第2個，它的編號是1。
05第5節：filter()方法
使用jQuery中的filter()方法可以在Html元素集合中篩選指定元素，可以根據標籤名、id、class等屬性獲取指定元素。
使用jQuery的filter()方法篩選元素的代碼如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">$().ready(function () {var p = $("div p").filter(".pu");console.log(p);});</script></head><body><div id="div1"><p id="p1">P0001</p><p id="p2">P0002</p><p id="p3">P0003</p></div></body></html>
在這裡，使用了filter(「.pu」)來篩選元素，.pu表示class的樣式為pu的元素。
運行結果如下：
圖4
在圖4中，我們得到了2個元素，這2個元素是p2和p3，且它們都帶有class=「pu」屬性和值，正好與filter(「.pu」)相匹配。
06第6節：not()方法
在jQuery中，有一個方法與filter()方法得到的結果正好相反，它就是not()方法。
Not()方法的含義是指將不匹配的元素返回，而filter()方法是將匹配的元素返回。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">$().ready(function () {var p = $("div p").not(".pu");console.log(p);});</script></head><body><div id="div1"><p id="p1">P0001</p><p id="p2">P0002</p><p id="p3">P0003</p></div></body></html>
在此Html代碼中，使用了not(「.pu」)來篩選元素，會得到class不是pu的所有元素。
運行一下上面的代碼：
圖5
在上圖的結果中，得到了1個元素，因為另外2個元素都帶有class=「pu」，而p1元素沒有class屬性，因此，使用not(「pu」)返回了p1元素。