jquery選擇器

基本選擇器：

$(”#myELement”) —— 選擇id值等于myElement的元素，id值不能重複在文檔中隻能有一個id值是myElement是以得到的是唯一的元素

$(”div”) —— 選擇所有的div标簽元素，傳回div元素數組

$(”.myClass”) —— 選擇使用myClass類的css的所有元素

$(”*”) —— 選擇文檔中的所有的元素，以運用多種的選擇方式進行聯合選擇：例如$(”#myELement,div,.myclass”)

jQuery 使用 CSS 選擇器來選取 HTML 元素。

$("p") 選取 <p> 元素。

$("p.intro") 選取所有 class="intro" 的 <p> 元素。

$("p#demo") 選取 id="demo" 的第一個 <p> 元素。

層疊選擇器：

$(”form input”) —— 選擇所有的form元素中的input元素

$(”#main > *”) —— 選擇id值為main的所有的子元素

$(”label + input”) —— 選擇器傳回的是label标簽後面直接跟一個input标簽的所有input标簽元素

$(”#prev ~ div”) —— 該選擇器傳回的為id為prev的标簽元素的所有的屬于同一個父元素的div标簽

組選擇器:

下面還是現做一個約定:把”标簽名或#id名或.class名”記作mix,則mix表示一個标簽名,或一個#id或一個.class.

$(“mix,mix,mix,…”), 如:$(“div,#test1,p,.test2,#test3″)

後代選擇器:

$(“mix mix”),當然可以是多個嵌套,但後代選擇器可以是深層子代,是以$(“mix mix mix …”)這種寫法作用不大.例子:$(“div .test”):在div标簽内的所有具有test的class的後代元素(就是被div嵌套的class屬性為test的标簽)

臨近選擇器:

$(“mix+mix”),選取下一個兄弟節點.如:$(“div +#test”),id為test的的節點必須是div的下一個兄弟節點.

<div></div><p id=”test”></p>在$(“div + #test”)中能取到p段落節點

<div></div><p></p><p id=”test”></p>則不能取到

基本過濾選擇器：

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

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

$(”tr:even”) —— 選擇所有的tr元素的第0，2，4… …個元素

$(”tr:odd”) —— 選擇所有的tr元素的第1，3，5… …個元素

$(”td:eq(2)”) —— 選擇所有的td元素中序号為2的那個td元素

$(”td:gt(4)”) —— 選擇td元素中序号大于4的所有td元素

$(”td:ll(4)”) —— 選擇td元素中序号小于4的所有的td元素

冒号限定結點選擇器:$(“mix:condition”):mix标簽,并且滿足限定條件.

E:root:類型為E,并且是文檔的根元素

E:nth- child(n):是其父元素的第n個類型為E的子元素 ,基數從1開始

E:first-child:是其父元素的第1個類型為E的子元素

E:last- child:是其父元素的最後一個類型為E的子元素

E:only-child:且是其父元素的唯一一個類型為E的子元素

E:empty: 沒有子元素（包括text節點）的類型為E的元素

E:enabled

E:disabled:類型為E,允許或被禁止的使用者界面元素

E:checked: 類型為E,處于選中狀态的使用者界面元素（例如單選按鈕或複選框）

E:visible:選擇所有可見元素(display值為block或 visible,visibility值為visible元素,不包括hide域)

E:hidden:選擇所有隐藏元素(非Hide域,且 display值為block或visible,visibility值為visible的元素)

E:not(s):類型為E,不比對選擇器s

E:eq(n),E:gt(n),E:lt(n): 元素限定

E:first:相當于E:eq(0)

E:last:最後一個比對的元素

E:even:從比對的元素集中取序數為偶數的元素

E:odd:從比對的元素集中取序數為奇數的元素

E:parent:選擇包含子元素（包含text節點）的所有元素

E:contains(‘test’): 選擇所有含有指定文本的元素

内容過濾選擇器：

$(”div:contains(’John’)”) —— 選擇所有div中含有John文本的元素

$(”td:empty”) —— 選擇所有的為空（也不包括文本節點）的td元素的數組

$(”div:has(p)”) —— 選擇所有含有p标簽的div元素

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

可視化過濾選擇器：

$(”div:hidden”) —— 選擇所有的被hidden的div元素

$(”div:visible”) —— 選擇所有的可視化的div元素

屬性過濾選擇器：

$(”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元素

$(”input[id][name$='man']“) —— 可以使用多個屬性進行聯合選擇，該選擇器是得到所有的含有id屬性并且那麼屬性以man結尾的元素

子元素過濾選擇器：

$(”div span:first-child”) —— 傳回所有的div元素的第一個子節點的數組

$(”div span:last-child”) —— 傳回所有的div元素的最後一個節點的數組

$(”div button:only-child”) —— 傳回所有的div中隻有唯一一個子節點的所有子節點的數組

$(“mix>mix”),這個放在後代選擇器後面是為了和它做對比.子選擇器隻能選擇第一代子代.不處理深層嵌套.例子:

$(“div>.test”)

<div><p></p></div>對這裡的p段落标簽有效.但對

<div><p><p></p></p></div>對這裡的p段落标簽無效,這裡要用

$(“div .test)

表單元素選擇器：

$(”: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元素或表單的隐藏域

表單元素過濾選擇器：

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

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

$(”:checked”) —— 選擇所有的被checked的表單元素

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

xPath 路徑查詢:

先介紹下xPath的文法:

/:選取根節點

//:選取文檔中所有符合條件的節點,不管該節點位于何處

.:選取目前節點

..:選取單前節點的父節點

@:選取屬性,這個在之前說過了(屬性選擇器)

nodename:選取節點下的所有節點

jQuery 中的應用:

根節點是很少用到的,常用的如下面的例子:

$(“div/p”)相當于$(“div>p”)

$(“div//p”) 相當于$(“div p”)

$(“//div/../p”):所有div節點的父節點下的p标簽

還有相對路徑的寫法以及支援的Axis選擇器,還不是會應用,不介紹了…已經一大堆了

$的其他用法:

$(html節點):根據提供的原始HTML标記字元串,動态建立由jQuery對象包裝的DOM元素.如:

$(“<div><p>Hello</p></div>”).appendTo(“#body”);

把<div><p>Hello</p>< /div>添加到body元素中

$(document):網頁文檔對象

$(document.body):網頁body對象, 和$(“body”)是一樣的

$(函數):DOM載入後就執行該函數.是以$(document).ready()可以寫做$()

$(選擇器部分,選擇器來源):這個舉例說明

$(“input:radio”,document.forms[0]):在文檔的第一個表單中,搜尋所有單選按鈕

$(“div”,xml.responseXML):查詢指定XML文檔中的所有div元素

選擇器來源可以是:作為上下文的 DOM元素,文檔或jQuery對象

還有兩個:$.extend(prop)和$.noConflict()是和插件以及和其他庫相容的使用,以後再寫

jQuery的core部分還有:

eq(數字):将比對的元素集合縮減為一個元素。這個元素在比對元素集合中的位置變為 0,而集合長度變成1

gt(數字):将比對的元素集合縮減為給定位置之後的所有元素

lt(數字):将比對的元素集合縮減為給定位置之前的所有元素

上面三個的例子:

$(“div:eq(1)”)//第2個div

$(“div:gt(2)”)//第3個div以及之後的div

$(“div:lt(2)”)//第2個div以及之前的div,即第1個div和第2個div

length或 size():目前比對的元素數量

each():以每一個比對的元素作為上下文來執行一個函數。這意味着,每次執行傳遞進來的函數時,函數中的 this關鍵字都指向一個不同的元素(每次都是一個不同的比對元素).而且,在每次執行函數時,都會給函數傳遞一個表示作為執行環境的元素在比對的元素集合中所處位置的數字值作為參數.

$(“img”).each(function(i){ this.src = “test” + i + “.jpg”; });//疊代圖像,并設定它們的src屬性

get():如果沒有參數,傳回所有,是一個對象數組;如果帶參數,必須是數字,基數從0開始.例子:

$(“div”).get():傳回一個div對象數組

$(“div”).get(1):傳回第二個div對象

index(需求的元素節點對象):傳回數字.用個例子說明:

$(“div”).index($(“.test”))[1] //表示從所有div節點中查找class屬性為test的節點.并且找的是第二個節點(基數從0開始).傳回值是該節點在div節點中的位置(基數也是從0開始).

本文轉自linzheng 51CTO部落格，原文連結:http://blog.51cto.com/linzheng/1081761