jQuery学习 — 基础应用（补充）

最新推荐文章于 2024-09-27 16:57:59 发布

chenlei...

最新推荐文章于 2024-09-27 16:57:59 发布

阅读量180

点赞数

文章标签： jquery 学习 javascript

本文链接：https://blog.csdn.net/weixin_67614925/article/details/125063888

版权

文章目录

添加元素
删除元素
操作css
尺寸

添加元素

<body>
    <button id="btn01">prepend&append</button>
    <p id="p01">我是p01的内容</p>
    <button id="btn02">before&after</button>
    <p id="p02">我是p02的内容</p>
</body>

<script>
    // 在p元素里面追加
    $('#btn01').click(function (e) {
        e.preventDefault();
        // 在前面追加
        $('#p01').prepend('开始');
        // 在后面追加
        $('#p01').append('结束');
    });
    // 在p元素外面追加
    $('#btn02').click(function (e) {
        e.preventDefault();
        // 在前面追加
        $('#p02').before('开始');
        // 在后面追加
        $('#p02').after('结束');
    });
</script>

删除元素

<head>
    <!-- 引入jQuery文件 -->
    <script src="./js/jquery-3.6.0.min.js"></script>
    <style>
        div {
            margin: 0 auto;
            text-align: center;
            border: 3px solid #eb025f;
        }

        #outer_box {
            width: 600px;
            height: 600px;
        }

        #middle_box {
            width: 450px;
            height: 450px;
        }

        #inner_box {
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div id="out_box">
        <button id="btn01">
            海贼王
        </button>
        <br>
        <button id="btn02">
            航海王
        </button>
        <div id="middle_box">
            罗杰
            <div id="inner_box">
                路飞
            </div>
        </div>
    </div>
</body>

<script>
    $(function (e) {
        $('#btn01').click(function (e) {
            e.preventDefault();
            // 删除被选元素及其子元素
            $('#middle_box').remove();
        });
        $('#btn02').click(function (e) {
            e.preventDefault();
            // 删除被选元素的子元素 被选元素不会被删除
            $('#middle_box').empty();
        });
    })
</script>

操作css

<head>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .red {
            background-color: #F00;
        }

        .green {
            background-color: #0F0;
        }

        .blue {
            background-color: #00F;
        }

        div {
            margin: 0 auto;
            width: 300px;
            height: 300px;
            border: #F0F 3px solid;
        }
    </style>
</head>

<body>
    <button id="btn_red">红色</button>
    <button id="btn_green">绿色</button>
    <button id="btn_toggle">toggle</button>
    <button id="btn">行内样式</button>
    <div id="box" class="a b c d e"></div>
</body>

<script src="./js/jquery-3.6.0.min.js"></script>
<script>
    $(function (e) {
        // removeClass 移除元素   addClass 添加元素 
        // 添加前先移除
        $('#btn_red').click(function (e) {
            e.preventDefault();
            $('#box').removeClass('blue');
            $('#box').removeClass('green');
            $('#box').addClass('red');
        });
        $('#btn_green').click(function (e) {
            e.preventDefault();
            $('#box').removeClass('blue');
            $('#box').removeClass('red');
            $('#box').addClass('green');
        });
        $('#btn_toggle').click(function (e) {
            e.preventDefault();
            $('#box').toggleClass('blue');
        });
        $('#btn').click(function (e) {
            e.preventDefault();
            // 行内样式
            $('#box').css({
                "background-color": "#000",
            });;
        });
    });
</script>
</script>

尺寸

Width()/Height() 方法返回元素的宽度/高度。
innerWidth()/innerHeight() 方法返回元素的宽度/高度（包括内边距）。
outerWidth()/outerHeight() 方法返回元素的宽度/高度（包括内边距和边框）。
outerWidth(true)/outerHeight(true) 方法返回元素的宽度/高度（包括内边距、边框和外边距）。
在这里插入图片描述