jquery怎麼實現過濾功能

jquery中透過過濾選擇器來實現過濾功能。依照不同的過濾規則，過濾選擇器可分為：1、內容過濾選擇器，可根據元素中的文字內容或所包含的子元素特徵取得元素，其文字內容可以絕對模糊或絕對匹配進行元素定位； 2、可見性過濾器，可根據元素是否可見的特徵取得元素；3、屬性過濾器，可根據元素的某個屬性取得元素；4、表單物件屬性過慮器，可透過表單中某物件屬性特徵取得元素，如enabled屬性。

本教學操作環境：windows7系統、jquery3.6.0版本、Dell G3電腦。

jquery中透過多種過濾選擇器來實現過濾功能。

過濾？肯定是要加入過濾條件的。透過「:」新增篩選條件，例如「$(“div:first」)」傳回div元素集合的第一個div元素，first是篩選條件。
依照不同的篩選規則，在過濾選擇器中又可分為：簡單過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單物件屬性過濾選擇器等。

1）簡單過濾選擇器

過濾選擇器根據某類過濾規則進行元素的匹配，書寫時都以冒號（：）開頭；簡單過濾選擇器是過濾選擇器中過濾選擇中使用最廣泛的一種

選擇器	功能描述
first()或:first	取得第一個元素
last()或:last	取得最後一個元素
:not(selector)	取得除給定選擇器外的所有元素
:even	取得所有索引值為偶數的元素，索引號碼從0開始
#:odd	取得所有索引值為奇數的元素，索引號碼從0開始
:eq(index)	取得指定索引值的元素，索引號碼從0開始
:gt(index)	取得所有大於給定索引值的元素，索引號碼從0開始
:lt(index)	#取得所有小於給定索引值的元素，索引號碼從0開始
:header	取得所有標題類型的元素，如h1、h2…元素集合
:animated	取得正在執行動畫效果的元素

2）內容過濾選擇器

內容過濾選擇器根據元素中的文字內容或所包含的子元素特徵獲取元素，其文字內容可以絕對模糊或絕對匹配進行元素定位

#選擇器	功能描述
#:contains(text)	取得包含給定文本的元素
:empty	取得所有不包含子元素或文字的空元素
:has(selector)	取得含有選擇器所匹配的元素
:parent	取得含有子元素或文字的元素

#3）可見性篩選器

可見性篩選選擇器根據元素是否可見的特徵取得元素

選擇器	功能描述
#:hidden	#取得所有不可見元素，或是type為hidden的元素
:visble	取得所有的可見元素

4）屬性篩選器

屬性篩選器根據元素的某個屬性取得元素，如ID號或符合屬性值的內容，並以「[」號開始、一"]"號結束

##[attribute^=value] #取得給定的屬性是以某些值開始的元素[attribute$=value]#取得給定的屬性是以某些值結束的元素[attribute*=value]取得給定的屬性是以包含某些值的元素 [selector1][selector2][selectorN]取得符合多個條件的符合屬性的元素

5）子元素過濾器

在頁面開發過程中，嚐嚐遇到突出指定某行的需求。雖然使用基本過濾選擇器“:eq(index)"可實現單一表格的顯示，但無法滿足大量資料和多個表格的選擇需求。為了實現這樣的功能，jQuery中可以透過子元素過濾選擇器輕鬆取得所有父元素中的某個元素。

#選擇器	功能描述
#[attribute]	#取得包含給定屬性的元素
[attribute=value]	取得等於給定的屬性是某個特定值的元素
[attribute!=value]	取得不等於給定的屬性是某個特定值的元素

選擇器	功能描述
:nth-child(eq/ even/odd/index)	取得每個父元素下的特定位置元素，索引號碼從1開始
:first-child	取得每個父元素下的第一個子元素
:last-child	#取得每個父元素下的最後一個子元素
#:only-child	取得每個父元素下的僅有一個子元素

6）表單對象屬性過慮器

表單物件屬性過濾選擇器透過表單中的某物件屬性特徵取得此元素，如enabled、disabled、checked、selected屬性。

選擇器	功能描述
:enabled	取得表單中所有屬性為可用的元素
:disabled	#取得表單中素有屬性為不可用的元素
:checked	取得表單中所有被選取的元素
#:selected	取得表單中所有被選取option的元素

7）表單過慮器

#在jQuery選擇器中引入表單選擇器，該選擇器專為表單量身打造，透過它可以在頁面中快速定位某表單物件。

##:image取得所有影像域:reset取得所有重設按鈕##:button:file#【推薦學習：

選擇器	功能描述
:input	#取得所有input、textarea、select
:text	#取得所有單行文字方塊
:password	#取得所有密碼方塊
:radio	取得所有單選按鈕
:checkbox	取得複選框
:submit	取得所有提交按鈕
取得所有按鈕
獲取所有文件域

jQuery視頻教學

、web前端影片】

以上是jquery怎麼實現過濾功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！