jquery選擇器有哪些？ jquery常用選擇器的介紹

jquery選擇器是用來找出元素節點的，jQuery中$()函數最強大、最常用的功能之一就是使用選擇器選擇DOM元素，所以，接下來的這篇文章就來跟大家介紹一下jquery中常用的選擇器有哪些。有需要的朋友可以看一看。

話不多說，讓我們直接進入正文~

jquery選擇器總共有四大類，分別為基本選擇器，層次選擇器，過濾選擇器和表單選擇器，下面我們分別來看看這四種jquery選擇器。

1、jquery的基本選擇器

基本選擇器是JQuery最常用的選擇器，也是最簡單的選擇器，它透過元素id、class和標籤名來尋找DOM元素。

$("#myELement")	#選擇id值等於myElement的元素，id值不能重複在文件中只能有一個id值是myElement所以得到的是唯一元素
$("div")	選擇所有的div標籤元素，傳回div元素陣列
$(".myClass")	選擇使用myClass類別的css的所有元素
$("*")	選擇文件中的所有的元素，可以運用多種的選擇方式進行聯合選擇：例如$("#myELement,div,.myclass")

注意：在網頁中id只能使用一次，即id具有唯一性，但class是允許重複使用的。

2、jquery層次選擇器

 層次選擇器透過DOM元素間的層次關係來取得元素，主要的層次關係包括父子、後代、相鄰、兄弟關係。

$("form input")	#選擇所有的form元素中的input元素
$("#main > *")	選擇id值為main的所有的子元素
$("label input")	選擇所有的label元素的下一個input元素節點，經過測試選擇器回傳的是label標籤後面直接跟一個input標籤的所有input標籤元素
$(" #prev ~ div")	同胞選擇器，該選擇器傳回的為id為prev的標籤元素的所有的屬於同一個父元素的div標籤

說明：只有這個方法回傳的是JQuery物件才能進行鍊式操作。

3、jquery過濾選擇器

過濾選擇器主要是透過特定的過濾規則來篩選所需的DOM元素，過濾規則與CSS中的偽類別選擇器語法相同，即選擇器都以一個冒號(:)開頭（關於css偽類選擇器更多知識可以參考css學習手冊）。依照不同的過濾規則，過濾選擇器可以分為基本過濾，內容過濾，可見性過濾，屬性過濾，子元素過濾和表單 物件屬性過濾選擇器共六種選擇器。下面我們分別來簡單看一下jquery這六種過濾選擇器

（1）jquery基本過濾選擇器

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

$("tr:first")：選擇所有tr元素的第一個

$("tr:last")：選擇所有tr元素的最後一個

$("input:not(:checked) span")  ：過濾掉：checked的選擇器的所有的input元素

$("tr:even")：選擇所有的tr元素的第0 ，2，4... ...個元素（注意：因為所選的多個元素時為數組，所以序號是從0開始）

$("tr:odd")：選擇所有的tr元素的第1，3，5... ...個元素

$("td:eq(2)")：選擇所有的td元素中序號為2的那個td元素

$("td:gt(4)") ：選擇td元素中序號大於4的所有td元素

$("td:ll(4)")：選擇td元素中序號小於4的所有的td元素

$(":header")：符合如 h1, h2, h3之類的標題元素.這個是專門用來取得h1,h2這樣的標題元素

$("div:animated")：符合所有正在執行動畫效果的元素

（2）jquery內容過濾選擇器

內容過濾選擇器的過濾規則主要體現在它所包含的子元素和文字內容。

$("div:contains('John')") ：選擇所有div中含有John文本的元素

$("td:empty") ：選擇所有的為空（也不包含文字節點）的td元素的陣列

$("div:has(p)") ：選擇所有含有p標籤的div元素

$("td:parent" )：選擇所有的以td為父節點的元素數組

（3）jquery可見性過濾選擇器

可見度過濾選擇器是根據元素的可見和不可見狀態來選擇對應的元素。

$("div:hidden")：選擇所有的被hidden的div元素

$("div:visible")：選擇所有的視覺化的div元素

#（4）jquery屬性過濾選擇器

屬性過濾選擇器的過濾規則是透過元素的屬性來取得對應的元素。

$("div[id]")： 選擇所有含有id屬性的div元素

#$("input[name='newsletter']")：選擇所有的name屬性等於'newsletter'的input元素

$("input[name!='newsletter']") ：選擇所有的name屬性不等於'newsletter'的input元素

$("input [name^='news']")： 選擇所有的name屬性以'news'開頭的input元素

#$("input[name$='news']") ：選擇所有的name屬性以'news'結尾的input元素

$("input[name*='man']") ：選擇所有的name屬性包含'news'的input元素

## （5）jquery子元素過濾選擇器

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$( "ul li:nth-child(3n 1)") ：符合其父元素下的第N個子或奇偶元素.這個選擇器和之前說的基礎過濾(Basic Filters)中的eq() 有些類似,不同的地方就是前者是從0開始,後者是從1開始。

$("div span:first-child")：傳回所有的div元素的第一個子節點的陣列

$("div span:last-child" )：傳回所有的div元素的最後一個節點的陣列

$("div button:only-child") ：傳回所有的div中只有唯一一個子節點的所有子節點的陣列

（6） jquery表單物件屬性過濾選擇器

此選擇器主要對所選的表單元素進行篩選。

$(":enabled")：選擇所有的可操作的表單元素

$(":disabled")：選擇所有的不可操作的表單元素

# $(":checked")：選擇所有的被checked的表單元素

$("select option:selected")：選擇所有的select 的子元素中被selected的元素

$(”input[@ name =S_03_22]“).parent().prev().text()：選取一個name 為”S_03_22″的input text框的上一個td的text值

$ (”input[@ name ^='S_']“).not(”[@ name $='_R']“)：名字以”S_”開始，並且不是以”_R”結尾的

$(”input[@ name =radio_01][@checked]“).val();：一個名為radio_01的radio所選的值

#$(" A B")：找出A元素下面的所有子節點，包含非直接子節點

$("A>B") ：找出A元素下面的直接子節點

$(" A B") ：找出A元素後面的兄弟節點，包含非直接子節點

$("A~B") ：找出A元素後面的兄弟節點，不包含非直接子節點

4、jquery表單選擇器

利用表單選擇器我們可以極為方便地取得表單的某個或某類型的元素。

注意：注意：要選取input中為hidden值的方法就是上面例子的用法,但是直接使用“:hidden” 的話就是匹配頁面中所有的不可見元素,包括寬度或高度為0的。

$(":input") ：選擇所有的表單輸入元素，包含input, textarea, select 和button

$(":text") ： 選取所有的text input元素

$(":password")： 選擇所有的password input元素

$(":radio") ：選擇所有的radio input元素

$(":checkbox ") ：選擇所有的checkbox input元素

##$(":submit") ：選擇所有的submit input元素

$(":image")  ： 選取所有的image input元素

$(":reset") ：選擇所有的reset input元素

$(":button") ：選擇所有的button input元素

$(":file ") ：選擇所有的file input元素

$(":hidden")：選擇所有類型為hidden的input元素或表單的隱藏域

以上就是本篇文章的全部內容了，關於jquery選擇器更多的內容大家可以參考php中文網的

jquery線上手冊進一步了解！ ！ ！

以上是jquery選擇器有哪些？ jquery常用選擇器的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！