選擇器
基本選擇器
-
#id
語法:$("#id名")
-
element元素選擇器
語法:$("標籤名")
-
.class 類選擇器
語法:$(".myClass");
-
{ * }
語法:$("*")
-
selector1,selector2,selectorN 將每一個選擇器匹配到的元素合併後一起返回。
語法:$("div,span,p.myClass")
//id選擇器
var $boxId1 = $("#box_id1");
$boxId1.click(function () {
alert("hello")
})
});
層級選擇器
- ancestor descendant:用以匹配元素的選擇器,並且它是第一個選擇器的後代元素
- parent > child:在給定的父元素下匹配所有的子元素
- prev + next 匹配所有緊接在 prev 元素後的 next 元素
- prev ~ siblings 匹配所有緊接在 prev 元素後的 next 元素
基本上和css的選擇器是一樣的,在css中我們有僞類選擇器在jQuery中也是存在的。
過濾選擇器
- :first 獲取第一個元素
- : not(selector) 去除所有與給定選擇器匹配元素
<input name="apple" />
<input name="flower" checked="checked" />
$("input:not(:checked)")
返回:[ <input name="apple" /> ]
- :even 匹配所有索引值爲偶數的元素,從0開始計數
- :add 匹配所有索引值爲奇數的元素,從0開始計數
- :eq(index) 匹配一個給定索引值的元素
- :gt(index) 匹配所有大於給定索引值的元素
- :lang(language) 選擇指定語言的所有元素
選擇器$("div:lang(en)")將匹配<div lang="en"> and <div lang="en-us">(和他們的後代<div>),但不包括<div lang="fr">
- : last() 獲取最後個元素
- :It(index) 匹配所有小於給定索引值元素
- :header 匹配如 h1, h2, h3之類的標題元素
- :animated 匹配所有正在執行動畫效果的元素
- :focus 匹配當前獲取焦點的元素
- :root 選擇該文檔的根元素
- :target 選擇由文檔URI的格式化識別碼表示的目標元素。
- :contains(text) 匹配包含給定文本的元素
- :empty 匹配所有不包含子元素或者文本的空元素
- :has(selector) 匹配含有選擇器所匹配的元素的元素
- :parent 匹配含有子元素或者文本的元素
- :hidden 匹配所有不可見元素,或者type爲hidden的元素
- :visible 匹配所有的可見元素
屬性
- [attribute] 匹配包含給定屬性的元素
- [attribute=value] 匹配給定的屬性是某個特定值的元素
- [attribute!=value] 匹配所有不含有指定的屬性,或者屬性不等於特定值的元素。
- [attribute^=value] 匹配給定的屬性是以某些值開始的元素
- [attribute$=value] 匹配給定的屬性是以某些值結尾的元素
- [attribute*=value] 匹配給定的屬性是以包含某些值的元素
- [selector1][selector2][selectorN] 複合屬性選擇器,需要同時滿足多個條件時使用。
子元素
- :first-child 類似的:first匹配第一個元素,但是:first-child選擇器可以匹配多個:即爲每個父級元素匹配第一個子元素。這相當於:nth-child(1)
- :first-of-type 結構化僞類,匹配E的父元素的第一個E類型的孩子。等價於:nth-of-type(1) 選擇器。
- :last-child 匹配最後一個子元素
- :last-of-type 結構化僞類,匹配E的父元素的最後一個E類型的孩子
- :nth-child 匹配其父元素下的第N個子或奇偶元素
- :nth-last-child(n|even|odd|formula) 選擇所有他們父元素的第n個子元素。計數從最後一個元素開始到第一個。
- :nth-last-of-type(n|even|odd|formula) 選擇的所有他們的父級元素的第n個子元素,計數從最後一個元素到第一個。
- :nth-of-type(n|even|odd|formula) 選擇同屬於一個父元素之下,並且標籤名相同的子元素中的第n個。
- :only-child 如果某個元素是父元素中唯一的子元素,那將會被匹配
- :only-of-type 選擇所有沒有兄弟元素,且具有相同的元素名稱的元素
表單
- input 匹配所有 input, textarea, select 和 button 元素
- :text 匹配所有的單行文本框
- :password 匹配所有密碼框
- :radio 匹配所有單選按鈕
- :checkbox 匹配所有複選框
- :submit 匹配所有提交按鈕,
- :image 匹配所有圖像域
- :reset 匹配所有重置按鈕
- :button 匹配所有按鈕
- :file 匹配所有文件域
- :hidden 匹配所有不可見元素,或者type爲hidden的元素
- :visible 匹配所有的可見元素
表單對象屬性
- :enabled 匹配所有可用元素
- :disabled 匹配所有不可用元素
- :checked 匹配所有選中的被選中元素(複選框、單選框等,select中的option),對於select元素來說,獲取選中推薦使用 :selected
- :selected 匹配所有選中的option元素