jQuery總結一:選擇器歸納

文章源自:淡忘~淺思
原文地址:http://www.ido321.com/1602.html

1、基本選擇器

選擇符 匹配元素
*       所有元素
id     給定ID的元素
element  給定類型的所有元素
.class   給定類的所有元素
a,b   與a或b匹配的元素
a b   a的后代元素中與b匹配的元素
a>b   a的直接子元素中與b匹配的元素
a+b   a的直接同輩元素中與b匹配的元素
a~b   a的同輩元素中與b匹配的元素

2、位置選擇器

選擇符                匹配元素
a b:nth-child(index)    a的子元素中,第index個與b匹配的元素(從1開始計數)
a b:nth-child(even)     a的子元素中,第偶數個與b匹配的元素(從1開始計數)
a b:nth-child(odd)      a的子元素中,第奇數個與b匹配的元素(從1開始計數)
a b:nth-child(2n+2)     a的子元素中,第2n+2個與b匹配的元素(從1開始計數),n為自然數
a b:nth-last-child()    同:nth-child(),從最后一個元素開始計數
a b:first-child         a的子元素中,第1個與b匹配的元素
a b:last-child          a的子元素中,最后一個個與b匹配的元素
:only-child             作為其父元素唯一一個子元素的元素
a b:nth-of-type()       同:nth-child(),只計同類元素
a b:nth-last-of-type()  同:nth-last-child(),只計同類元素
a b:first-of-type()     同:first-child(),只計同類元素
a b:last-of-type()      同:last-child(),只計同類元素
a b:only-of-type()     沒有同名元素的元素

3、屬性選擇器

選擇符           匹配元素
[attr]             帶有屬性attr的元素
[attr="value"]     attr屬性值為value的元素
[attr!="value"] attr屬性值不為value的元素)
[attr^="value"] attr屬性值以value開頭的元素
[attr$="value"] attr屬性值以value結尾的元素
[attr*="value"] attr屬性值包含value字符串的元素
[attr~="value"] attr屬性值是空格分隔的字符串,其中一個字符串值是value的元素
[attr|="value"] attr屬性值等于value或value后跟一個連字符(-)的元素

4、表單選擇器

選擇符    匹配元素
:input    所有<input>、<textarea>、<select>和<button>元素
:text       type=”text”的<input>元素
:password   type=”password”的<input>元素
:file       type=”file”的<input>元素
:radio      type=”radio”的<input>元素
:checkbox   type=”checkbox”的<input>元素
:submit     type=”submit”的<input>元素
:image      type=”image”的<input>元素
:reset      type=”reset”的<input>元素
:button     type=”button”的<input>元素
:enabled    啟用的表單元素
:disabled   禁用的表單元素
:checked    選中的復選框和單選按鈕
:selected   選中的<option>元素

5、過濾選擇器

選擇符         匹配元素
:root           文檔根元素
:header       標題元素,h1~h6
:animated       動畫正在運行的元素
:contains(text)  包含文本text的元素
a:empty       不包含子節點的a元素
a:has(b)         至少包含一個b元素匹配的a元素(返回父元素a而非子元素b)
:parent       與:empty相反,返回包含子節點的元素
:hidden       隱藏的元素,包括<input type="hidden">
:visible         可見元素
:focus         獲得焦點的元素
:lang(language)  給定語言代碼的元素
:target       URI標識符指向的目標元素,具體見::target用法

6、用于結果集中的選擇器

這類選擇器在CSS中不存在,但可以用于JQuery的結果中進行篩選。

選擇符     匹配元素
:first     結果集中的第一個元素,對應方法為first(),如$("a b:first")<==>$("a b").first()
:last       結果集中的最后一個元素,對應方法為last(),如$("a b:last")<==>$("a b").last()
:not(a)   結果集中不與a匹配的元素,對應方法為not(),如$("a b:not(c)")<==>$("a b").not(c)
:even       結果集中索引是偶數的元素(從0開始),如$("a b:even")
:odd         結果集中索引是奇數的元素(從0開始),如$("a b:odd")
:eq(index)   結果集中索引是index的元素(從0開始),對應方法是eq(index),如$("a b:eq(2)")<==>$("a b").eq(2)
:gt(index)   結果集中索引大于index的元素(從0開始),如$("a b:gt(2)")
:lt(index)   結果集中索引小于index的元素(從0開始),如$("a b:lt(2)")
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容