从零玩转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());
    });
});

包裹节点

• 都讲了这么多了, 骚年动动手, 查阅下文档, 尝试下自学这几个方法
• 编程不是死记硬背, 是学会找到解决问题的思路和自学新知识的方法

节点操作练习