06jquery-02-Hierarchy Selector

Because the DOM structure is hierarchical, we often make choices based on hierarchical relationships.
1. Level selector $ (' ancestor descendant '), select descendants in Ancestors, middle spaces:

 
   
  

  
    
   
$(‘form[name=upload] input‘);
  
    
   
//选择name属性为upload的表单里的<input>
 
   
  

Multi-layer selection is also allowed:

 
   
  

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

2, sub-selector $ (' parent>child '), similar to the hierarchy selector, butqualifying the hierarchy relationship must be a parent-child relationship, that is, the <child> node must be the immediate child node of the <parent> node.

  
 

   
  

  
<!-- 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, filter filter is generally not used alone, it is usually attached to the selector, help us to more precisely locate the element. Observe the effect of the 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)‘); // 选出序号为奇数的元素
  
 

4. Form Selector : InputYou can choose <input>,<textarea>,<select> and <button>
: FileYou can choose <input type= "file", as in Input[type=file]
: CheckBoxYou can select the check box, as with Input[type=checkbox]
: RadioYou can choose a radio box, as with Input[type=radio]
: FocusYou can select elements of the current input focus, such as placing the cursor on a <input>, with $ (' Input:focus ') to choose
: CheckedSelect the checkbox and check box on the current tick and use this selector to instantly get the item that the user has selected, such as $ (' input[type=radio]:checked ')
: EnabledYou can select <input>, <select>, which can be entered normally.and so on, that is, no gray input.
:d isabledAnd: Enabled just the opposite, select those that cannot be entered.
: VisibleAll the visible
: HiddenAll the Hidden

06jquery-02-Hierarchy Selector