4.20作业

最新推荐文章于 2024-06-20 22:53:58 发布

拦路雨偏似雪发

最新推荐文章于 2024-06-20 22:53:58 发布

阅读量557

点赞数

文章标签： html

本文链接：https://blog.csdn.net/s10553868/article/details/124307361

版权

1.使用jquery修改div元素的背景色(随意颜色)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/jquery-3.6.0.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        $("div").on("click", function () {
            $("div").css("background-color", "yellow")
        })

    </script>
</body>

</html>

2.使用jquery修改div的子元素p的内容为"我是子元素"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/jquery-3.6.0.min.js"></script>
</head>

<body>
    <button>修改</button>
    <div>
        <p>天海大师</p>
        <h2>岳山</h2>
    </div>

    <script>
        $("button").click(function () {

            $("p").html("<p>我是子元素</p>");
        });
    </script>
</body>

</html>

3.使用jquery修改第二个p元素的背景色为"orange"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/jquery-3.6.0.min.js"></script>
</head>

<body>
    <p>天海大师</p>
    <p id="p1">迦南</p>
    <p>季沧海</p>
    <script>
        $("#p1").css("background-color", "orange");
    </script>
</body>

</html>

4.使用jquery克隆方法.请克隆p元素并且修改"克隆的p元素"内容为"我是克隆体"，并添加到"被克隆p元素"的后面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/jquery-3.6.0.min.js"></script>
</head>

<body>
    <button id="t1">克隆</button>
    <ul>
        <li>季沧海</li>
        <li>岳山</li>
        <p>宁红叶</p>
        <li>无尘</li>
    </ul>

    <script>
        $(":button").on("click", function () {
            $("p:first").clone().insertAfter("p:last").replaceWith("我是克隆体")
        })

    </script>
</body>

</html>

5.删除列表元素中最后一个li元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="t1">开炮</button>
    <ul>
        <li>李云龙</li>
        <li>意大利炮</li>
        <li>山本</li>
    </ul>
    <script>
        $("button").click(function () {
            $("li:eq(2)").remove();
        })
    </script>
</body>
</html>

拦路雨偏似雪发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4.20作业

1.使用jquery修改div元素的背景色(随意颜色)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal
复制链接

扫一扫

4.20作业

“相关推荐”对你有帮助么？