jQuery的DOM操作

内部插入 外部插入 包裹 替换 删除 复制
<!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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • title: 《锋利的jQuery》三、jQuery的DOM操作date: 2017-07-03 09:23:54...
    Gary23阅读 399评论 0 1
  • 一、创建节点 以HTML创建新元素 以jQuery创建新元素 以DOM创建新元素 二、插入节点 通过js的DOM操...
    清心挽风阅读 865评论 0 2
  • (一)、clone()函数 .clone()方法深度 复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素...
    hsj_gg阅读 148评论 0 1
  • 1:首先,我们要明白什么是DOM,以及DOM有哪些相关的知识(p62)2:jquery操作DOM分为几个部分 首先...
    lintong阅读 215评论 0 1
  • jq获取元素内容和属性 获取内容和设置内容 假设原标签为 This spandisplay both the b...
    夜月行者阅读 316评论 0 0