jQuery知识整理笔记5

1，添加节点
    内部插入：
        将元素添加到指定元素内部的最后
        append(content|fn)
        appendTo(content)
        将元素添加到指定元素内部的最前面
        prepend(content|fn)
        prependTo(content)
    外部插入：
        将元素添加到指定元素外部的后面
        after(content|fn)
        insertAfter(content)
        将元素添加到指定元素外部的前面
        before(content|fn)
        insertBefore(content)

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

        //$li.appendTo("ul");
        //$li.prependTo("ul"):

        //$("ul").after($li);
        //$("ul").before($li);

        //$li.insertAfter("ul");
        //$li.insertBefore("ul"):

    });
    
    <button>添加节点</button>
    <ul>
        <li>第一个li</li>
        <li>第二个li</li>
        <li>第三个li</li>
    </ul>

2，删除节点
    remove([expr])删除指定元素
    empty()删除指定元素的内容和子元素，指定元素自身不会被删除
    datach([expr])删除指定元素

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

        //$("li").remove(".item");        
        //$("li").empty(".item");
        $("li").datach(".item");
    });
    
    <button>删除节点</button>
    <ul>
        <li class="item">第一个li</li>
        <li>第二个li</li>
        <li class="item">第三个li</li>
        <li>第四个li</li>
        <li class="item">第五个li</li>
    </ul>
    <div>
        我是div
        <p>我是段落</p>
    </div>

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

    $("button").click(function(){
        //新建节点
        var $h4 = $("<h4>标题六</h4>");
        //替换节点
        //$("h1").replaceWith($h4);
        $h4.replaceAll("h1");
    });
    
    <button>替换节点</button>
    <h1>标题一</h1>
    <h1>标题一</h1>
    <p>段落</p>

4，复制节点
    clone([Even[,deepEven]])
    false为浅复制，true为深复制
    浅复制只会复制元素，不会复制元素事件
    浅复制会复制元素，还会复制元素事件

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

    <button>浅复制节点</button>
    <button>深复制节点</button>
    <ul>
        <li>第一个li</li>
        <li>第二个li</li>
        <li>第三个li</li>
        <li>第四个li</li>
        <li>第五个li</li>
    </ul>