jquery常用選擇器種類及其使用原理的介紹

 jquery選擇器、css3選擇器各種各樣的選擇器，作為非常靈活的jquery選擇器到底如何使用呢？

一、對於jQuery選擇器基本用法

在CSS3選擇器標淮在草案定義的選擇器語法中，jQuery支援相當完整的一套子集，同時也加入了一些非標準但很有用的偽類。注意:本節講述的是 jQuery選擇器。其中有不少選擇器(但不是全部)可以在CSS樣式表中使用。選擇器語法有三層結構。你肯定已經見過選擇器中最簡單的形式。 ”#te st”選取id屬性為”test”的元素。 ”blockquote”選取文件中的所有

元素，而”p.note” 則選取所有class屬性為”note”的

元素。簡單選擇器可以組合成“組合選擇器”，例如 “p.note>p”和“blockquote i”，只要用組合字元做分隔符號就行。簡單選擇器和組合選擇器也可以分成組成逗號分隔的清單。這個選擇器組是傳遞給$()函數最常見的形式。在解釋組合選擇器 和選擇器組之前，我們必須先了解簡單選擇器的語法。

1、簡單選擇器使用

簡單選擇器的開頭部分(顯式或隱式地)是標籤類型宣告。例如，如果只對

元素感興趣，簡單選擇器可以用“P”開頭。如果選取的元素和標籤名稱無關，則可以使用萬用字元「*」號來取代。如果選擇器沒有以標籤名稱或通配符開頭，則隱式含有一個通配符。

標籤名或通配符指定了備選文件元素的初始集。在簡單選擇器中，標籤類型聲明之後的部分由零個或多個過濾器組成。過濾器從左到右應用，和書寫順序一致，其中每一個都會縮小選取元素集。下表列舉了jQuery支援的篩選器。

jQuery選擇過濾器

過濾器 意義

# id 符合id屬性為id的元素。在有效的}ITML文件中，永遠不會出現多個元素擁有相同的ID，因此該過濾器通常會作為獨立選擇器來使用

##.class 匹配class屬性(是一串被解析成用空格分隔的單字列表)含有class單字的所有元素

#[attr] 匹配擁有attr屬性(和值無關)的所有元素

[attr=val] 匹配擁有attr屬性且值為val的所有元素

