JQuery中常用的選取器

標籤：type   文本   nim   first   沒有   not   大於   選擇   image   

屬性選取器

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] 複合屬性選取器，需要同時滿足多個條件時使用。

基礎過濾選取器

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

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

3、:not(selector)用法: $(”input:not(:checked)”)傳回值 集合元素 說明: 去除所有與給定選取器匹配的元素.有點類似於”非”,意思是沒有被選中的input(當input的type=”checkbox”).

4、:even用法: $(”tr:even”) 傳回值 集合元素 說明: 匹配所有索引值為偶數的元素，從 0 開始計數.js的數組都是從0開始計數的.例如要選擇table中的行,因為是從0開始計數,所以table中的第一個tr就為偶數0.

5、: odd用法: $(”tr:odd”) 傳回值 集合元素 說明: 匹配所有索引值為奇數的元素,和:even對應,從 0 開始計數.

6、:eq(index)用法: $(”tr:eq(0)”) 傳回值 集合元素 說明: 匹配一個給定索引值的元素.eq(0)就是擷取第一個tr元素.括弧裡面的是索引值,不是元素排列數。

7、:gt(index)用法: $(”tr:gt(0)”) 傳回值 集合元素 說明: 匹配所有大於給定索引值的元素.

8、:lt(index)用法: $(”tr:lt(2)”) 傳回值 集合元素 說明: 匹配所有小於給定索引值的元素.

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

10、:animated(固定寫法) 傳回值 集合元素 說明: 匹配所有正在執行動畫效果的元素

內容過濾選取器

內容過濾選取器的過濾規則主要體現在它所包含的子項目和常值內容上

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

2、:empty用法: $(”td:empty”) 傳回值 集合元素 說明: 匹配所有不包含子項目或者文本的空元素

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

4、:parent用法: $(”td:parent”) 傳回值 集合元素 說明: 匹配含有子項目或者文本的元素.注意:這裡是”:parent”,可不是”.parent”哦!與上面講的”:empty”形成反義詞.

可見度過濾選取器

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

1、:hidden用法: $(”tr:hidden”) 傳回值 集合元素 說明: 匹配所有的隱藏元素，input 元素的 type 屬性為 “hidden” 的話也會被匹配到.意思是css中display:none和input type=”hidden”的都會被匹配到.同樣,要在腦海中徹底分清楚冒號”:”, 點號”.”和逗號”,”的區別.

2、:visible用法: $(”tr:visible”) 傳回值 集合元素 說明: 匹配所有的可見元素.

屬性過濾選取器

屬性過濾選取器的過濾規則是通過元素的屬性來擷取相應的元素

1、[attribute]用法: $(”div[id]“) ; 傳回值 集合元素 說明: 匹配包含給定屬性的元素. 例子中是選取了所有帶”id”屬性的div標籤.

2、[attribute=value]用法: $(”input[name=‘newsletter‘]“).attr(”checked”, true); 傳回值 集合元素 說明: 匹配給定的屬性是某個特定值的元素.例子中選取了所有 name 屬性是 newsletter 的 input 元素.

3、[attribute!=value]用法: $(”input[name!=‘newsletter‘]“).attr(”checked”, true); 傳回值 集合元素 說明: 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素.此選取器等價於:not([attr=value]),要匹配含有特定屬性但不等於特定值的元素,請使用[attr]:not([attr=value]).之前看到的 :not 派上了用場.

4、[attribute^=value]用法: $(”input[name^=‘news’]“) 傳回值 集合元素 說明: 匹配給定的屬性是以某些值開始的元素.,我們又見到了這幾個類似於正則匹配的符號.現在想忘都忘不掉了吧?

子項目過濾選取器

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

2、:first-child用法: $(”ul li:first-child”) 傳回值 集合元素 說明: 匹配第一個子項目.’:first’ 只匹配一個元素,而此選擇符將為每個父元素匹配一個子項目.這裡需要特別點的記憶下區別.

3、:last-child用法: $(”ul li:last-child”) 傳回值 集合元素 說明: 匹配最後一個子項目.’:last’只匹配一個元素,而此選擇符將為每個父元素匹配一個子項目.

4、: only-child用法: $(”ul li:only-child”) 傳回值 集合元素 說明: 如果某個元素是父元素中唯一的子項目,那將會被匹配.如果父元素中含有其他元素,那將不會被匹配.意思就是:只有一個子項目的才會被匹配!

表單選取器

1、:input用法: $(”:input”) ; 傳回值 集合元素 說明:匹配所有 input, textarea, select 和 button 元素

2、:text用法: $(”:text”) ; 傳回值 集合元素 說明: 匹配所有的單行文字框.

3、:password用法: $(”:password”) ; 傳回值 集合元素 說明: 匹配所有密碼框.

4、:radio用法: $(”:radio”) ; 傳回值 集合元素 說明: 匹配所有選項按鈕.

5、:checkbox用法: $(”:checkbox”) ; 傳回值 集合元素 說明: 匹配所有複選框

6、:submit用法: $(”:submit”) ; 傳回值 集合元素 說明: 匹配所有提交按鈕.

7、:image用法: $(”:image”) 傳回值 集合元素 說明: 匹配所有映像域.

8、:reset用法: $(”:reset”) ; 傳回值 集合元素 說明: 匹配所有重設按鈕.

9、:button用法: $(”:button”) ; 傳回值 集合元素 說明: 匹配所有按鈕.這個包括直接寫的元素button.

10、:file用法: $(”:file”) ; 傳回值 集合元素 說明: 匹配所有檔案域.

 

JQuery中常用的選取器