jQuery必會的增刪改查Dom操作2(insertBefore、before、insertAfter 、after、appendTo 、append、prependTo 、prepend、...)

文章目錄

insertBefore 和 before

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>
        .wrapper {
            border: 1px solid black;
            width: 200px;
            padding: 10px;
        }

        .wrapper div {
            width: 200px;
            height: 100px;
        }

        .wrapper .box1 {
            background-color: #ff0000;
        }

        .wrapper .box2 {
            background-color: #0000ff;
        }

        .content {
            width: 200px;
            height: 50px;
            background-color: #ff00ff;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
    <div class="content">content</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //insertBefore方法，將.content插入到.box1的前面
    $('.content').insertBefore('.box1');


    /*
        before方法，將.content插入到.box1的前面，
        注意：before()括號裏面不能直接寫css選擇器了，
        需要你通過jq對象來選中。
    */
    $('.box1').before($('.content'));


    /*
        爲什麼jq要弄兩個相同功能的方法？
            拿上面的兩個來比較的話，其實是因爲讓你可以更好的鏈式操作：
        $('.content').insertBefore('.box1').css(),這樣改變的是.content的樣式；
        $('.box1').before( $('.content') ).css(),這樣改變的是.box1的樣式;
    */
</script>

</html>

insertAfter 和 after

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>
        .wrapper {
            border: 1px solid black;
            width: 200px;
            padding: 10px;
        }

        .wrapper div {
            width: 200px;
            height: 100px;
        }

        .wrapper .box1 {
            background-color: #ff0000;
        }

        .wrapper .box2 {
            background-color: #0000ff;
        }

        .content {
            width: 200px;
            height: 50px;
            background-color: #ff00ff;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
    <div class="content">content</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //insertAfter方法，將.content插入到.box1的後面
    $('.content').insertAfter('.box1');

    /*
        after方法，將.content插入到.box1的後面，
        注意：after()括號裏面不能直接寫css選擇器了，
        需要你通過jq對象來選中。
    */
    $('.box1').after($('.content'));


    /*
        爲什麼jq要弄兩個相同功能的方法？
            拿上面的兩個來比較的話，其實是因爲讓你可以更好的鏈式操作：
        $('.content').insertAfter('.box1').css(),這樣改變的是.content的樣式；
        $('.box1').after( $('.content') ).css(),這樣改變的是.box1的樣式;
    */
</script>

</html>

appendTo 和 append

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>
        .wrapper {
            border: 1px solid black;
            width: 200px;
            padding: 10px;
        }

        .wrapper div {
            width: 200px;
            height: 100px;
        }

        .wrapper .box1 {
            background-color: #ff0000;
        }

        .wrapper .box2 {
            background-color: #0000ff;
        }

        .content {
            width: 200px;
            height: 50px;
            background-color: #ff00ff;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
    <div class="content">content</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //appendTo方法，將.content插入到.wrapper的裏面默認插入到末尾
    $('.content').appendTo('.wrapper');

    /*
        append方法，將.content插入到.wrapper的裏面默認插入到末尾，
        注意：append()括號裏面不能直接寫css選擇器了，
        需要你通過jq對象來選中。
    */
    $('.wrapper').append($('.content'))


    /*
        爲什麼jq要弄兩個相同功能的方法？
            拿上面的兩個來比較的話，其實是因爲讓你可以更好的鏈式操作：
        $('.content').appendTo('.wrapper').css(),這樣改變的是.content的樣式；
        $('.wrapper').append( $('.content') ).css(),這樣改變的是.wrapper的樣式;
    */
</script>

</html>

prependTo 和 prepend

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>
        .wrapper {
            border: 1px solid black;
            width: 200px;
            padding: 10px;
        }

        .wrapper div {
            width: 200px;
            height: 100px;
        }

        .wrapper .box1 {
            background-color: #ff0000;
        }

        .wrapper .box2 {
            background-color: #0000ff;
        }

        .content {
            width: 200px;
            height: 50px;
            background-color: #ff00ff;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
    <div class="content">content</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //prependTo方法，將.content插入到.wrapper的裏面默認插入到第一個
    $('.content').prependTo('.wrapper');

    /*
        prepend方法，將.content插入到.wrapper的裏面默認插入到第一個，
        注意：prepend()括號裏面不能直接寫css選擇器了，
        需要你通過jq對象來選中。
    */
    $('.wrapper').prepend($('.content'))


    /*
        爲什麼jq要弄兩個相同功能的方法？
            拿上面的兩個來比較的話，其實是因爲讓你可以更好的鏈式操作：
        $('.content').prependTo('.wrapper').css(),這樣改變的是.content的樣式；
        $('.wrapper').prepend( $('.content') ).css(),這樣改變的是.wrapper的樣式;
    */
</script>

</html>

remove 和 detach

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #ff0000;
        }
    </style>
</head>

<body>
    <div></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    $('div').click(function () {
        alert('0')
    })
    /*
        現在刪除div，使用remove方法，會返回刪除後的div對象。
        $('div').remove()
    */

    /*
        現在刪除div，使用remove方法，然後再使用appendTo方法，
        這個時候，你會發現點擊事件沒有了。
    */
    //   $('div').remove().appendTo('body');

    /*
        現在刪除div，使用detach方法，會返回刪除後的div對象。
        $('div').detach();
    */

    /*
         現在刪除div，使用detach方法，然後再使用appendTo方法，
         這個時候，你會發現點擊事件依然在。
     */
    //   $('div').detach().appendTo('body');
</script>

</html>

$()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #ff0000;
        }
    </style>
</head>

<body>
    <div></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    /*
        在body裏面插入一個div
    */
    //  寫法一
    //  $('<div></div>').appendTo('body');
    //  寫法二
    // $('<div/>').appendTo('body');

    /*
        在body裏面插入一個div，並且給這個div添加內容，
        並且修改內容的文字顏色
    */
    //  $('<div style="color:#0000ff">我是新添加的div</div>').appendTo('body');
</script>

</html>

jQuery必會的增刪改查Dom操作2(insertBefore、before、insertAfter 、after、appendTo 、append、prependTo 、prepend、...)

文章目錄

insertBefore 和 before

insertAfter 和 after

appendTo 和 append

prependTo 和 prepend

remove 和 detach

$()

druid數據源 xml配置

盒模型及盒模型應用

VSCode快速編輯html(Emmet)

jQuery之工具方法extend插件擴展

數據結構之核心基礎之線性結構

微信 URL Scheme詳細參數、判斷是否爲微信內置瀏覽器

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結