层级选择器: Descendant selector

除了基本的选择器外, jquery还有更加灵活,更加强大的 层级选择器. 因为 DOM的结构 就是层级的. 所以经常要根据层级关系进行选择.

<!-- HTML结构 -->
<div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
</div>

要选出JavaScript,可以用层级选择器: $(‘ul.lang li.lang-javascript’); // [<li class="lang-javascript">JavaScript</li>] $(‘div.testing li.lang-javascript’); // [<li class="lang-javascript">JavaScript</li>] //因为<div>和<ul>都是<li>的祖先节点,所以上面两种方式都可以选出相应的<li>节点。

要选择所有<li>节点: $(‘ul.lang li’); 好处在于: 缩小了选择范围. 父节点 ul.lang 也就那么点范围. 避免了其他无关的元素.

$('form.test p input'); // 在form表单选择被<p>包含的<input>

过滤器 Filter

一般不单独使用. 通常附加在选择器上. 帮助我们更精确的定位元素.

$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点

$('ul.lang li:first-child'); // 仅选出JavaScript
$('ul.lang li:last-child'); // 仅选出Lua
$('ul.lang li:nth-child(2)'); // 选出第N个元素,N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素