jQuery的選擇器的總結

一、簡單選擇器

//        $(function () {
//            $("#box").css("color","red")
//        })
//        這個是id選擇器，id預設要保證唯一，如果出現有多個id相同的場景，那麼jquery
//        隻會渲染第一個



//        $(function () {
//            $("p").css("color","red")
//        })
//        這個是标簽選擇器，會把所有的标簽為a的全部渲染



//        $(function () {
//            $(".box").css("color","blue")
//        })
//        這個是class選擇器，如果某個标簽的class為box，則會被該jquery渲染


//    $(function () {
//        alert($(".box").length)
//    })

//length都是統計jquery搜尋到的标簽的數量

        $(function () {
            $("div > p").css("color","red")
            alert($("div > p").get(0))
//            顯示選擇到的的第一個元素
            alert($("div > p")[0].nodeName)
//            顯示選擇到的第一個元素,nodeName檢視節點的标簽的名稱
        })

//$("div > p")隻選擇div标簽的子标簽，孫标簽不會被選擇到

二、進階選擇器

$(function () {
            $("div,a,.cc").css("color","blue")
        })
//比如上面的例子，可以把div标簽，a标簽，class為cc的标簽都使用同一種css樣式,
//選擇符可以是id，也可以是标簽，也可以是class，不同的選擇符之間用逗号隔開



        $(function () {
            $("ul a").css("color","red")

        })
//這個實作的效果是把ul的後代的所有a标簽選擇出來，包括子子孫孫,同樣選擇符可以
//使用id class 和标簽




        $(function () {
            $("div.box").css("color","red")

        })
//這個選擇器可以在id和類中執行元素的字首，比如上面的例子，在clase中指明标簽的字首
//為div




        $(function () {
            $(".box.pox").css("color","red")

        })
//這個選擇器的意思是 隻選擇同時使用box和pox兩種class的标簽

三、進階選擇器

//        $("#box").find("p").css("color","red")
//        $("#box p").css("color","red")
//        上面這兩種寫法的效果是一緻的





//        $("#box").children("p").css("color","red")
//        $("#box > p").css("color","red")
//          上面這兩種寫法的效果是一緻的


    $(function () {
        $("span").next().css("color","red")
    })
    $(function () {
        $("span").nextAll().css("color","red")
    })
//上面這2個例子，next是選擇span标簽的下一個标簽，且是兄弟标簽，nextAll是選擇span标簽
//下的所有标簽，且是兄弟标簽，next和nextAll中可以帶選擇符
    $(function () {
        $("span").prev().css("color","green")
    })
    $(function () {
        $("span").prevAll().css("color","green")
    })
//prev和prevAll方法和next方法正好相反，他是擷取某個标簽的上一個兄弟标簽，和上面的所有的
//兄弟标簽,prev和怕熱vALL中可以帶選擇符
    $(function () {
            $("#box").siblings().css("color","red")

    })
//這個是統計id為box的上下同一級别的元素，同樣，都是統計兄弟标簽，同樣siblings也可以加參數
//選擇指定的選擇符


    $(function () {
            $("#box").nextAll().nextUntil("p").css("color","red")

    })
//這個是選擇id為box的下面的所有兄弟标簽，然後遇到“p”标簽則終止，然後對這中間的所有
//d的兄弟元素做渲染，但是不包括遇到的p标簽

       $(function () {
            $("#box").prevAll().nextUntil("p").css("color","red")

    })
//        這個效果和上面的一樣

四、屬性選擇器

//        $(function () {
//            $("a[ttt]").css("color","red")
//        })
//
//比對有ttt這個屬性的a标簽

//        $(function () {
//            $("*[ttt]").css("color","red")
//        })
//比對所有的标簽，且屬性有ttt的标簽

//        $(function () {
//            $("a[ttt=cui1]").css("color","red")
//        })

//比對所有的ttt屬性等于cui1的a标簽

//        $(function () {
//            $("a[ttt!=cui1]").css("color","red")
//        })


//比對所有ttt屬性不等于cui1的a标簽

//    $(function () {
//        $("a[ttt^=cui]").css("color","red")
//    })

//比對所有的ttt的屬性以cui開頭的a标簽
        $(function () {
            $("*[ttt$=4]").css("color","red")
        })
//比對所有的ttt的屬性以4結尾的所有标簽