從零玩轉jQuery-文件處理

新增節點

• 內部插入

• • 將元素新增到指定元素內部的最後

// 1.建立一個節點var $li = $("

新增的li

");// 2.新增節點// $("ul").append($li);$li.appendTo("ul");

• • 將元素新增到指定元素內部的最前面

// 1.建立一個節點var $li = $("

新增的li

");// 2.新增節點// $("ul").prepend($li);$li.prependTo("ul");

• 外部插入

• • 將元素新增到指定元素外部的後面

// 1.建立一個節點var $li = $("

新增的li

");// 2.新增節點// $("ul").after($li);$li.insertAfter("ul");

• • 將元素新增到指定元素外部的前面

// 1.建立一個節點var $li = $("

新增的li

");// 2.新增節點// $("ul").before($li);$li.insertBefore("ul");

---

刪除節點

• • 刪除指定元素的內容和子元素, 指定元素自身不會被刪除

$("div").empty();

• • 刪除指定元素

// 刪除所有div$("div").remove();// 刪除div中id是box1的那個div$("div").remove("#box1");

• • 
    

// 刪除所有div$("div").detach();// 刪除div中id是box1的那個div$("div").detach("#box1");

• remove和detach區別

  • remove刪除元素後,元素上的事件會被移出

  • detach刪除元素後,元素上的事件會被保留

$("button").click(function () {    // $("div").remove();
    // $("div").empty();
    // $("li").remove(".item");

    // 利用remove刪除之後再重新新增,原有的事件無法響應
    // var $div = $("div").remove();
    // 利用detach刪除之後再重新新增,原有事件可以響應
    var $div = $("div").detach();    // console.log($div);
    // 將刪除的返回值重新新增到body上
    $("body").append($div);
});
$("div").click(function () {
    alert("div被點選了");
});

---

替換節點

• • 將所有匹配的元素替換成指定的HTML或DOM元素

  • replaceWith引數可以是一個DOM元素

  • replaceWith引數也可以是一個程式碼片段

• • 用匹配的元素替換掉所有 selector匹配到的元素

// 編寫jQuery相關程式碼$("button").click(function () {    // 建立一個新的節點
    var $item = $("
我是標題6
");    // 利用新的節點替換舊的節點
    // $("h1").replaceWith($item);
    $item.replaceAll("h1");
});

---

複製節點

• 複製一個節點

• 淺複製不會複製節點的事件

• 深複製會複製節點的事件

$(function () {    // clone([Even[,deepEven]])
    $("button").eq(0).click(function () {        // 1.淺複製一個元素
        var $li = $("li:first").clone(false);        // 2.將複製的元素新增到ul中
        $("ul").append($li); // 點選li無法響應事件
    });
    $("button").eq(1).click(function () {        // 1.深複製一個元素
        var $li = $("li:first").clone(true);        // 2.將複製的元素新增到ul中
        $("ul").append($li); // 點選li可以響應事件
    });

    $("li").click(function () {
        alert($(this).html());
    });
});

---

包裹節點

• 都講了這麼多了, 騷年動動手, 查閱下文件, 嘗試下自學這幾個方法

• 程式設計不是死記硬背, 是學會找到解決問題的思路和自學新知識的方法

---

節點操作練習

作者：極客江南
連結：