繁星——JQuery选择器之层级

[ancestor descendant]

在给定元素下匹配所有后代元素。这个选择器的使用概率相当之高，使用示例如下：

//HTML代码：
<div id='div01'>
　　<input type="text" class='inp01' value=""/>
　　<span><input type="text" class='inp02' value=""/></span>
</div>

//JQuery代码：
$("#div01 input");

结果：

<input type="text" class='inp01' value=""/>

<input type="text" class='inp02' value=""/>

[parent > child]

此选择器用于在给定的父元素下匹配所有的子元素，使用如下：

HTML代码同上，jquery代码如下：

 $("#div01 > input"); 

结果：

 <input type="text" class="inp01" value=""/> 

[prev + next]

此选择器匹配所有紧接在 prev 元素后的 next 元素，使用示例如下：

HTML代码同上，JQuery代码如下：

 $(".inp01 span"); 

结果：

<span><input type="text" class='inp02' value=""/></span>

[prev ~ siblings]

匹配 prev 元素之后的所有 siblings （同辈）元素

HTML：

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

JQuery代码：

 $("form ~ input"); 

结果：

 <input name="none" />  

千里之行始于足下，原本不打算写这个的，因为这个太过基础，后来想想基础才是一切的源头，大家还是不应忽略基础，还是写了。