06jQuery-02-層級選取器

標籤：焦點   hid   asc   開始   tor   pretty   htm   first   過濾器   

因為DOM結構就是層級結構，所以我們經常要根據層級關係進行選擇。
1、層級選取器$(‘ancestor descendant‘)，選擇祖先中的子孫，中間留空格：

 

  
$(‘form[name=upload] input‘);
  
//選擇name屬性為upload的表單裡的<input>
 

多層選擇也是允許的：

 

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

2、子選取器$(‘parent>child‘)，類似層級選取器，但是限定了層級關係必須是父子關係，就是<child>節點必須是<parent>節點的直屬子節點。

 

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

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

3、過濾器過濾器一般不單獨使用，它通常附加在選取器上，協助我們更精確地定位元素。觀察過濾器的效果：

 

  
$(‘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)‘); // 選出序號為奇數的元素
 

4、表單選取器 :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正好相反，選擇那些不能輸入的。
:visible所有可見的
:hidden所有隱藏的

06jQuery-02-層級選取器