jQuery-創建、刪除、複製、替換、包裹節點

原創

2020-02-21 14:01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>創建刪除複製替換包裹節點</title>
    <script src="../libs/jquery.js"></script>
</head>
<body>
<p title="選擇你最喜歡的水果">你最喜歡的水果是？</p>
<ul>
    <li title='蘋果'>蘋果</li>
    <li title='橘子'>橘子</li>
    <li title='菠蘿'>菠蘿</li>
</ul>

<script>
    $("html");  //$(html)方法會根據傳入的HTML標記字符串，創建一個DOM對象，並將這個DOM對象包裝成一個jQuery對象後返回
    //首先創建兩個Li 元素
    var $li_1 = $("<li></li>"); //創建第一個li元素
    var $li_2 = $("<li></li>"); //創建第二個Li元素
    //然後將這兩個新元素插入文檔中
    $("ul").append($li_1);  //添加到ul節點中，使之能在網頁中顯示
    $("ul").append($li_2);  //可以採取鏈式寫法:$("ul").append($li_1).append($li_2)
    //爲創建的元素節點添加文本內容
    var $li_1 = $("<li>香蕉</li>");//香蕉就是創建的文本節點
    var $li_2 = $("<li>雪梨</li>");
    $("ul").append($li_1);  //添加到ul節點中，使之能在網頁中顯示
    $("ul").append($li_2);  //添加到ul節點中，使之能在網頁中顯示
    //創建屬性節點
    var $li_1 = $("<li title='香蕉'>香蕉</li>");
    var $li_2 = $("<li title='雪梨'>雪梨</li>");
    $("ul").append($li_1);
    $("ul").append($li_2);

    //刪除節點remove(),detach(),empty()三種方法

    /*$("ul li:eq(1)").remove();//獲取第二個Li元素節點後，將它從網頁中刪除
    $("ul li").remove("li[title!=菠蘿]");//將Li元素中屬性title不等於菠蘿的Li元素刪除*/

    /*$("ul li").click(function () {
        alert($(this).html());
    })
    var  $li = $("ul li:eq(1)").detach();//刪除第二個元素
    $li.appendTo("ul");//重新追加此元素，發現它之前綁定的事件還在，如果使用remove（）方法刪除元素的話，那麼它之前綁定的事件將失效*/

    //$("ul li:eq(1)").empty();//獲取第二個Li元素節點後，清空此元素裏的內容，注意是元素裏。嚴格來講，empty（）方法並不是刪除節點，而是清空節點，它能清空元素中的所有後代節點

    //複製節點
    /*$("ul li").click(function () {
        $(this).clone().appendTo("ul");//複製當前單擊的節點，並將它追加到ul元素中.，也就是說當點擊最後一個li內容時，該內容將會被複制
    })
    $(this).clone(true).appendTo("body");//注意參數TRUE，因爲新複製出來的元素不具有任何行爲，添上這段代碼之後就具有複製前的功能*/

    //替換節點 replaceWith()和replaceAll()，注意：如果在替換之前，已經爲元素綁定事件，替換後原先綁定的事件將會與被替換的元素一起消失，需要在新元素上重新綁定事件。
    /*$("p").replaceWith("<strong>你最不喜歡的水果是？</strong>");//將所有匹配的元素都替換成指定的HTML或者DOM元素*/
    /*$("<strong>你最不喜歡的水果是？</strong>").replaceAll("p");*/


    //包裹節點
    $("strong").wrap("<b></b>")//用b標籤把strong元素包裹起來
</script>
</body>
</html>