jquery中選擇器分為哪三種
jquery的三種選擇器:1、基本選擇器,由元素ID、元素名稱、類別名稱、多個選擇符組成;2、層次選擇器,透過DOM元素間的層次關係取得元素;3、過濾選擇器,依照過濾規則的不同,該選擇器還可分為簡單過濾、內容過濾、可見過濾、屬性過濾、表單過濾等。
本教學操作環境:windows7系統、jquery1.10.2版本、Dell G3電腦。
1、基本選擇器
它由元素ID、元素名稱、多個選擇符組成,透過基本選擇器可以實現大多數頁面元素的查找
#選擇器 | 功能描述 |
---|---|
##id | 根據給定的ID匹配一個元素 |
element | 根據給定的元素名稱來匹配所有元素 |
.class | 根據給定的類別來匹配元素 |
* | 來匹配所有元素 |
selector1,selectorN | 將每個選擇器配對到元素合併後一起返回 |
2、層次選擇器
層次選擇器透過DOM元素間的層次關係取得元素,其主要的層級關係包括後代、父子、相鄰、兄弟關係,透過其中某一類關係可以方便快速地定位元素。
選擇器 | 功能描述 |
---|---|
#ancestor descendant | 根據祖先元素來匹配所有的後代元素 |
parent>child | #根據父元素來匹配所有的子元素 |
prev next | 符合所有緊接在prev元素後的相鄰元素 |
#pre~siblings | 符合pre元素之後的所有兄弟元素 |
3、過濾選擇器
過濾?肯定是要加入過濾條件的。透過「:」新增篩選條件,例如「$(“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號或符合屬性值的內容,並以「[」號開始、一"]"號結束
選擇器 | 功能描述 |
---|---|
取得包含給定屬性的元素 | |
取得等於給定的屬性是某個特定值的元素 | |
取得不等於給定的屬性是某個特定值的元素 | |
取得給定的屬性是以某些值開始的元素 | |
#取得給定的屬性是以某些值結束的元素 | |
#取得給定的屬性是以包含某些值的元素 | |
#取得符合多個條件的符合屬性的元素 |
5)子元素過濾器
在頁面開發過程中,嚐嚐遇到突出指定某行的需求。雖然使用基本過濾選擇器“:eq(index)"可實現單一表格的顯示,但無法滿足大量資料和多個表格的選擇需求。為了實現這樣的功能,jQuery中可以透過子元素過濾選擇器輕鬆取得所有父元素中的某個元素。功能描述 | |
---|---|
取得每個父元素下的特定位置元素,索引號碼從1開始 | |
取得每個父元素下的第一個子元素 | |
#取得每個父元素下的最後一個子元素 | |
取得每個父元素下的僅有一個子元素 |
6)表單對象屬性過慮器
表單物件屬性過濾選擇器透過表單中的某物件屬性特徵取得此元素,如enabled、disabled、checked、selected屬性。功能描述 | |
---|---|
取得表單中所有屬性為可用的元素 | |
#取得表單中素有屬性為不可用的元素 | |
取得表單中所有被選取的元素 | |
取得表單中所有被選取option的元素 |
7)表單過慮器
#在jQuery選擇器中引入表單選擇器,該選擇器專為表單量身打造,透過它可以在頁面中快速定位某表單物件。功能描述 | |
---|---|
#取得所有input、textarea、select | |
#取得所有單行文字方塊 | |
#取得所有密碼方塊 | |
取得所有單選按鈕 | |
取得複選框 | |
取得所有提交按鈕 | |
取得所有影像域 | |
取得所有重設按鈕 | ##:button |
:file | |
web前端影片】
以上是jquery中選擇器分為哪三種的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

jQuery引用方法詳解:快速上手指南jQuery是一個受歡迎的JavaScript庫,被廣泛用於網站開發中,它簡化了JavaScript編程,並為開發者提供了豐富的功能和特性。本文將詳細介紹jQuery的引用方法,並提供具體的程式碼範例,幫助讀者快速上手。引入jQuery首先,我們需要在HTML檔案中引入jQuery函式庫。可以透過CDN連結的方式引入,也可以下載

jQuery中如何使用PUT請求方式?在jQuery中,發送PUT請求的方法與發送其他類型的請求類似,但需要注意一些細節和參數設定。 PUT請求通常用於更新資源,例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先,確保引入了jQuery庫文件,然後可以透過以下方式發送PUT請求:$.ajax({u

jQuery是一款廣泛應用於前端開發的快速、小巧、功能豐富的JavaScript庫。自2006年發布以來,jQuery已成為眾多開發者的首選工具之一,但在實際應用中,它也不乏一些優點和缺點。本文將深度剖析jQuery的優勢與劣勢,並結合具體的程式碼範例進行說明。優點:1.簡潔的語法jQuery的語法設計簡潔明了,可以大幅提升程式碼的可讀性和編寫效率。比如,

標題:jQuery小技巧:快速修改頁面所有a標籤的文字在網頁開發中,我們經常需要對頁面中的元素進行修改和操作。使用jQuery時,有時候需要一次修改頁面中所有a標籤的文字內容,這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本,同時給出具體的程式碼範例。首先,我們需要引入jQuery庫文件,確保在頁面中引入了以下程式碼:<

jQuery如何移除元素的height屬性?在前端開發中,經常會遇到需要操作元素的高度屬性的需求。有時候,我們可能需要動態改變元素的高度,而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性,並提供具體的程式碼範例。在使用jQuery操作高度屬性之前,我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度

標題:使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫,被廣泛用於處理DOM操作。在網頁開發中,經常會遇到需要修改頁面上連結標籤(a標籤)的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標,並提供具體的程式碼範例。首先,我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼:

jQuery是一種流行的JavaScript庫,被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中,eq()方法是用來選擇指定索引位置的元素的方法,具體使用方法和應用場景如下。在jQuery中,eq()方法選擇指定索引位置的元素。索引位置從0開始計數,即第一個元素的索引是0,第二個元素的索引是1,依此類推。 eq()方法的語法如下:$("s

如何判斷jQuery元素是否具有特定屬性?在使用jQuery操作DOM元素時,常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下,我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性,並附上具體的程式碼範例。方法一:使用attr()方法和typeof運算子//判斷元素是否具有特定屬
