从零玩转jQuery-文档处理

添加节点

• 内部插入

• append(content|fn)

• appendTo(content)

  • 将元素添加到指定元素内部的最后

// 1.创建一个节点var $li = $("<li>新增的li</li>");// 2.添加节点// $("ul").append($li);$li.appendTo("ul");

• prepend(content|fn)

• prependTo(content)

  • 将元素添加到指定元素内部的最前面

// 1.创建一个节点var $li = $("<li>新增的li</li>");// 2.添加节点// $("ul").prepend($li);$li.prependTo("ul");

• 外部插入

• after(content|fn)

• insertAfter(content)

  • 将元素添加到指定元素外部的后面

// 1.创建一个节点var $li = $("<li>新增的li</li>");// 2.添加节点// $("ul").after($li);$li.insertAfter("ul");

• before(content|fn)

• insertBefore(content)

  • 将元素添加到指定元素外部的前面

// 1.创建一个节点var $li = $("<li>新增的li</li>");// 2.添加节点// $("ul").before($li);$li.insertBefore("ul");

---

删除节点

• empty()

  • 删除指定元素的内容和子元素, 指定元素自身不会被删除

$("div").empty();

• remove([expr])

  • 删除指定元素

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

• detach([expr])

  • 
    

// 删除所有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被点击了");
});

---

替换节点

• replaceWith(content|fn)

  • 将所有匹配的元素替换成指定的HTML或DOM元素

  • replaceWith参数可以是一个DOM元素

  • replaceWith参数也可以是一个代码片段

• replaceAll(selector)

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

// 编写jQuery相关代码$("button").click(function () {    // 创建一个新的节点
    var $item = $("<h6>我是标题6</h6>");    // 利用新的节点替换旧的节点
    // $("h1").replaceWith($item);
    $item.replaceAll("h1");
});

---

复制节点

• clone([Even[,deepEven]])

• 复制一个节点

• 浅复制不会复制节点的事件

• 深复制会复制节点的事件

$(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());
    });
});

---

包裹节点

• 都讲了这么多了, 骚年动动手, 查阅下文档, 尝试下自学这几个方法

• 编程不是死记硬背, 是学会找到解决问题的思路和自学新知识的方法

---

节点操作练习

作者：极客江南
链接：https://www.jianshu.com/p/5e1966b8129e