1. 程式人生 > >jQuery常用選擇器總結

jQuery常用選擇器總結

輸入 area 不變 例如 .... 序號 sub 常用 復雜

jQuery常用選擇器總結:

  我們都知道jQuery是JavaScript(JS)的框架,它的語法簡單使用方便,被廣大開發人員青睞。現在我就它常用的並且十分強大的選擇器的方式,做一個總結。鑒於它的選擇器方式眾多,我就自己平時工作之中所遇到的常見的方式做一個總結。

  一,元素查找方式:

    1. $("#myElement") 選擇id為myElement的元素,因為id在使用中是唯一的,所以這樣的選擇也是指定的不變的。
    2. $("div") 選擇所有的div標簽元素,返回div數組。
    3. $(".myClass") 選擇class名為myClass所有的css標簽元素。
    4. $("*") 選擇文檔中的所有元素,也可以運用聯合選擇方式進行選擇,例如:$("#myElement,div,.myClass")。

  二,層疊選擇器:

    1. $("form input") 選擇所有inform元素下的input元素。
    2. $("#main > *") 選擇id為main元素下的所有子元素。
    3. $("label + input") 選擇所有label元素的下一個input元素節點。
    4. $("#pre ~ div") 同胞選擇器,選擇id為pre元素下的所有屬於同一個父元素的div標簽。

  三,基本過濾選擇器:

    1. $("tr:first") 選擇tr元素的第一個節點。
    2. $("tr:last") 選擇tr元素的最後一個節點。
    3. $("input:not(:checked) + span") 過濾掉checked選擇器的所有的input元素。
    4. $("tr:even") 選擇所有的tr元素的第0,2,4,.....個元素。
    5. $("tr:odd") 選擇所有的tr元素的第1,3,5,......個元素。
    6. $("td:eq(2)") 選擇所有的td元素中序號為二的那個td元素。
    7. $("tr:get(4)") 選擇所有的td元素中序號大於4的那些td元素。
    8. $("tr:ll(4)") 選擇所有的td元素中序號小於4的那些td元素。

  四,表單過濾選擇器:

    1. $(":input") 選擇所有的表單輸入元素,包括input,textarea,select,button。
    2. $(":text") 選擇所有的text input元素。
    3. $(":input") $(":password") 選擇所有的password input元素。
    4. $(":radio") 選擇所有的radio input元素。
    5. $(":checkbox") 選擇所有的checkbox input元素。
    6. $(":submit") 選擇所有的submit input元素。
    7. $(":image") 選擇所有的image input元素。
    8. $(":reset") 選擇所有的reset input元素。
    9. $(":button") 選擇所有的button input元素。
    10. $(":file") 選擇所有的file input元素。
    11. $(":hidden") 選擇所有的類型為hidden的input元素或者表單隱藏域。
    12. $(":enabled") 選擇所有的可操作的表單元素。
    13. $(":disabled") 選擇所有的不可操作的表單元素。
    14. $(":checked") 選擇所有的被checked的表單元素。
    15. $("select option:select") 選擇所有的select的子元素中被select的元素。

  jQuery的選擇器中層疊過濾先擇器是常用的並且復雜的選擇器之一,在這裏就沒有大篇幅的去總結了,因為就上面的各種選擇器方式,運用熟悉了,對開發來說都是足夠了的。

jQuery常用選擇器總結