jQuery-文档处理

jQuery添加节点

• append(content|fn)
• appendTo(content)
  • 将元素添加到指定元素内部的最后

// 创建节点
var $li = $("<li>It's a new li tag</li>");
// 添加节点
// $("ul").append($li);
$li.appendTo("ul");

• prepend(content|fn)
• prependTo(content)
  • 将元素添加到指定元素内部的最前面

// 创建个节点
var $li = $("<li>It's a new li tag</li>");
// 添加节点
// $("ul").prepend($li);
$li.prependTo("ul");

• after(content|fn)
• insertAfter(content)
  • 元素添加到指定元素外部的后面

// 创建节点
var $li = $("<li>It's a new li tag</li>");
// 添加节点
// $("ul").after($li);
$li.insertAfter("ul");

• before(content|fn)
• insertBefore(content)
  • 将元素添加到指定元素外部的前面

// 创建节点
var $li = $("<li>It's a new li tag</li>");
// 添加节点
// $("ul").before($li);
$li.insertBefore("ul");

jQuery删除节点

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

$(".box").empty();

• remove([expr])
  • 删除指定元素

// 删除所有div
$("div").remove();
// 删除div中clss是box的那个div
$("div").remove(".box");

• detach([expr])
  • 删除指定元素

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

• remove和detach区别
  • remove删除元素后,元素上的事件会被移出
  • detach删除元素后,元素上的事件会被保留

jQuery替换节点

• replaceWith(content|fn)
  • 将所有匹配的元素替换成指定的HTML或DOM元素
  • replaceWith参数可以是一个DOM元素
  • replaceWith参数也可以是一个代码片段
• replaceAll(selector)
  • 用匹配的元素替换掉所有 selector匹配到的元素

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

jQuery复制节点

• clone([Even[,deepEven]])
  • 复制一个节点
  • 浅复制不会复制节点的事件
  • 深复制会复制节点的事件

$(function () {
    $("button").eq(0).click(function () {
        // 浅复制一个元素
        var $li = $("li:first").clone(false);
        // 将复制的元素添加到ul中
        $("ul").append($li);
    });
    $("button").eq(1).click(function () {
        // 深复制一个元素
        var $li = $("li:first").clone(true);
        // 将复制的元素添加到ul中
        $("ul").append($li);
    });

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