層級選擇器 · 廖雪峰 JavaScript Python Git 教程

# 層級選擇器除了基本的選擇器外，jQuery的層級選擇器更加靈活，也更強大。因為DOM的結構就是層級結構，所以我們經常要根據層級關系進行選擇。 ## 層級選擇器（Descendant Selector）如果兩個DOM元素具有層級關系，就可以用`$('ancestor descendant')`來選擇，層級之間用空格隔開。例如： ```  <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 ``` ## 練習針對如下HTML結構： ```  <div class="test-selector"> <ul class="test-lang"> <li class="lang-javascript">JavaScript</li> <li class="lang-python">Python</li> <li class="lang-lua">Lua</li> </ul> <ol class="test-lang"> <li class="lang-swift">Swift</li> <li class="lang-java">Java</li> <li class="lang-c">C</li> </ol> </div> ``` 選出相應的內容并觀察效果： ``` 'use strict'; var selected = null; // 分別選擇所有語言，所有動態語言，所有靜態語言，JavaScript，Lua，C等: selected = ??? // 高亮結果: if (!(selected instanceof jQuery)) { return alert('不是有效的jQuery對象!'); } $('#test-jquery').find('*').css('background-color', ''); selected.css('background-color', '#ffd351'); ```