jQuery篇——jQuery节点操作

在jQuery中，节点操作是基础且比较重要的内容，我们把它的笔记写下并做一篇笔记。

1.添加节点

内部插入:

• append(content|fn) //被插入的执行此方法
• appendTo(content) //要插入的元素执行此方法。

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

• prepend(content|fn)
• prependTo(content)

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

外部插入:

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

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

jQuery删除节点的方法

删除元素
remove([expr])：删除指定元素
empty()：删除指定元素的内容和子元素, 指定元素自身不会被删除
detach([expr])同remove方法。区别：

• 利用remove删除之后再重新添加,原有的事件无法响应
• 利用detach删除之后再重新添加,原有事件可以响应

            $("button").click(function () {
                // $("div").remove();
                // $("div").empty();
                // $("li").remove(".item");		//可以传入类名

jQuery替换节点
替换：

• replaceWith(content|fn)
• replaceAll(selector)
  替换所有匹配的元素为指定的元素

            $("button").click(function () {
                // 1.新建一个元素
                var $h6 = $("<h6>我是标题6</h6>");
                // 2.替换元素
                // $("h1").replaceWith($h6);
                $h6.replaceAll("h1");
            });				//同上面添加节点方法一样

jQuery中复制节点的方法

方法：clone([Even[,deepEven]])

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

            $("li").click(function () {
                alert($(this).html());
            });
            注意：
            如果传入false就是浅复制, 如果传入true就是深复制
            浅复制只会复制元素, 不会复制元素的事件
            深复制会复制元素, 而且还会复制元素的事件