简单前端知识——jQuery的层级选择器使用案例和过滤案例——05

jQuery的层级选择器使用案例

<script>
    $(function(){
        //找出body下面的子div，父子选择器
        $("#btn1").click(function(){
            $("body > div").css("background-color","palegreen");
        });
        --------------------------------------------------------
        //找出body下面的所有div，子孙选择器
        $("#btn2").click(function(){
            $("body div").css("background-color","palegreen");
        });
        --------------------------------------------------------
        //找出id为one的相邻兄弟div，兄弟选择器
        $("#btn3").click(function(){
            $("#one+div").css("background-color","palegreen");
        });
        --------------------------------------------------------
        //找出id为one的所有弟弟div，弟弟选择器
        $("#btn4").click(function(){
            $("#one~div").css("background-color","palegreen");
        });
    });
</script>

属性过滤的案例

<script>
    $(function(){
        //过滤出第一个元素
        $("#btn1").click(function(){
            $("div:first").css("background-color","palegreen");
        });
        ——————————————————————————————————————————————————————
        //过滤出所有div中偶数为的div
        $("#btn2").click(function(){
            $("div:event").css("background-color","palegreen");
        });
        ——————————————————————————————————————————————————————
        //过滤出所有div中奇数为的div
        $("#btn3").click(function(){
            $("div:odd").css("background-color","palegreen");
        });
    });
</script>

属性选择器 

<script>
    $(function(){
        //通过属性选择器去找到a href
        $("a[href]").css("color","red");
        //找出包含href,title
        $("a[href][title]").css("color","red");
    });
</script>