jquery父子隶属关系

最新推荐文章于 2022-04-12 22:33:19 发布

vbloveshllm

最新推荐文章于 2022-04-12 22:33:19 发布

阅读量687

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/vbloveshllm/article/details/51946082

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.布局

2.样式css

3.js函数

4.全部html

<!DOCTYPE html>
<html >
<head>
    <style>
        .ancestors   *
        {
           display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
        }
    </style>
    <script src ="Script/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("span").parents("li").css({ "color": "red", "border": "2px solid red" });
            $("span").parents("ul").css({ "color": "yellow", "border": "3px solid yellow" });
            $("span").parents("div").css({ "color": "pink", "border": "4px solid pink" });
            $("span").parents("body").css({"color":"blue","border":"6px solid blue"});
        });
    </script>
    <title>父子关系列表</title>
</head>
<body class="ancestors ">body （曾曾祖父）
    <div style="width:500px;">div（曾祖父）
        <ul>（祖父）
            <li>（直接父）
                <span>span</span>
            </li>
        </ul>
    </div>
</body>
</html>