jquery之层次选择器的注意点

<script type="text/javascript">
    /*
    $(function(){
        //显示divMid这个层
        $("#divMid").css("display","block");
        //显示div和他下面的所有span----->祖先和子孙的关系!!包括div这个层自身
        $("div span").css("display","block");
    })
    */
    /*
    $(function(){
        //显示divMid这个层
        $("#divMid").css("display","block");
        //显示div和他下面的span----->父子关系!!包括div这个层自身
        $("div>span").css("display","block");
    })
   */
   /*
    $(function(){
        //显示紧跟着divMid后面的一个层!!divMid这个层本身没有显示
       // $("#divMid + div").css("display","block");
         //显示紧跟着divMid后面的一个层(和上面的效果一样)
        $("#divMid").next().css("display","block");
    })
    */
     /* 
     $(function(){
        //显示divMid后面所有的div兄弟层!!divMid这个层本身没有显示
        //$("#divMid ~ div").css("display","block");
        //显示divMid后面所有的div兄弟层(和上面的效果一样)
        $("#divMid").nextAll().css("display","block");
    })
    */
    /* 
     $(function(){
        //显示divMid所有的兄弟div层(相令元素)!divMid这个层本身没有显示出来
        $("#divMid").siblings("div").css("display","block");
    })
    */
</script>

代码见上图

主要注意的地方有

  $("div span").css("display","block"); //这里显示的时候将会显示div这个层
 $("div>span").css("display","block");  //这里显示的时候将会显示div这个层

也就是父子。祖先和儿孙  是要显示父。祖先的

下面的就不会显示divMid这个层

$("#divMid").next().css("display","block");

$("#divMid").nextAll().css("display","block");

$("#divMid").siblings("div").css("display","block");