JQuery的应用

龙，学习中......

已于 2023-05-11 15:03:31 修改

阅读量980

点赞数

分类专栏： Web 文章标签： html javascript css jquery

于 2022-04-20 20:09:11 首次发布

本文链接：https://blog.csdn.net/weixin_57595610/article/details/124305985

版权

Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JQuery对元素的操作(改变属性以及克隆、删除元素)

1.使用jquery修改div元素的背景色(随意颜色)
2.使用jquery修改div的子元素p的内容为"我是子元素"
3.使用jquery修改第二个p元素的背景色为"orange"
4.使用jquery克隆方法.请克隆p元素并且修改"克隆的p元素"内容为"我是克隆体"，并添加到"被克隆p元素"的后面
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>jQuery相关操作</title>
    <script src="../../js/jquery-3.6.0.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <h3>修改div背景颜色</h3>
    <button id="b1">变色</button>
    <div id="d1"></div>
    <hr>
    <h3>修改div的子元素p的内容</h3>
    <button id="b2">点击修改</button>
    <div id="d2">
        <p>Hello jQuery</p>
    </div>
    <hr>
    <h3>修改第2个p元素的背景色为橙色</h3>
    <button id="b3">点击修改</button>
    <div id="d3">
        <p>第1个p元素</p>
        <p>第2个p元素</p>
    </div>
    <hr>
    <button id="b4">点击克隆并添加</button>
    <h3>jQuery方法克隆p元素并且修改"克隆的p元素"内容为"我是克隆体"，并添加到"被克隆p元素"的后面</h3>
    <div id="d4">
        <p>被克隆的p元素</p>
    </div>
    <hr>
    <h3>删除列表元素中最后一个li元素</h3>
    <button id="b5">点击删除</button>
    <ul>
        <li>完美世界</li>
        <li>神墓</li>
        <li>遮天</li>
        <li>圣墟</li>
    </ul>
    <hr>
    <script>
        //1.变色按钮
        $("#b1").click(function () {
            $("#d1").css("background-color", "yellow");
        });

        //2.修改内容按钮
        $("#b2").click(function () {
            var str = "我是子元素";
            $("#d2>p").text(str);
        });

        //3.修改p颜色按钮
        $("#b3").click(function () {
            $("#d3 p").eq(1).css("background", "orange");
        });

        //4.克隆并添加按钮
        $("#b4").click(function () {
            var str = "我是克隆体";
            $("#d4 p").clone().text(str).insertAfter($("#d4 p"));
        });

        //5.删除按钮
        $("#b5").click(function () {
            $("li").last().remove();
        });
    </script>
</body>

</html>

龙，学习中......

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery的应用

练习1.使用jquery修改div元素的背景色(随意颜色)2.使用jquery修改div的子元素p的内容为"我是子元素"3.使用jquery修改第二个p元素的背景色为"orange"4.使用jquery克隆方法.请克隆p元素并且修改"克隆的p元素"内容为"我是克隆体"，并添加到"被克隆p元素"的后面5.删除列表元素中最后一个li元素<!DOCTYPE html><html lang="en"><head> <meta charset="UT
复制链接

扫一扫

专栏目录