JavaScript学习笔记-jQuery Descendant Selector

It has been 1485 days since the last update, the content of the article may be outdated.

层级选择器 Descendant Selector

如果两个DOM元素具有层级关系，就可以用 $('ancestor descendant') 来选择，层级之间用空格隔开。

<!-- 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>

$('ul.lang li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]
$('div.testing li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]

$('form[name=upload] input'); 把选择范围限定在name属性为upload的表单里。如果页面有很多表单，其他表单的不会被选择。

多层选择也是允许的：

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