jQuery层级选择器

本文详细介绍了jQuery中的四种选择器:子元素选择器、后代选择器、相邻选择器和兄弟选择器,并通过实例展示了如何使用这些选择器进行DOM元素的选取。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    在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>

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

主页传送门

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值