jQuery层级选择器

摘要: 慕课网学习笔记

<div class="left">
<div class="aaron">
<p>div下的第一个p元素</p>
</div>
<div class="aaron">
<p>div下的第一个p元素</p>
</div>
</div>
<div class="right">
<div class="imooc">
<article>
<p>div下的article下的p元素</p>
</article>
</div>
<div class="imooc">
<article>
<p>div下的article下的p元素</p>
</article>
</div>
</div>

###1、子选择器
$('div > p') 选择所有div元素里面的第一个子元素P
例子：选择了上述两个“ <p>div下的第一个p元素</p>”

###2、后代选择器
$('div p') 选择所有div元素里面的p元素
例子：选择了上述两个 “<p>div下的第一个p元素</p>”和两个“ <p>div下的article下的p元素</p>”

<div class="bottom">
<div>兄弟节点div, +~选择器不能向前选择</div>
<span class="prev">选择器span元素</span>
<div>span后第一个兄弟节点div</div>
<div>兄弟节点div
<div class="small">子元素div</div>
</div>
<span>兄弟节点span,不可选</span>
<div>兄弟节点div</div>
</div>

###3、相邻兄弟选择器
$(".prev + div") 选择了上述“ <div>span后第一个兄弟节点div</div>”

###4、一般兄弟选择器
$(".prev ~ div")选择了上述“ <div>span后第一个兄弟节点div</div>”、“ <div>兄弟节点div
<div class="small">子元素div</div>
</div>”、“ <div>兄弟节点div</div>”