CSS選擇器與jQuery選擇器的異同:一些特殊的選擇器


在CSS3選擇器標淮草案定義的選擇器語法中,jQuery支持相當完整的一套子集,同時還添加了一些非標准但很有用的偽類。下面是一些jQuery擴展的選擇器:(來自http://www.cnblogs.com/MaxIE/p/4078869.html)

jQuery選擇過濾器
過濾器 含義
#id 匹配id屬性為id的元素。在有效的}ITML文檔中,永遠不會出現多個元素擁有相同的ID,因此該過濾器通常作為獨立選擇器來使用
.class 匹配class屬性(是一串被解析成用空格分隔的單詞列表)含有class單詞的所有元素
[attr] 匹配擁有attr屬性(和值無關)的所有元素
[attr=val] 匹配擁有attr屬性且值為val的所有元素
[attr!=val] 匹配沒有attr屬性、或attr屬性的值不為val的所有元素((jQuery的擴展)
[attr^=val] 匹配attr屬性值以val開頭的元素
[attr$=val] 匹配attr屬性值以val結尾的元素
[attr*=val] 匹配attr屬性值含有val的元素
[attr~=val] 當其attr屬性解釋為一個由空格分隔的單詞列表時,匹配其中包含單詞val的元素。因此選擇器“div.note”與“div [class~=note]”相同
[attr|=val] 匹配attr屬性值以val開頭且其后沒有其他字符,或其他字符是以連字符開頭的元素
:animated 匹配正在動畫中的元素,該動畫是由jQuery產生的
:button 匹配<button type=”button”>和<input type=”button”>元素(jQuery的擴展)
:checkbox 匹配<input type=”checkbox”>元素( jQuery的擴展),當顯式帶有input標簽前綴”input:checkbox”時,該過濾器更高效
:checked 匹配選中的input元素
:contains(text) 匹配含有指定text文本的元素(jQuery的擴展)。該過濾器中的圓括號確定了文本的范圍—無須添加引號。被過濾的元素的文本是由textContent或innerText屬性來決定的—這是原始文檔文本,不帶標簽和注釋
:disabled 匹配禁用的元素
:empty 匹配沒有子節點、沒有文本內容的元素
:enabled 匹配沒有禁用的元素
:eq(n) 匹配基於文檔順序、序號從0開始的選中列表中的第n個元素(jQuery的擴展)
:even 匹配列表中偶數序號的元素。由於第一個元素的序號是0,因此實際上選中的是第1個、第3個、第5個等元素(jQuery的擴展)
:file 匹配<input type=”file”>元素(jQuery的擴展)
:first 匹配列表中的第一個元素。和“:eq(0)”相同(jQuery的擴展)
:first-child 匹配的元素是其父節點的第一個子元素。注意:這與“:first”不同
:gt(n) 匹配基於文檔順序、序號從0開始的選中列表中序號大於n的元素( jQuery的擴展)
:has(sel) 匹配的元素擁有匹配內嵌選擇器sel的子孫元素
:header 匹配所有頭元素:<h1>, <h2>, <h3>, <h4>, <h5>或<h6> (jQuery的擴展)
:hidden 匹配所有在屏幕上不可見的元素:大體上可以認為這些元素的offsetWidth和offsetHeight為0
:image 匹配<input type=”image”>元素。注意該過濾器不會匹配<img>元素( jQuery的擴展)
:input 匹配用戶輸入元素:<input>, <textarea>, <select>和<button>( jQuery的擴展)
:last 匹配選中列表中的最后一個元素(( jQuery的擴展)
:last-child 匹配的元素是其父節點的最后一個子元素。注意:這與“:last”不同
:lt(n) 匹配基於文檔順序、序號從0開始的選中列表中序號小於n的元素( jQuery的擴展)
:not(sel) 匹配的元素不匹配內嵌選擇器sel
:nth(n) 與“:eq(n)”相同(jQuery的擴展)
:nth-child(n) 匹配的元素是其父節點的第n個子元素。。可以是數值、單詞even,單詞odd或計算公式。 使用“:nth-child(even)”來選取那些在其父節點的子元素中排行第2或第4等序號的元素。使用“:nth-child(odd)”來選取那 些在其父節點的子元素中排行第1、第3等序號的元素。
更常見的情況是,n是xn或x n+y這種計算公式,其中x和y是整數,n是字面量n。因此可以用nth-child(3n+1)來選取第1個、第4個、第7個等元素。
注意該過濾器的序號是從1開始的,因此如果一個元素是其父節點的第一個子元素,會認為它是奇數元素,匹配的是3n+1,而不是3n。要和“:even以及“:odd”過濾器區分開來,后者匹配的序號是從0開始的。
:odd 匹配列表中奇數(從0開始)序號的元素。注意序號為1和3的元素分別是第2個和第4個匹配元素( jQuery的擴展)
:only-child 匹配那些是其父節點唯一子節點的元素
:parent 匹配是父節點的元素,這與“:empty”相反(jQuery的擴展)
:password 匹配<input type=”password”>元素(jQuery的擴展)
:radio 匹配<input type=”radio”>元素( j Query的擴展)
:reset 匹配<input type=”reset”>和<button type=”reset”>元素(jQuery的擴展)
:selected 匹配選中的<option>元素。使用“:checked”來選取選中的復選框和單選框(jQuery的擴展)
:submit 匹配<input type=”submit”>和<button type=”submit”>元素(jQuery的擴展)
:text 匹配<input type=”text”>元素(jQuery的擴展)
:visible 匹配所有當前可見的元素:大體上可以認為這些元素的offsetWidth和offsetHeight的值不為0,這和“:hidden”相反

注意:表中列舉的部分選擇器在圓括號中接受參數。例如,下面這個選擇器選取的元素在其父節點的子元素中排行第1或第2等,只要它們含有“JavaScript”單詞,就不包含元素。

p:nth-child(3n+1): text (JavaScript):not(:has(a))

通常來說,指定標簽類型前綴,可以讓過濾器的運行更高效。例如,不要簡單使用”:radio”來選取單選框按鈕,使用“input:radio”會 更好。ID過濾器是個例外,不添加標簽前綴時它會更高效。例如,選擇器“#address”通常比更明確的“form#address”更高效。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM