4.20作业

最新推荐文章于 2024-08-31 21:49:18 发布

Lingrayy

最新推荐文章于 2024-08-31 21:49:18 发布

阅读量115

点赞数

本文链接：https://blog.csdn.net/Lingrayy/article/details/124309861

版权

jQuery DOM操作背景色克隆删除元素

关键词由CSDN通过智能技术生成

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>作业1</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            margin:auto;
        }
    </style>
</head>
<body>
    <div></div>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $("div").css("background-color","green");
    </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>作业2</title>
</head>
<body>
    <div>
        <p>11111</p>
    </div>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $("p").text("我是子元素");
    </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>作业3</title>
</head>
<body>
    <div>
        <p>11111</p>
    </div>
    <div>
        <p>22222</p>
    </div>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $("p:eq(1)").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>作业4</title>
</head>
<body>
    <p>11111</p>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $("p").clone().insertAfter("p:last").text("我是克隆体");
    </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>作业5</title>
</head>
<body>
    <ul>
        <li>秦风</li>
        <li>澜风</li>
        <li>侯费</li>
    </ul>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        // $("li:last").empty()
         $("li:last").remove()

    </script>
</body>
</html>

Lingrayy

关注

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-scale=1
复制链接

扫一扫