jQuery 選擇器（二）

過濾選擇器

過濾選擇器，就是在選擇器中通過「:」新增過濾條件。

按照不同的過濾規則，過濾選擇器可以分為基本過濾，內容過濾，可見性過濾，屬性過濾，子元素過濾和表單物件屬性過濾選擇器。

基本過濾選擇器

1.獲取第乙個input元素

var input_query=$(
"input:first"
);

2.獲取最後乙個input元素

var input_query=$(
"input:last"
);

3.獲取所有未被選中的input元素

var input_query=$(
"input:not(:checked)"
);

4.第乙個input元素算一，查詢所有第奇數個的input元素

var input_query=$(
"input:even"
);

5.從第二個input算起，查詢所有第偶數個的input元素

var input_query=$(
"input:odd"
);

6.查詢索引為1的input元素，索引值從0算起

var input_query=$(
"input:eq(1)"
);

7.查詢索引大於0的所有input元素

var input_query=$(
"input:gt(0)"
);

8.查詢索引小於2的所有input元素

var input_query=$(
"input:lt(2)"
);

9.獲取頁面所有標題元素

var h_query=$(
":header"
);

10.獲取所有正在執行動畫效果的元素

var animated_query=$(
":animated"
);

內容過濾器

它是對元素和文字內容的操作。

1.查詢所有html內容text文字的h1元素

var h1_query=$(
"h1:contains(text)"
);

2.獲取所有不含子標籤或html內容為空的元素

var td_query=$(
"td:empty"
);

3.查詢所有含有input子元素的元素

var td_query=$(
"td:has(input)"
);

4.查詢所有含有子標籤或有html內容的元素（它是乙個父節點）

var td_query=$(
"td:parent"
);

可見性過濾器

根據元素的可見與不可見狀態來選取元素。

1.查詢所有隱藏的input元素

var input_query=$(
"input:hidden"
);

2.查詢所有可見的input元素

var input_query=$(
"input:visible"
);

屬性過濾器

通過元素的屬性來選取相應的元素。

1.選取擁有此屬性的元素，「[attribute]」。

例如，查詢所有含有id屬性的input元素

var input_query=$(
"input[id]"
);

2.選取指定屬性值為value的所有元素，「[attribute=value]」。

例如，查詢name值為text11的input元素

var input_query=$(
"input[name='text11']"
);

3.選取屬性值不為value的所有元素，「[attribute !=value]」。

例如，查詢name值不等於text11的所有input元素

var input_query=$(
"input[name!='text11']"
);

4.選取屬性值以value開始的所有元素，「[attribute ^= value]」。

例如，查詢name值以text開頭的input元素

var input_query=$(
"input[name^='text']"
);

5.選取屬性值以value結束的所有元素，「[attribute $= value]」。

例如，查詢name值以11結尾的所有input元素

var input_query=$(
"input[name$='11']"
);

6.選取屬性值包含value的所有元素，「[attribute *= value]」。

例如，查詢name值中含有ext的所有input元素

var input_query=$(
"input[name*='ext']"
);

子元素過濾器

它是對某一元素的子元素進行選取的。

1.選取索引為index的元素、索引為偶數的元素、索引為奇數的元素，「:nth-child(index/even/odd)」。

例如，查詢所有在父元素中的所有子元素中索引為2的input元素。

nth-child()裡引數可選even是偶數，odd是奇數，n任意數即選取所有有父元素的input元素。

var input_query=$(
"input:nth-child(2)"
);

2.選取第乙個子元素，「:first-child」。

例如，查詢所有在父元素中的所有子元素中排第一的input元素。

var input_query=$(
"input:first-child"
);

3.選取最後乙個子元素，「:last-child」。

例如，查詢所有在父元素中所有子元素中排最後乙個的input元素。

var input_query=$(
"input:last-child"
);

4.選取唯一子元素，它的父元素只有它這乙個子元素，「:only-child」。

例如，查詢所有在父元素中是唯一子元素的input元素

var input_query=$(
"input:only-child"
);

表單過濾選擇器

選取表單元素屬性的過濾選擇器。

1.選取所有可用元素，「:enabled」。

例如，查詢所有可用的input元素

var input_query=$(
"input:enabled"
);

2.選取所有不可用元素，「:disabled」。

例如，查詢所有不可用的input元素

var input_query=$(
"input:disabled"
);

3.選取所有被選中的元素，「:checked」，如單選框、核取方塊。

例如，查詢所有選中的單選核取方塊

var input_query=$(
"input:checked"
);

4.選取所有被選中項元素，「:selected」，如下拉列表框、列表框。

例如，查詢所有選中的下拉框

var option_query=$(
"option:selected"
);

二 jQuery選擇器

jquery選擇器的優勢 1.簡潔的寫法 2.支援css1到css3選擇器，瀏覽器相容性好 3.完善的處理機制，使用jquery獲取網頁中不存在的元素不會報錯注意當要用jquery檢查某個元素在網頁上是否存在時，應該根據獲取到元素的長度來判斷或者轉化成dom物件來判斷，如下 if tt leng...

jQuery（二）選擇器

jquery選擇器 1.基本選擇器 jquery選擇器用於查詢滿足條件的元素。1.id id 選擇器,document.getelementbyid id 2.div 元素選擇器 document.getelementsbytagname div 3.myclass 類選擇器返回所有 class ...

Jquery選擇器（二）

三過濾選擇器 1.基本過濾器 1.獲取第乙個元素索引為0 document ready function 獲取最後乙個元素 document ready function 獲取偶數項元素 document ready function 獲取基數項元素 document ready functio...

jQuery 選擇器（二）

二 jQuery選擇器

jQuery（二）選擇器

Jquery選擇器（二）

相關推薦