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");