JQuery 导航

最新推荐文章于 2022-08-30 12:23:26 发布

Judian6974

最新推荐文章于 2022-08-30 12:23:26 发布

阅读量596

点赞数

分类专栏： jquery DOM，BOM 文章标签： jquery 导航

本文链接：https://blog.csdn.net/Judian6974/article/details/77268737

版权

jquery 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

DOM，BOM

10 篇文章 0 订阅

订阅专栏

JQuery 导航

祖先

parent()：找到的是当前元素的父元素

//找到自己的父亲
$("#myself").parent().css("background","red");

parents()：找到的是当前元素的所有祖先元素
注：如果在小括号内传入参数，就可以找到你所指定的那一个父元素

$(".myself").parents("[name='zhang']").css("background","blue");

parentsUntil()：选中两个指定元素中的祖先元素

$(".myself").parentsUntil("[name='zhang']").css("background","yellow");

后代

childern()：找到的是当前元素的直接后代

//找到自己的后代
$("#myself").children().css("background","plum");

在小括号中传入参数，找到的是你指定的那一个子元素

$(".myself").children(".firstSon").css("background","green");

find()：找到的是当前元素的所有后代，一直向下查找直到找到最后一个子元素为止
注：一定要传参数。“*”可以找出所有

$(".myself").children("div").css("background","red");

同胞

siblings()：找到当前元素的所有同胞元素

$(".myself").siblings().css("background","pink");

next()：找到的是当前元素的下一个弟弟元素

//找到自己的下一个弟弟
$("#myself").next().css("background","blue");

nextAll()：找到的是当前元素的所有弟弟元素

$(".myself").nextAll().css("background","skyblue");

nextUntil()：找到的是两个参数之间的同胞元素

$(".myself").nextUntil(".p6").css("background","plum");

prev()：找到的是当前元素的上一个哥哥元素

//找到自己的上一个哥哥
$("#myself").prev().css("background","pink");

prevAll()：找到的是当前元素的所有哥哥元素

$(".p6").prevAll().css("background","plum");

prevUntil()：找到的是两个指定元素之间的同胞元素

$(".p6").prevUntil(".myself").css("background","plum");

案例：

<style>
        .body *{
            border: 1px solid green;
            min-height: 20px;
            max-width: 300px;
            margin: 4px;
            background-color: white;
        }
    </style>

</head>
<body class="body">
<div class="ancestor">祖先
    <div>老祖宗
        <div name="zhang" >曾祖父
            <div>父亲
                <div class="oldBrother">大哥</div>
                <div class="myself">
                    我
                    <div class="firstSon">大儿
                        <p name="zhang">大孙子</p>
                        <p>二孙子</p>
                        <div>小孙子</div>
                    </div>
                    <div >二儿</div>
                    <p>三儿</p>
                    <div>四儿</div>
                </div>
                <div class="div3">三弟</div>
                <h3>四弟</h3>
                <p>五弟</p>
                <p class="p6">六弟</p>
            </div>
        </div>
    </div>
</div>
</body>
<script>
 //找到的是当前元素的所有祖先元素
    $(".myself").parents("[name='zhang']").css("background","blue");
    //选中两个指定元素中的祖先元素
    $(".myself").parentsUntil("[name='zhang']").css("background","yellow");
    //找到的是当前元素的直接后代,在小括号中传入参数，找到的是你指定的那一个子元素
    $(".myself").children(".firstSon").css("background","green");
    //find()：找到的是当前元素的所有后代，一直向下查找直到找到最后一个子元素为止
    //注：一定要传参数。“*”可以找出所有
    $(".myself").children("div").css("background","red");
    $(".myself").children("*").css("background","red");
    //找到当前元素的所有同胞元素
    $(".myself").siblings().css("background","pink");
    //找到的是当前元素的所有弟弟元素
    $(".myself").nextAll().css("background","skyblue");
    //找到的是两个参数之间的同胞元素
    $(".myself").nextUntil(".p6").css("background","plum");
    //找到的是当前元素的所有哥哥元素
    $(".p6").prevAll().css("background","plum");
    //找到的是两个指定元素之间的同胞元素
    $(".p6").prevUntil(".myself").css("background","plum");
</script>

Judian6974

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 导航

JQuery 导航祖先parent()：找到的是当前元素的父元素//找到自己的父亲$("#myself").parent().css("background","red");parents()：找到的是当前元素的所有祖先元素注：如果在小括号内传入参数，就可以找到你所指定的那一个父元素$(".myself").parents("[name='zhang']").css("background",
复制链接

扫一扫