前端学习笔记-jquery-6-层级选择器及对应jquery方法

最新推荐文章于 2022-05-31 23:23:26 发布

原创最新推荐文章于 2022-05-31 23:23:26 发布 · 348 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

前端同时被 2 个专栏收录

21 篇文章

订阅专栏

jquery

16 篇文章

订阅专栏

本文详细介绍了CSS与jQuery中不同类型的选择器，包括子选择器、后代选择器、相邻兄弟选择器及一般兄弟选择器，并提供了对应的代码示例。

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

层级关系：子元素后代元素兄弟元素相邻元素

1、$(“parent>child”)子选择器

<div id="box"><p>xxx</p></box>
/* css代码 */
#box>p{
    color:red;
}

$(function(){
    //jquery模拟css
    $("#box>p").css("color", "blue");
});

$(function(){
    //与子选择器等效
    $("#box").children('p').css('color','red');
});

2、$(“ancestor descendant”)后代选择器

后代选择器包含子选择器的选择的内容

<ul>
    <li><a href="xxx"></a></li>
    <li><a href="xxx"></a></li>
</ul>
/* css代码 */
/*
ul a{
    color:red;
}
*/
/*写全，防止意外*/
ul li a{
    color:red;
}

$(function(){
    //jquery模拟css
    $("ul li a").css("color", "blue");
});

$(function(){
    //与后代选择器等效
    $('ul').find('a').css("color","blue");
});

3、$(“prev+next”)相邻兄弟选择器

/* css代码 */
#box+p{
    color:red;
}

$(function(){
    $('#box+p').css('color','red');
});

$(function(){
    //与next选择器等效
    $('#box').next('p').css('color','red');
});

4、$(“prev~siblings”)一般兄弟选择器（nextAll）

一般兄弟选择器包含相邻兄弟选择的内容
相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下

$(".prev~div")//prev后面的所有div

/* css代码 */
#box~p{
    color:red;
}

$(function(){
    $('#box~p').css('color','red');
});

$(function(){
    //与next选择器等效
    $('#box').nextAll('p').css('color','red');
});

除了children(),find(),next(),nextAll(),还有函数
prev()//上一个节点
prevAll()//上所有节点
siblings()//上下所有节点
nextUntil()//下面所有不包含参数的节点，遇到参数节点就停止
prevUntil()上面所有不包含参数的节点，遇到参数节点就停止