jQuery中获取节点

最新推荐文章于 2023-07-07 19:51:56 发布

安静的对折

最新推荐文章于 2023-07-07 19:51:56 发布

阅读量774

点赞数

分类专栏： JQ 文章标签： siblings next parent find

本文链接：https://blog.csdn.net/k491022087/article/details/52644781

版权

JQ 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

siblings() 相邻的兄弟节点,不包括自己本身

next() 下一个兄弟节点

parent() 父节点

find() 相当于后代选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--引包-->
    <script src="jquery-1.12.2.js"></script>
</head>
<body>
<ul>
    <li>111</li>
    <li><span>span标签</span></li>
    <li id="li3">333</li>
    <li>444</li>
    <span>span标签</span>
</ul>
<script>
    //入口函数
    $(function () {
//        获取li3的对象
        var li3 = $("#li3");
//        获取li3的兄弟节点,并设置背景颜色为pink
        li3.siblings().css("background-color", "pink");
//        获取li3的下一个节点，并设置字体颜色为red
        li3.next().css("color", "red");
//        获取li3的父节点ul
        var ul = li3.parent();
//        获取ul下面所有的后代span标签，并设置字体大小为36px
        ul.find("span").css("font-size", "36px");
    })
</script>
</body>
</html>