您的位置：首页 > Web前端 > JQuery

jquery父子隶属关系

2016-07-18 22:10 489 查看

1.布局

<body class="ancestors ">body （曾曾祖父）

    <div style="width:500px;">div（曾祖父）

        <ul>（祖父）

            <li>（直接父）

                <span>span</span>

            </li>

        </ul>

    </div>

</body>

2.样式css

<style>

        .ancestors   *

        {

           display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

        }

3.js函数

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

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航