jquery几个层级的总结

Jquery API种关于层级介绍一共有四个。觉得挺有用的。下面就总结一下各自的区别：

 

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

<input name="none2" />

<input name="none3" />  

 

1、$("form input") ： form下的所有input，包括它的儿子和孙子

     结果： <input name="name" />和  <input name="newsletter" />
2、$("form ~ input") ：form标签后的所有input，不管有几个，都包括
     结果：<input name="none1" /> <input name="none2" /> <input name="none3" />  

3、$("form >input")：fom下的一级input，也就是只包括他的儿子

     结果：<input name="name" />

4、$("label + input")：紧接着label 的元素后的第一个input.比如：

 

     <form>
  <label>Name:</label>
  <input name="name" />
   <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter1" />
       
 </fieldset>
 <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter2" />
      
 </fieldset>
 <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter3" />
      
 </fieldset>
</form>

结果：<input name="name" />

 <input name="newsletter1" />
 <input name="newsletter2" />
 <input name="newsletter3" />