jQuery层级选择器

    在jQuery中，为了方便层级选择，可使用层级选择器

目录

Child Selector ('parent > child')子元素选择器

descendant Selector (后代选择器)

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>

一定要注意上面两个选择器的可及范围，前者是匹配后面紧邻的元素，后者是匹配后面所有的元素

主页传送门