jQuery的选择器的总结

Posted 2020-10-10

一、简单选择器

//        $(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")

    })
//        这个效果和上面的一样