jquery中层选择器的具体区别

jquery中4种层级选择器的差别和使用

<div id="outer">
<input type="button" id="button1">
<input type="button" id="button2">
<input type="button" id="button3">
<div id="inner">
<input type="button" id="button4">
<input type="button" id="button5">
</div>
</div>
<input type="button" id="button6">
<input type="button" id="button7">

1、$("ancestor descendant")，选中祖先ancestor下的所有满足条件的后代descendant。
如$("#outer input")会选中button1，button2，button3，button4，button5。
2、$("parent > child")，只会选中直接子元素。
如$("#outer > input")会选中button1，button2，button3，不会选中button4，button5。
3、$("prev + next")，prev和next是两个同级别的元素，选中紧跟在prev后面的next。
如$("#outer + input")只会选中button6，$("#button1 + input")只会选中button2。
4、$("prev ~ siblings")，prev和siblings是同级别元素，选中prev之后的所有同级别的siblings。
如$("#outer ~ input")选中button6和button7，$("#button1 ~input")选中button2和button3。