jQuery选择器的层级使用和区分

层级

ancestor descendant 找到（ancestor）中所有的子子孙孙（descendant）元素
parent > child 匹配（parent）中所有的子级（child）元素
prev + next 匹配所有跟在、紧挨着（prev）后面的（next）元素
prev ~ siblings 找到所有与（prev）同辈的（siblings）元素
1、ancestor descendant与parent > child的区别
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="name" />, <input name="newsletter" /> ]
jQuery 代码:$("form > input") 结果:[ <input name="name" /> ]

从上面的示例中可以看出ancestor descendant是查询所有的子子孙孙元素，parent > child只查询所有的子元素，不查询孙元素

2、prev + next与prev ~ siblings的区别
HTML 代码:

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

jQuery 代码:$("label + input") 结果:[ <input name="name" />, <input name="newsletter" /> ]
jQuery 代码:$("form ~ input") 结果:[ <input name="none" /> ]

$("label + input")：匹配所有紧跟在label后面的input元素
$("form ~ input")：找到所有与 form 同辈的input元素