JQuery中經常使用的選擇器

屬性選擇器

1>  [attribute] 概述：匹配包含給定屬性的元素。 示例 jQuery 代碼:$("div[id]") 描述:查找全部含有 id 屬性的 div 元素

2>  [attribute=value] 概述：匹配給定的屬性是某個特定值的元素

3> [attribute!=value] 概述：匹配全部不含有指定的屬性，或者屬性不等於特定值的元素。

4> [attribute^=value] 概述：匹配給定的屬性是以某些值開始的元素

5> [attribute$=value] 概述：匹配給定的屬性是以某些值結尾的元素

6> [attribute*=value] 概述：匹配給定的屬性是以包含某些值的元素

7> [selector1][selector2][selectorN] 複合屬性選擇器，須要同時知足多個條件時使用。

基礎過濾選擇器

一、:first用法: $(」tr:first」) ; 返回值 單個元素的組成的集合 說明: 匹配找到的第一個元素

二、:last用法: $(」tr:last」) 返回值 集合元素 說明: 匹配找到的最後一個元素.與 :first 相對應

三、:not(selector)用法: $(」input:not(:checked)」)返回值 集合元素 說明: 去除全部與給定選擇器匹配的元素.有點相似於」非」,意思是沒有被選中的input(當input的type=」checkbox」).

四、:even用法: $(」tr:even」) 返回值 集合元素 說明: 匹配全部索引值爲偶數的元素，從 0 開始計數.js的數組都是從0開始計數的.例如要選擇table中的行,由於是從0開始計數,因此table中的第一個tr就爲偶數0.

五、: odd用法: $(」tr:odd」) 返回值 集合元素 說明: 匹配全部索引值爲奇數的元素,和:even對應,從 0 開始計數.

六、:eq(index)用法: $(」tr:eq(0)」) 返回值 集合元素 說明: 匹配一個給定索引值的元素.eq(0)就是獲取第一個tr元素.括號裏面的是索引值,不是元素排列數。

七、:gt(index)用法: $(」tr:gt(0)」) 返回值 集合元素 說明: 匹配全部大於給定索引值的元素.

八、:lt(index)用法: $(」tr:lt(2)」) 返回值 集合元素 說明: 匹配全部小於給定索引值的元素.

九、:header(固定寫法)用法: $(」:header」).css(」background」, 「#EEE」) 返回值 集合元素 說明: 匹配如 h1, h2, h3之類的標題元素.這個是專門用來獲取h1,h2這樣的標題元素.

十、:animated(固定寫法) 返回值 集合元素 說明: 匹配全部正在執行動畫效果的元素

內容過濾選擇器

內容過濾選擇器的過濾規則主要體如今它所包含的子元素和文本內容上

一、:contains(text)用法: $(」div:contains(’John’)」) 返回值 集合元素 說明: 匹配包含給定文本的元素.這個選擇器比較有用，當咱們要選擇的不是dom標籤元素時,它就派上了用場了,它的做用是查找被標籤」圍」起來的文本內容是否符合指定的內容的.

二、:empty用法: $(」td:empty」) 返回值 集合元素 說明: 匹配全部不包含子元素或者文本的空元素

三、:has(selector) 用法: $(」div:has(p)」) 返回值 集合元素 說明: 匹配含有選擇器所匹配的元素的元素.（例子是匹配包含p元素的DIV）

四、:parent用法: $(」td:parent」) 返回值 集合元素 說明: 匹配含有子元素或者文本的元素.注意:這裏是」:parent」,可不是」.parent」哦!與上面講的」:empty」造成反義詞.

可見度過濾選擇器

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

一、:hidden用法: $(」tr:hidden」) 返回值 集合元素 說明: 匹配全部的不可見元素，input 元素的 type 屬性爲 「hidden」 的話也會被匹配到.意思是css中display:none和input type=」hidden」的都會被匹配到.一樣,要在腦海中完全分清楚冒號」:」, 點號」.」和逗號」,」的區別.

二、:visible用法: $(」tr:visible」) 返回值 集合元素 說明: 匹配全部的可見元素.

屬性過濾選擇器

屬性過濾選擇器的過濾規則是經過元素的屬性來獲取相應的元素

一、[attribute]用法: $(」div[id]「) ; 返回值 集合元素 說明: 匹配包含給定屬性的元素. 例子中是選取了全部帶」id」屬性的div標籤.

二、[attribute=value]用法: $(」input[name='newsletter']「).attr(」checked」, true); 返回值 集合元素 說明: 匹配給定的屬性是某個特定值的元素.例子中選取了全部 name 屬性是 newsletter 的 input 元素.

三、[attribute!=value]用法: $(」input[name!='newsletter']「).attr(」checked」, true); 返回值 集合元素 說明: 匹配全部不含有指定的屬性，或者屬性不等於特定值的元素.此選擇器等價於:not([attr=value]),要匹配含有特定屬性但不等於特定值的元素,請使用[attr]:not([attr=value]).以前看到的 :not 派上了用場.

四、[attribute^=value]用法: $(」input[name^=‘news’]「) 返回值 集合元素 說明: 匹配給定的屬性是以某些值開始的元素.,咱們又見到了這幾個相似於正則匹配的符號.如今想忘都忘不掉了吧?

子元素過濾選擇器

一、:nth-child(index/even/odd/equation)用法: $(」ul li:nth-child(2)」) 返回值 集合元素 說明: 匹配其父元素下的第N個子或奇偶元素.這個選擇器和以前說的基礎過濾中的 eq() 有些相似,不一樣的地方就是前者是從0開始,後者是從1開始. eg: 2 || even || odd || 3n || 3n+1

二、:first-child用法: $(」ul li:first-child」) 返回值 集合元素 說明: 匹配第一個子元素.’:first’ 只匹配一個元素,而此選擇符將爲每一個父元素匹配一個子元素.這裏須要特別點的記憶下區別.

三、:last-child用法: $(」ul li:last-child」) 返回值 集合元素 說明: 匹配最後一個子元素.’:last’只匹配一個元素,而此選擇符將爲每一個父元素匹配一個子元素.

四、: only-child用法: $(」ul li:only-child」) 返回值 集合元素 說明: 若是某個元素是父元素中惟一的子元素,那將會被匹配.若是父元素中含有其餘元素,那將不會被匹配.意思就是:只有一個子元素的纔會被匹配!

表單選擇器

一、:input用法: $(」:input」) ; 返回值 集合元素 說明:匹配全部 input, textarea, select 和 button 元素

二、:text用法: $(」:text」) ; 返回值 集合元素 說明: 匹配全部的單行文本框.

三、:password用法: $(」:password」) ; 返回值 集合元素 說明: 匹配全部密碼框.

四、:radio用法: $(」:radio」) ; 返回值 集合元素 說明: 匹配全部單選按鈕.

五、:checkbox用法: $(」:checkbox」) ; 返回值 集合元素 說明: 匹配全部複選框

六、:submit用法: $(」:submit」) ; 返回值 集合元素 說明: 匹配全部提交按鈕.

七、:image用法: $(」:image」) 返回值 集合元素 說明: 匹配全部圖像域.

八、:reset用法: $(」:reset」) ; 返回值 集合元素 說明: 匹配全部重置按鈕.

九、:button用法: $(」:button」) ; 返回值 集合元素 說明: 匹配全部按鈕.這個包括直接寫的元素button.

十、:file用法: $(」:file」) ; 返回值 集合元素 說明: 匹配全部文件域.