Jquery關於CSS選擇器

關於css選擇器

jquery選擇器涉及到css，css技術使得網頁的結構與表現樣式完全分離。

同樣css也需要找到某個網頁的結構才能改變其樣式，這就是css選擇器。

常用的css選擇器如下：

標籤選擇器以文件元素作為選擇符 aid選擇器以文件元素的唯一識別符號id作為選擇符 #mynamediv 類選擇器以文件元素的class作為選擇符 div.note .nodivnote 群組選擇器多個選擇符應用同樣的樣式規則 td,p,div,a 後代選擇器元素的任意後代元素 #parentelement a 通配選擇器以文件的所有元素作為選擇符

*

以上選擇器為主流瀏覽器支援的，此外css還有偽類選擇器、子選擇器、臨近選擇器和屬性選擇器。(理論上來說，現在都應該是支援了的，這本書大概2023年的)

關於jquery選擇器

jquery選擇器與css選擇器的寫法極為相似，只不過jquery選擇器還能操作行為而已。而jquery中操作css樣式的部分比單純的css更為強大，並且擁有跨瀏覽器的相容性。

jquery選擇器來操作對比一般的dom操作的優勢，不僅僅體現在簡潔明瞭方面，也在於獲取網頁中不存在的元素也不會報錯。

因為jquery選擇器選擇出來的永遠是jquery物件，所以在判斷是否取到值的時候，不能直接if判斷，而是判斷$(「#divid」).length>0。

基本選擇器

標籤選擇器   $("div")
id選擇器　 $("#myid")
類選擇器 $(".myclass") 
群組選擇器 $("div,span,p.myclass,#myid")
通配選擇器 $("*")

層次選擇器

後代選擇器  $(div span) 選取div裡所有的span
下級選擇器 $(div>span) 選取div裡為span的下一級元素
相鄰元素選擇器 $(div+span) 選取緊挨著div元素後面的下乙個span元素，等價於$(div).next("span")
同級元素選擇器 $(div~span ) 選取div元素後面的所有span元素，等價於$(div).nextall("span")

擴充套件一下$(div).siblings(「span」)選取的是div元素同級的所有的span元素，不分前後，而上面的同級元素選擇器只能選擇div後面的元素

過濾選擇器

:first 選取第乙個元素,如$(div:first)就是選取所有div元素中的第乙個div元素 :last 選取最後乙個元素 :even 選取索引是偶數的所有元素，元素從0開始 :odd 選取索引是奇數的所有元素，元素從0開始 :eq(index) 選取索引等於index的元素 :gt(index) 選取索引大於index的元素 :lt(index) 選取索引小於index的元素 :header 選取所有的標題元素，如h1,h2,h3 :animated 選取當前正在執行動畫的所有元素

:focus 選取當前獲取焦點的元素

內容過濾選擇器

:contains(text)  選取含有文字內容為text的元素，如$(div:contains('troy'))
:empty 選取不包含子元素或者文字的空元素
:has(selector) 選取含有選擇器所匹配的元素的元素
:not(selector) 去除所有與給定選擇器匹配的元素
:parent 選取含有子元素或者文字的元素

可見性過濾選擇器

:hidden 選取所有隱藏的元素

:visible 選取所有可見的元素

屬性過濾選擇器

[attribute]                       選擇擁有此屬性的元素
[attribute=value] 選擇屬性的值為value的元素
[attribute!=value] 選擇屬性的值不為value的元素
[attribute1][attributen] 選取同時滿足多種屬性的元素
------------------------------------我是乙個分割線，我就覺得我應該出現在這裡了，雖然我不知道為什麼----------------------
[attribute^=value] 選擇屬性的值以value開始的元素
[attribute$=value] 選擇屬性的值以value結束的元素
[attribute*=value] 選擇屬性的值含有value的元素
[attribute|=value] 選取屬性等於給定字串或者以該字串為字首的元素（就是該字串後面跟著乙個"-"的元素）
[attribute~=value] 選取屬性用空格分隔的值中包含乙個給定的值的元素
複製**
//能選取到：$('div[title*="en"]'),$('div[title^="en"]'),$('div[title|="en"]')
//能選取到：$('div[title*="en"]'),$('div[title^="en"]'),$('div[title|="en"]')
//能選取到：$('div[title*="en"]'),$('div[title^="en"]')
//能選取到：$('div[title*="en"]'),$('div[title^="en"]'),$('div[title~="en"]')
//能選取到：$('div[title*="en"]'),$('div[title$="en"]')
複製**

子元素過濾選擇器

:nth-child(index/even/odd/equation) 選取每個父元素下的的第index個子集元素或者奇偶元素，且index從1算起，而:eq(index)只能匹配乙個元素 :first-child 選取每個父元素的第1個子元素 :last-child 選取每個父元素的最後乙個子元素

:only-child 如果此元素是其父元素的唯一乙個子元素則匹配

表單物件屬性過濾選擇器

:enabled 選取所有可用的元素 :disabled 選取所有不可用的元素 :checked 選取所有被選中的元素（單選框，核取方塊）

:selected 選取所有被選中的元素（下拉列表）

表單選擇器

:input 選取所有input，textarea，select，button的元素，不僅僅是input :text 選取所有單行的文字框 :password 選取所有的密碼框 :radio 選取所有的單選框 :checkbox 選取所有的多選框 :submit 選取所有的提交按鈕 :image 選取所有的影象 :reset 選取所有的重置按鈕 :button 選取所有的按鈕 :file 選取所有的上傳域

:hidden 選取所有不可見元素

選擇器注意事項

對於 . # ( ) [ ]等特殊字元可以通過在前面加\\形成轉義字元，如$("#id\\[sad\\]")

Jquery關於CSS選擇器

jquery選擇器和css選擇器

JQuery選擇器之CSS選擇器

關於CSS選擇器

Jquery關於CSS選擇器

jquery選擇器和css選擇器

JQuery選擇器之CSS選擇器

關於CSS選擇器

相關推薦