jQuery層級選擇器_動力節點節點Java學院整理

因為DOM的結構就是層級結構，所以我們經常要根據層級關系進行選擇。

層級選擇器（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>

要選出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');

這種層級選擇器相比單個的選擇器好處在于，它縮小了選擇范圍，因為首先要定位父節點，才能選擇相應的子節點，這樣避免了頁面其他不相關的元素。

例如：

$('form[name=upload] input');

就把選擇范圍限定在name屬性為upload的表單里。如果頁面有很多表單，其他表單的<input>不會被選擇。
多層選擇也是允許的：

$('form.test p input'); // 在form表單選擇被<p>包含的<input>

子選擇器（Child Selector）

子選擇器$('parent>child')類似層級選擇器，但是限定了層級關系必須是父子關系，就是<child>節點必須是<parent>節點的直屬子節點。還是以上面的例子：

$('ul.lang>li.lang-javascript'); // 可以選出[<li class="lang-javascript">JavaScript</li>]
$('div.testing>li.lang-javascript'); // [], 無法選出，因為<div>和<li>不構成父子關系

過濾器（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)'); // 選出序號為奇數的元素

表單相關

針對表單元素，jQuery還有一組特殊的選擇器：

:input：可以選擇<input>，<textarea>，<select>和<button>；
:file：可以選擇<input type="file">，和input[type=file]一樣；
:checkbox：可以選擇復選框，和input[type=checkbox]一樣；
:radio：可以選擇單選框，和input[type=radio]一樣；
:focus：可以選擇當前輸入焦點的元素，例如把光標放到一個<input>上，用$('input:focus')就可以選出；
:checked：選擇當前勾上的單選框和復選框，用這個選擇器可以立刻獲得用戶選擇的項目，如$('input[type=radio]:checked')；
:enabled：可以選擇可以正常輸入的<input>、<select> 等，也就是沒有灰掉的輸入；
:disabled：和:enabled正好相反，選擇那些不能輸入的。

此外，jQuery還有很多有用的選擇器，例如，選出可見的或隱藏的元素：

$('div:visible'); // 所有可見的div
$('div:hidden'); // 所有隱藏的div

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。