[attr!=val] 符合沒有attr屬性、或attr屬性的值不為val的所有元素((jQuery的擴展)

[ attr^=val] 符合attr屬性值以val開頭的元素

#[attr$=val] 符合attr屬性值以val結尾的元素

[attr*=val] 符合attr屬性值含有val的元素

##[attr~ =val]

當其attr屬性解釋為一個由空格分隔的單字清單時，符合其中包含單字val的元素。相同

[attr|=val]

匹配attr屬性值以val開頭且其後沒有其他字符，或其他字符是以連字符開頭的元素

:animated

符合正在動畫中的元素，該動畫是由jQuery產生的

:button 符合和元素(jQuery的擴充)

#:checkbox 匹配元素( jQuery的擴展)，當明確帶有input標籤前綴”input:checkbox”時，該過濾器更高效

:checked 符合選取的input元素

:contains(text) 符合含有指定text文字的元素(jQuery的擴充)。此濾鏡中的圓括號確定了文字的範圍—無須添加引號。被過濾的元素的文本是由textContent或innerText屬性來決定的—這是原始文檔文本，不帶標籤和註釋

:disabled 匹配禁用的元素

:empty 符合沒有子節點、沒有文字內容的元素

:enabled符合沒有停用的元素

:eq(n) 符合基於文件順序、序號從0開始的選取清單中的第n個元素(jQuery的擴充)

:even 符合清單中偶數序號的元素。由於第一個元素的序號是0，因此實際上選取的是第1個、第3個、第5個等元素(jQuery的擴充)

:file 符合元素(jQuery的擴充)

:first 符合清單中的第一個元素。和「:eq(0)」相同(jQuery的擴展)

:first-child 匹配的元素是其父節點的第一個子元素。注意:這與「:first」不同

:gt(n) 符合基於文件順序、序號從0開始的選取清單中序號大於n的元素( jQuery的擴充)

:has(sel) 符合的元素擁有符合內嵌選擇器sel的子孫元素

:header 符合所有頭元素:

,

,

,

,

或

(jQuery的擴充)

:hidden 符合所有在螢幕上不可見的元素:大體上可以認為這些元素的offsetWidth和offsetHeight為0

#:image 符合元素。注意該過濾器不會符合元素( jQuery的擴充)

:input 符合使用者輸入元素:, 和<button>( jQuery的擴充)</button>

:last 符合選取清單中的最後一個元素(( jQuery的擴充)

:last-child 相符的元素是其父節點的最後一個子元素。

:lt(n)

符合基於文件順序、序號從0開始的選取清單中序號小於n的元素( jQuery的擴充)#

:not(sel) 符合的元素不符合內嵌選擇器sel

:nth(n) 與「:eq(n)」相同(jQuery的擴展)

:nth-child(n) 匹配的元素是其父節點的第n個子元素。 。可以是數值、單字even,單字odd或計算公式。 使用「:nth-child(even)」來選取那些在其父節點的子元素中排行第2或第4等序號的元素。使用「:nth-child(odd)」來選取那 些在其父節點的子元素中排行第1、第3等序號的元素。

更常見的情況是，n是xn或x n+y這種計算公式，其中x和y是整數，n是字面量n。因此可以用nth-child(3n+1)來選取第1個、第4個、第7個等元素。

注意該過濾器的序號是從1開始的，因此如果一個元素是其父節點的第一個子元素，會認為它是奇數元素，匹配的是3n +1，而不是3n。要和“:even以及“:odd”過濾器區分開來，後者匹配的序號是從0開始的。

:odd 匹配列表中奇數(從0開始)序號的元素。

匹配那些是其父節點唯一子節點的元素

:parent

匹配是父節點的元素，這與“:empty”相反(jQuery的擴充)

:password

符合元素(jQuery的擴充)

#:radio

符合元素( j Query的擴充)

##:reset 匹配和元素(jQuery的擴展)

:selected 匹配選取的元素。 和元素(jQuery的擴展)

##:text 匹配元素(jQuery的擴充)

:visible 符合所有目前可見的元素:大體上可以認為這些元素的offsetWidth和offsetHeight的值不為0，這和「:hidden」相反

#注意:表中列舉的部分選擇器在圓括號中接受參數。元素在其父節點的子元素中排行第1或第2等，只要它們含有“JavaScript”單詞，就不包含元素。 1): text (JavaScript):not(:has(a))

#通常來說，指定標籤類型前綴，可以讓篩選器的運作更有效率。使用”:radio”來選取單選框按鈕，使用“input:radio”會更好。 ID過濾器是個例外，不添加標籤前綴時它會更有效率。例如，選擇器“#address”通常比更明確的“form#address”更有效率。

2、組合選擇器用法

#使用特殊運算符或「組合符「可以將簡單選擇器組合起來，表達文件樹中元素之間的關係。下表列舉了jQuery支援的組合選擇器。這些組合選擇器與CSS3支援的組合選擇器是一樣的。

以下是一些組合選擇器的範例:

"blockquote i"              //符合

裡面的元素

"ol > 的直接子元素

"#output+*"                 //id="output"元素後面的兄弟元素

" p.note > h1+p"           //緊接在

的

元素，在

裡面

注意組合選擇器並不限於組合兩個選擇器:組合三個甚至更多選擇器也是允許的。組合選擇器從左到右處理。

3、選擇器組合

#傳遞給$()函數(或在樣式表中使用)的選擇器就是選擇器組，這是一個逗號分隔的列表，由一個或多個簡單選擇器或組合選擇器構成。選擇器組匹配的元 素只要匹配該選擇器組中的任何一個選擇器就行。對我們來說，一個簡單選擇器也可以認為是一個選擇器組。以下是選擇器組的一些範例:

"h1, h2,h3"             //符合

,

和

元素

"#p1, #p2, #p3"         //符合id為p1, p2或p3的元素

"p.note, p.note "      //匹配class="note"的

和

元素

"body>p,p.note>p"     //和

的

子元素

#注意:CSS和jQuery選擇器語法允許在簡單選擇器的某些過濾器中使用圓括號，但並不允許使用圓括號來進行更常見的分組。例如，不能把選擇器組或組合選擇器放在圓括號中並且當成簡單選擇器:

(h1, h2, h3)+p          //非法

h1+p, h2+p, h3+p        //正確的寫法

#二、怎麼選取

除了$()函數支援的選擇器語法，jQuery也定義了一些選取方法。本章中我們看到過的jQuery方法大部分都是在選取元素上執行某種操作。選取方法不一樣:它們會修改選取元素集，對其進行提取、擴充或僅作為新選取操作的起點。

本節描述這些選取方法。你會注意到這些選取方法中的多數所提供的功能與選擇器語法的功能是一樣的。

提取選取元素最簡單的方式是按位置提取。 first()傳回的jQuery物件僅包含選取元素中的第一個，last()傳回的jQuery物件則只 包含最後一個元素。更通用的是，eq()方法傳回物Query物件只包含指定序號的單一選取元素。 (在jQuery 1.4中，負序號也是允許的，會從選區的末尾開始計數。)注意這些方法傳回的jQuery物件只含有一個元素。這與常見的陣列序號是不一樣的，陣列序號傳回的單一元素沒有經過jQuery包裝:

var paras=$("p");

####paras.first()           //只選取第一個

元素############paras.last()           //只選取最後一個

P> ############paras.eq(1)             //選取第二個

############paras.eq(-2)       #######paras.eq(-2)       #######paras.eq(-2)      倒數第二個

############paras[1]                //第二個

元素本身######

透過位置提取選區更通用的方法是slice()o jQuery的slice()方法與Array.slice()方法類似:前者接受開始和結束序號(負序號會從結尾處計算)，傳回的jQuery物件包含從開始到結束序號(但不包含結束序號)的元素集。若省略結束序號，傳回的物件會包含所有從開始序號起的元素:

$("p").slice(2,5)       //選取第3個、第4個和第5個

元素

$("p").slice(-3)      //選取最後3個

元素

filter()是通用的選取範圍過濾方法，有3種呼叫方式:

　　傳遞選擇器字串給filter()，它會傳回一}jQuery對象，僅包含也匹配該選擇器的選取元素。

　　傳遞另一個jQuery物件給filter()，它會傳回一個新的jQuery對象，該物件包含這兩們Query物件的交集。也可以傳遞元素數組甚至單一文檔元素給filter()。

　　傳遞判斷函數給filter()，會為每一個匹配元素呼叫函數，filter()則傳回一個jQuery對象，僅包含判斷函數為true(或任意真值)的元素。在呼叫判斷函數時，this值為目前元素，參數是元素序號。

$("p").filter(".note")        //與$("p.note")一樣

#$("p").filter($(".note"))     //與$("p.note")一樣

$("p") .filter(function(idx){return idx%2 == 0})         //與$("p:even")一樣

#not()方法與filter()一樣，除了意義與filter()相反。如果傳遞選擇器字串給not()它會傳回一個新的jQuery對象，該 物件只包含不符合該選擇器的元素。如果傳遞jQuery物件、元素陣列或單一元素給not()，它會傳回除了明確排除的元素之外的所有選取元素。如果傳遞判斷函數給not()，則該判斷函數的呼叫就與在filter()一樣，只是傳回的jQuery物件只包含那些使得判斷函數傳回false或其他假值的元素:

$("p").not("#header, #footer");        //除了兩個特殊元素之外的所有元素

在jQuery 1.4中，提取選區的另一種方式是has()方法。如果傳入選擇器，has()會傳回一個新的jQuery對象，只包含有子孫元素來匹配該選擇器的選取元素。如果傳入文件元素給has()，它會將選取元素集調整為那些是指定元素祖先節點的選取元素:

$("p").has(" a[href]")         //包含連結的段落

#add()方法會擴充選取範圍，而不是過濾或擷取。可以將傳給$()函數的任何參數(除了函數)照樣傳給add()方法。 add()方法會傳回 原來的選取元素，加上那些向$()函數的參數所選(或建立)的元素。 add()會移除重複元素，並對該組合選區進行排序，以便裡面的元素按照文檔中的順序排列:

//選取所有

和所有

元素的等價方式

$("p, p")             //使用選擇器群組

## $("p").add(p)         //給add()傳入選擇器$("p").add($("p"))    / /給add()傳入jQuery物件

var paras = document.getElementsByTagName("p");       //類別陣列物件

####### $("p").add(paras);        //給add()傳入元素陣列##################1、恢復到先前的選取元素集# #################為了實作方法的鍊式調用，很多jQuery物件的方法最後都會回傳呼叫物件。然而本節所述的方法都會傳回新的jQuery物件。可以鍊式呼叫下去，但必須清楚意識到，在鍊式呼叫的後面所操作的元素集，可能已經不是該鍊式呼叫開始時的元素集了。 ######

實際情況還要複雜些。當這裡所描述的選取方法在建立或傳回一個新的ejQuery物件時，它們會為該物件新增一個到它衍生自的舊jQuery物件的 內部參考。這會建立一個jQuery物件的鍊式表或堆疊。 end()方法用來彈出堆疊，傳回已儲存的jQuery物件。在鍊式呼叫中呼叫end()會將匹配元素 集還原到先前的狀態。考慮以下程式碼:

//尋找所有

元素，然後在其中尋找

元素

//高亮顯示

元素，然後給

元素添加邊框

//首先，不使用鍊式呼叫

#var ps = $("p");

var paras = p.find("p");

paras.addClass ("highlight");

ps.css("border", "solid black 1px");

 

#//下面展現如何使用鍊式呼叫來實現

$("p").find("p").addClass("highlight").end().css ("border", "solid black 1px");

//也可以將操作調換順序來避免呼叫end()

$("p").css("border", "solid block 1px").find("p").addClass("highlight");

##如果想手動定義選取元素集，同時保持與end()方法的相容，可以將新的元素集作為陣列或類別陣列物件傳遞給push5tack()方法。指定的元素會成為新的選取元素，先前選取的元素集則會壓入堆疊中，之後可以用end()方法還原它們:

var sel = $(" p");             //選取所有

元素

sel.pushStack(document.getElementsByTagName("p"));     1//修改為所有>

##sel.end()；的選區棧，就有最後一個方法需要解說。 andSelf()傳回一個新的jQuery對象，包含目前的所有 選取元素，加上先前的所有選取元素(會移除重複的)。 andSelf()和add()方法一樣，或許「addPrev」是一個更具描述性的名字。作為例子，考慮上面程式碼的下述變化:高亮顯示

元素及其父節點中的

元素，然後給這些

元素添加邊框:

#$("p").find("p").andSelf().           //尋找

，合併上

## addClass("highlight")。 ##css("border", "solid black 1px");       //為ps新增邊框

2.將選取元素集合用做上下文

######上面描述的filter(). add()、和not()方法會在各自的選取元素集上執行交集、並集和差集運算。 jQuery也定義一些其他選取方法可將目前選取元素集作為上下文來使 用。對選取的每一個元素，這些方法會使用該選取元素作為上下文或起始點來得到新的選取元素集，然後傳回一個新的jQuery對象，包含所有新的選取元素的 並集。與add()方法類似，會移除重複元素並進行排序，以便元素會按照在文件中出現的順序排列好。 ############此類別選取方法中最通用的是find()。它會在每一個目前選取元素的子孫元素中尋找與指定選擇器字串相符的元素，然後它傳回一個新的 jQuery物件來代表所符合的子孫元素集。注意這些新選取的元素不會併入已存在的選取元素集中。同時注意find()和filter()不 同，filter()不會選取新元素，只是簡單地將目前選取的元素集進行縮減:######

$("p").find("p")            //在中找出元素，且與$("p p")相同

#該類別中的其他方法傳回新的jQuery對象，代表目前選取元素集中每個元素的子元素、兄弟元素或父元素。大部分都接受可選的選擇器字串作為參數。當不傳入選擇器時，它們會傳回所有子元素、兄弟元素或父元素。傳入選擇器時，它們會過濾元素集，僅傳回符合的。

children()方法傳回每個選取元素的直接子元素，可以用可選的選擇器參數進行篩選:

/ /尋找id為"header"和"footer"元素的子節點元素中的所有元素

//與$("#header>span, #footer> span")相同

$("#header, #footer").children("span")

contents()方法與children()方法類似，不同的是它會傳回每一個元素的所有子節點，包括文字節點。如果選取元素集中 有

next()和prev()方法傳回每一個選取元素的下一個和上一個兄弟元素(如果有的話)。如果傳入了選擇器，則會只選取符合該選擇器的兄弟元素:

$("h1").next("p")      //與$("h1 +p")相同

$("h1").prev()         //

元素前面的兄弟元素

# nextAll()和prevAll()傳回每一個選取元素前面或後面的所有兄弟元素(如果有的話)。 siblings()方法則傳回每個選取元素的所有兄弟元素(選取元素本身不是自己的兄弟元素)。如果給這些方法傳人選擇器，則只會傳回符合的兄弟元素:

$("#footer").nextAll("p")       //緊跟著#footer元素所有的

兄弟元素

$("#footer").prevAll()          //#footer元素前面的所有兄弟元素

從jQuery 1.4開始，nextUntil()和prevUntil()方法接受一個選擇器參數，會選取選取元素後面或前面的所有兄弟元素，直到找到某個符合該選擇器的兄弟元素為止。如果省略該選擇器，這兩個方法的作用就和不帶選擇器的nextAll()和prevAll()一樣。

parent()方法傳回每一個選取元素的父節點:

$("li").parent()        //列表元素的父節點，例如和

元素

#parents()方法傳回每一個選取元素的祖先節點(向上直到元素)。 parent()和parents()都接受一個可選的選擇器字串參數:

$("a[href]").parents("p")            //含有連結的

元素

parentsUntil()傳回每個選取元素的祖先元素，直到出現符合指定選擇器的第一個祖先元素。 closest()方法必須傳人一個選擇器 字串，會傳回每一個選取元素的祖先元素中符合該選擇器的最近一個祖先元素(如果有的話)。對此方法而言，元素被認為是自身的祖先元素。在jQuery 1.4中，也可以給closest()傳入一個祖先元素作為第二個參數，用來阻止jQuery往上找時超越該指定元素:

$(" a[href]").closest("p")         //包含連結的最裡層

$("a[href]").parentsUntil(" :not(p)")      //所有包裹的

元素

以上就是jquery選擇器及原理的全部介紹，感謝大家的閱讀！

以上是jquery常用選擇器種類及其使用原理的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！