jQuery有什么選擇器

小編給大家分享一下jQuery有什么選擇器，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1、jQuery介紹
   (1)jQuery是什么?
       是一個js框架，其主要思想是利用jQuery提供的選擇器查找要操作的節點,然后將找到的節點封裝成一個jQuery對象。封裝成jQuery對象的目的有兩個：
   一是為了兼容不同的瀏覽器，另外，也簡化了代碼。
   (2)編程的基本步驟  first.html
       step1, 利用選擇器查找節點。選擇器類似與css選擇器。
       step2, 調用jQuery對象的方法或者屬性。
   (3) jQuery對象與dom對象之間的相互轉換 first.html。
       a,  dom對象 ---> jQuery對象
           $(dom對象)
       b, jQuery對象 ---> dom對象
               方式一:      $obj.get(0)
               方式二:      $obj.get()[0]    

2、選擇器
   1)基本選擇器  selector/s1.html
       ID選擇器：$('#id)
       類選擇器：$('.class')
       標簽選擇器：$('element) 如：$('div')
       群組選擇器：$('selector1,selector2..selectorn')
       通用選擇器：$('*')
   2)層次選擇器  selector/s2.html
       （1）子元素選擇器
           $("parent > child");
           查找父元素下面的所有子元素，不包括孫元素等。
       （2）后代元素選擇器
       　　$("ancestor descedant");
           查找 ancestor 元素的所有子元素、孫元素、重孫元素等。
       （3）緊鄰同輩元素選擇器
       　　$("prev+next");
　            同輩，且緊跟在 prev 元素后面的元素 next 元素
       （4）相鄰同輩元素選擇器
　　        $("prev~siblings")；
　　        跟在 prev 后且同輩的所有 siblings 元素
       注:siblings是過濾器
               這里要說下，由于最后2個用的比較少，一般會用其他選擇器替代，請看下面：
           $("prev + next")等價于next()
           $("prev ~ siblings")等價于nextAll()

   3)過濾選擇器
       (1)基本過濾選擇器 selector / s3.html
           :first --> $('p:first')第一個p元素
           :last --> $('p:last')最后一個p元素
           :not(selector) --> $("input:not(:checked)")   過濾掉checked的選擇器的所有的input元素
           :even --> $("tr:even")選擇所有的tr元素的第0，2，4... ...個元素（注意：因為所選擇的多個元素時為數組，所以序號是從0開始）
           :odd --> $("tr:odd")選擇所有的tr元素的第1，3，5... ...個元素
           :eq(index) --> $("td:eq(2)")選擇所有的td元素中序號為2的那個td元素
           :gt(index) --> $("td:gt(4)")選擇td元素中序號大于4的所有td元素
           :lt(index) --> $("td:ll(4)")選擇td元素中序號小于4的所有的td元素
       (2)內容過濾選擇器 selector / s4.html
           :contains(text) 匹配包含給定文本的元素
           :empty 匹配所有不包含子元素或者文本的空元素
           :has(selector) 匹配含有選擇器所匹配的元素的元素
           :parent 匹配含有子元素或者文本的元素
           例：
           $("div:contains('John')") 選擇所有div中含有John文本的元素
           $("td:empty")  選擇所有的為空（也不包括文本節點）的td元素的數組
           $("div:has(p)")  選擇所有含有p標簽的div元素
           $("td:parent")  選擇所有的以td為父節點的元素數組            
       (3)可視化過濾選擇器 selector /s5.html
           :hidden 匹配所有不可見元素，或者type為hidden的元素
           :visible 匹配所有的可見元素
           例：
           $("div:hidden")        選擇所有的被hidden的div元素
           $("div:visible")        選擇所有的可視化的div元素
       (4)屬性過濾選擇器   selector /s6.html
           [attribute]  
           [attribute=value]
           [attribute!=value]
           例：
           $("div[id]") 選擇所有含有id屬性的div元素
           $("input[name='newsletter']") 選擇所有的name屬性等于'newsletter'的input元素
           $("input[name!='newsletter']") 選擇所有的name屬性不等于'newsletter'的input元素
           $("input[name^='news']")  選擇所有的name屬性以'news'開頭的input元素
           $("input[name$='news']")  選擇所有的name屬性以'news'結尾的input元素
           $("input[name*='man']")  選擇所有的name屬性包含'news'的input元素
           $("input[id][name$='man']")  可以使用多個屬性進行聯合選擇，該選擇器是得到所有的含有id屬性并且那么屬性以man結尾的元素
       (5)子元素過濾選擇器 selector /s7.html
           :nth-child(index/even/odd)：$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
           $("div span:first-child")          返回所有的div元素的第一個子節點的數組
           $("div span:last-child")           返回所有的div元素的最后一個節點的數組
           $("div button:only-child")       返回所有的div中只有唯一一個子節點的所有子節點的數組            
       (6)表單對象屬性過濾選擇器（表單元素過濾選擇器） selector /s8.html
           $(":enabled") 選擇所有的可操作的表單元素
           $(":disabled") 選擇所有的不可操作的表單元素
           $(":checked") 選擇所有的被checked的表單元素
           $("select option:selected") 選擇所有的select 的子元素中被selected的元素
   4)表單選擇器
       $(":input") 選擇所有的表單輸入元素，包括input, textarea, select 和 button
       $(":text") 選擇所有的text input元素
       $(":password") 選擇所有的password input元素
       $(":radio") 選擇所有的radio input元素
       $(":checkbox") 選擇所有的checkbox input元素
       $(":submit") 選擇所有的submit input元素
       $(":p_w_picpath") 選擇所有的p_w_picpath input元素
       $(":reset") 選擇所有的reset input元素
       $(":button") 選擇所有的button input元素
       $(":file") 選擇所有的file input元素
       $(":hidden") 選擇所有類型為hidden的input元素或表單的隱藏域

以上是“jQuery有什么選擇器”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！