jquery选择器之层级选择器

　　HTML示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!--HTML区域-->
<div class="nav-2014">
    <div class="w">
        <div class="w-spacer"></div>
        <div class="categorys">
            <div class="dt">家用电器分类</div>
        </div>
        <span class="hr"></span>
        <div class="navitems-2014">
            <div id="treasure"></div>
            <span class="clr"></span>
            <span class="chr"></span>
        </div>
    </div>
</div>
<div id="electronic">
    <div id="firstScreen">
        <div class="w"></div>
    </div>
    <ul>
        <div class="u_c"></div>
        <li class="ui-switch-curr"></li>
        <li class="ui-switch-item"></li>
    </ul>
    <div class="secord_screen"></div>
    <div class="third_screen"></div>
</div>

</body> </html>

　　1、ancestor descendant 祖先子孙选择器，在给定的祖先元素下匹配所有的后代元素.

<script src="jquery-3.1.0.js"></script>
    <script>
//        取类.nav-2014的子孙为span的元素,选择了类nav-2014下所有span子元素
        $(".nav-2014 span")
    </script>
运行结果：选择了类nav-2014下一个父sapn,二个孙span

　　2、parent > child:父子选择器，在给定的父元素下匹配所有的子元素。

    <script>
//          取id为electronic的子元素为div的元素,选择了id为electronic下的二个子div（firstScreen，secord_screen）
        $("#electronic > div")
    </script>

　　3、prev + next :下一个选择器，在给定的前一个元素下匹配next 元素。

    <script>
//        取ul的下一个元素为div的元素，取到紧跟form后平级的span元素,结果选择了类secord_screen
        $("ul + div")
    </script>

　　4、prev ~ siblings:在给定的前一个元素下之后的所有siblings 元素。

    <script>
//        选择id为firstScreen后所有邻居中为div的元素
        $("#firstScreen + div")
    </script>