1. 程式人生 > >Jquery程式碼筆記(選擇器)

Jquery程式碼筆記(選擇器)

                                         Jquery選擇器

1.基本選擇器

        1. id選擇器(#id)             $("#div1").css("background","red");         2.元素選擇器(元素名字)             $("div").css("background","red");         3. 樣式選擇器(.class)             $(".box").css("background","red");         4. 並列選擇器(elem,elem)             $("div,span").css("background","red");         5. 元素樣式選擇器(elem.class)             $("div.box").css("background","red");

2.層次選擇器

       1.後代選擇器 ancestor descendant

                   $("table tr ").css("background","red");

       2.子代選擇器 parent>child

                   $("table>tr ").css("background","red");

       3.兄弟選擇器 prev+next

                   $("tr +tr").css("background","red");

       4.此元素之後的所有元素 prev~siblings

                   $("tr~* ").css("background","red");

3.屬性選擇器

        1.第一個元素:first

                   $("tr:first ").css("background","red");

        2.最後一個元素:last

                   $("tr:last ").css("background","red");

        3.大於:gt()

                   $("tr:gt(1)").css("background","red");

        4.小於:lt()

                   $("tr:lt(10) ").css("background","red");

        5.等於:eq()

                   $("tr:eq(5) ").css("background","red");

        6.包含(文字內容非屬性值) :contains("")

                   $("tr:contains('wwww')").css("background","red");

        7.元素隱藏 :hidden

                  console.log( $("tr:hidden ").text());

        8.元素擁有屬性  div[id]

                   $("div[id]").css("background","red");

        9.屬性值為username的元素 div[id=username] 

                   $("div[id=username]").css("background","red");    

4.表單選擇器

        1.所有的input表單(:input)

                   $(":input").css("background","red");  

        2.不可用的表單 (:disabled)

                   $(":input:disabled").css("background","red");  

        3.選中的表單  (:checked 適用於CheckBox)(:selected 適用於下拉框select的option)

                   $(":input:checked").css("background","red");  

                   $("select>option:checked").css("background","red");  

        4.提交按鈕 (:submit)

                   $(":submit").css("background","red");