jQuery的DOM操作

2018-09-18  本文已影响0人  孙子衡
内部插入 外部插入 包裹 替换 删除 复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 800px;
            padding: 20px;
            border: 2px dashed orange;
            font-size: 0;
        }
        #box img{
            width: 200px;
        }
    </style>
</head>
<body>

<h1>DOM 操作</h1>
<hr>
<div id="box">
    <img src="./images/1.jpeg" alt="">
    <img src="./images/2.jpeg" alt="">
    <img src="./images/3.jpeg" alt="">
    <img src="./images/4.jpeg" alt="">
    <img src="./images/5.jpeg" alt="">

    <br>
    <h3>内部插入</h3>
    <button id="appendBtn">append</button>
    <button id="appendToBtn">appendTo</button>
    <button id="prependBtn">prepend</button>
    <button id="prependToBtn">prependTo</button>
</div>





<script src="jquery-3.3.1.min.js"></script>
<script>
    $('#appendBtn').click(function () {
        // 创建一个新元素
        $('#box').append('<img src="./images/9.jpeg">')
    })

    $('#appendToBtn').click(function () {

        $('<img src="./images/2.jpeg">').appendTo('#box');
    })

    $('#prependBtn').click(function () {
        $('#box').prepend('<img src="images/3.jpeg">');
    })

    $('#prependToBtn').click(function () {
        $('<img src="images/6.jpeg">').prependTo('#box');
    })
    

// 外部插入
$(document).ready(function () {
       $('#box').find('img').width(200).height(200);


    })

    $('#afterBtn').click(function () {
        $('#afterBtn').after('<img src="images/6.jpeg">');
    })

    $('#insertAfterBtn').click(function () {
        $('<img src="images/5.jpeg">').insertAfter('#box');
    })

    $('#beforeBtn').click(function () {
        $('#box').before('<img src="images/9.jpeg">')
    })

    $('#insertAfterBtn').click(function () {
        $('<img src="images/4.jpeg">').insertBefore('#box');
    })


    
</script>

</body>


//删除

<body>
    <h1>DOM 操作 -- 删除</h1>
    <hr>
    <img src="./images/6.jpeg" id="newImage" alt="">
    <div id="box">
        <img src="./images/1.jpeg" alt="">
        <img src="./images/2.jpeg" alt="">
        <img src="./images/3.jpeg" alt="">
        <img src="./images/4.jpeg" alt="">
    </div>


    <br>
    <button id="emptyBtn">empty</button>
    <button id="removeBtn">remove</button>
    <button id="detachBtn">detach</button>
    <button id="backBtn">恢复</button>
    <button id="cloneBtn">克隆</button>
    <button id="appendBtn">追加元素</button>

    <script src="jquery-3.3.1.min.js"></script>

    <script>

        $(document).ready(function () {
            var removeEle = null;


        // 图片选中
        $('#box img').click(function () {
            $(this).toggleClass('active');
        })

        $('#emptyBtn').click(function () {
            $('#box').empty();
        })

       $("#removeBtn").click(function(){
                removedEle = $("img.active").remove();
            });

            $("#detachBtn").click(function(){
                removedEle = $("img.active").detach();
            });

            //恢复
            $("#backBtn").click(function(){
                $("#box").append(removedEle);
            });


            $("#cloneBtn").click(function(){
                $("#box").clone().appendTo("body");
            });

            $("#appendBtn").click(function(){
                $("#box").append($("#newImage").clone())
            })

        });

    </script>
</body>

// 替换
<body>
    <h1>DOM 操作 -- 替换</h1>
    <hr>
    <img src="./images/7.jpeg" id="newImg" alt="">
    <br>
    <div id="box">
        <img src="./images/1.jpeg" alt="">
        <img src="./images/2.jpeg" alt="">
        <img src="./images/3.jpeg" alt="">
        <img src="./images/4.jpeg" alt="">
    </div>


    <br>
    <button id="replaceBtn">替换选中的</button>
    <button id="replaceAllBtn">replaceAll</button>

    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){

            //图片选中
            $("#box img").click(function(){
                $(this).toggleClass("active").siblings("img").removeClass("active");
            });



            $("#replaceBtn").click(function(){
                $("img.active").replaceWith("<img src='./images/6.jpeg'>");
                //$("img.active").replaceWith($("#newImg"));
            });


            $("#replaceAllBtn").click(function(){
                $("<img src='./images/8.jpeg'>").replaceAll("img.active");
            })
        })
    </script>
</body>

// 包裹
<body>

<h1>DOM 操作----包裹</h1>

<hr>
<div id="box">
    <img src="images/1.jpeg" alt="">
    <img src="images/2.jpeg" alt="">
    <img src="images/3.jpeg" alt="">
    <img src="images/4.jpeg" alt="">
</div>

<button id="wrapBtn">wrap</button>
<button id="wrapAllBtn">wrapAll</button>
<button id="wrapInnerBtn">wrapInner</button>
<button id="unwrapBtn">ubwrap</button>
<hr>
</body>

<script src="jquery-3.3.1.min.js"></script>

<script>

    $('#wrapBtn').click(function () {
        $('#box img').wrap('<li>');
    })


            $("#wrapAllBtn").click(function(){
                $("#box img").wrapAll("<li>");
            });

            $("#wrapInnerBtn").click(function(){
                $("#box").wrapInner("<li>");
            });

            $("#unwrapBtn").click(function(){
                $("#box img").unwrap();
            });





</script>
</html>
上一篇下一篇

猜你喜欢

热点阅读