4、過濾選擇器
過濾選擇器主要是通過特定的過濾規則來篩選出所需的DOM元素,過濾規則與CSS
中的偽類選擇器語法相同,即選擇器都以一個冒號(:)開頭。按照不同的過濾規則,
過濾選擇器可以分為基本過濾、內容過濾、可見性過濾、屬性過濾、子元素過濾和表
單對象屬性過濾選擇器。
1)基本過濾選擇器
:first、:last、
:not(selector)【去除所有與給定選擇器匹配的元素eg.$("input:not(.myBox)")
選取class不是myBox的input元素】、
:even【索引值是偶數,0開始】、
:odd【索引值是奇數,0開始】、
:eq(index)【選取指定索引值的元素】、
eg.$("ul li:eq(1)")獲取li里的第二個節點;
? ?$("ul li:eq(0)").text();獲取元素的第一個節點的文本;
:gt(index)【選取索引大于index的元素,0開始】、
:lt(index)【選取索引小于index的元素,0開始】
:header【選取所有的標題元素,如h1~h6】、
:animation【選取當前正在執行動畫的所有元素】
2)內容過濾選擇器:過濾規則主要體現在它所包含的子元素或文本內容上。
:contains(text)【選取文本內容為“text”的元素,eg.$("div:contains('我
的')")】
:empty【選取不包含子元素或文本的空元素】
:has(selector)【選取含有選擇器所匹配的元素的元素】
:parent【選取含有子元素或文本的元素】
3)可見性過濾選擇器:可見性過濾選擇器是根據元素的可見和不可見狀態來選擇相
應的元素。
:hidden【選取所有不可見的元素】
$(":hidden")等價于 $("input:hidden"),<div style="display:none;">,<div
style="visibility:hidden;">
:visible【選取所有可見的元素】 $("div:visible")
4)屬性過濾選擇器(屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素
。)
[attribute]【選取擁有此屬性的元素】$("div[id]")
[attribute=value]【選取屬性值為value的元素】$("div[title=test]")
[attribute!=value]【選取屬性值不等于value的元素】$("div[title!=test]")
[attribute^=value]【選取屬性值以value開始的元素】$("div[title^=test]")
[attribute$=value]【選取屬性值以value結束的元素】$("div[title$=test]")
[attribute*=value]【選取屬性值含有value值的元素】$("div[title*=test]")
[selector1][selector2][selectorN]【用屬性選擇器合并成一個復合的屬性選擇器
,滿足多個條件,每選擇一次,縮小一次范圍】
$("div[id][titlt$='test']"):選取有屬性id且屬性title以test結束的div元素
5)子元素過濾選擇器(關鍵:將元素的父元素和子元素區分清楚,)
:nth-child(index/even/odd/equation)【選取每個父元素下的第index個子元素或
奇偶元素,index從1算起】
:first-child【選取每個父元素的第1個子元素】
:last-child【選取每個父元素的最后一個子元素】
:only-child【若某個元素是它的父元素中唯一的子元素,則會被匹配,若含有其他
元素則不會被匹配】
6)表單對象屬性過濾選擇器
:enabled【選取所有可用元素】
:disabled【選取所有不可用元素】
:checked【選取所有被選中元素,單選或復選框】
:selected【選取所有被選中的選項元素,下拉列表】
?
?
?
?
?