jquery中几种层级选择器的详细说明
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>JQUERY选择器测试</title>
</head>
<body>
<div>
<p>Hello World!</p>
<p class="foo">另外一段，但是这段有个class</p>
<p><span>另外一段，这段里面有个span</span></p>
<p id="bar">
<span class="foo">这个span在di为bar的段落内</span>
<span id="jiu">这个span也在di为bar的段落内</span>
</p>
<span>再来一个span</span>
<span class="foo2">再来一个span</span>
</div>
<span class="foo">再来一个span</span>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</body>
</html>
首先是选择后代元素(空格)
比如
>>> $("p span")
[span, span.foo, span#jiu]会选择所有p元素下的span元素
又如
>>> $("body span")
[span, span.foo, span#jiu, span, span.foo2, span#barr.foo]
就会选择body下的所有span元素
然后是选择子代元素(>)
如
>>> $("div>span")
而如果是$("div span")答案则为
>>> $("div span")
[span, span.foo, span#jiu, span, span.foo2]相信你已经发现了不同之处。、
它只选择它的子代的元素
再就是选择下一个兄弟元素(+)
如
>>> $("span+span")
或者
>>> $(".foo+span")
[span#jiu]
只选择下一个的兄弟元素
最后就是选择兄弟元素(~)
如
>>> $("#bar~span")
又如
>>> $("p~span")
发现结果一样，结论就是它会选择所有跟在其后的兄弟元素。
如有不懂，可继续追问！转载请说明出处~谢谢！
