繁星——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" />

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