繁星——JQuery选择器之层级

[ancestor descendant]

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

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

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

结果：

1 <input type="text" class='inp01' value=""/>
2 
3 <input type="text" class='inp02' value=""/>

[parent > child]

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

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

 1 $("#div01 > input"); 

结果：

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

[prev + next]

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

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

 1 $(".inp01 span"); 

结果：

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

[prev ~ siblings]

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

HTML：

1 <form>
2   <label>Name:label>
3   <input name="name" />
4   <fieldset>
5       <label>Newsletter:label>
6       <input name="newsletter" />
7  fieldset>
8 form>
9 <input name="none" />

JQuery代码：

 1 $("form ~ input"); 

结果：

 1 <input name="none" />  

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