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")：找到所有与label同辈的input元素