在jQuery中,为了方便层级选择,可使用层级选择器
目录
Child Selector ('parent > child')子元素选择器
next adjacent Selctor ('prev + next') 相邻选择器
Next Sliblings Selector('prev ~ siblings)
Child Selector ('parent > child')子元素选择器
描述:选择所有指定“parent”元素中指定的child的直接子元素
语法:$("parent > child")或者jQuery("parent > child")
注:parent是任何有效的选择器,child是用来筛选子元素的选择器
<div>
<p></p>
</div>
<script>
$("div > p") //p
</script>
descendant Selector (后代选择器)
描述:选择给定祖先元素的所有后代元素
语法:$('ancestor descedant')或者jQuery("ancestor descedant")
注:ancestor是任何有效的选择器,descedant是一个用来筛选后代的选择器
<div>
<p></p>
<p></p>
</div>
<script>
$("div p") //p p
</script>
next adjacent Selctor ('prev + next') 相邻选择器
描述:选择所有(紧邻)着prev元素后的next元素
语法:$("prev + next")或者jQuery("prev + next")
注:prev是任何有效的选择器,next是用来筛选紧跟在prev元素后的选择器
<div>
</div>
<p>
</p>
<script>
$("div + p") //p
</script>
Next Sliblings Selector('prev ~ siblings)
描述:匹配'prev'元素之后的所有兄弟元素,具有相同的父元素,并匹配过滤'siblings'选择器
语法:$("prev ~ siblings")或者jQuery("prev ~ siblings")
注: prev 是任何有效的选择器, siblings是一个选择器来过滤第一个选择器以后的兄弟元素
<div>
</div>
<p>
</p>
<span>
</span>
<script>
$("div ~ p") //过滤掉p标签 span
</script>
一定要注意上面两个选择器的可及范围,前者是匹配后面紧邻的元素,后者是匹配后面所有的元素