您的位置：首页 > 其它

remove() 删除节点 | detach() 删除节点 | empty() 清空节点的内容 | clone() 复制节点

2015-04-10 00:06 627 查看

<html>
<head>
    <title></title>
    <script src="jquery-2.1.3.js"></script>
</head>
<body>
    <div>
        <ul>
            <li>中国</li>
            <li>美国</li>
            <li>德国</li>
            <li>俄国</li>
        </ul>
    </div>
    <ul id="tow"></ul>
    <button id="a">remove</button><button id="b">detach</button><button id="c">empty</button>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $("li").click(function () {
            $(this).css("color", "red");
        })
       

        //----------------------remove() 删除节点

        //$("ul > li").filter(":contains(中国)").remove(); //删除ul子元素li中包含“中国”文本的li
        //$("li").remove(":contains(中国)"); //remove()方法也可以通过传递参数来选择性的删除元素 ，这里将包含“中国”文本的li删除

        $("#a").click(function () {
            var a = $("li").remove(); //删除所有的li元素
            $("#tow").append(a); //将刚刚删除的li元素添加到id为tow的ul中  我们会发现改变颜色的click事件不起作用了。
        })
        
        //----------------------detach() 删除节点

        //detach()和remove()方法一样，也是删除节点，只是这个方法不会把匹配的元素从jquery对象中删除，因而可以在将来使用这些匹配的元素，与remove()不同的是所有的绑定事件，附加的数据都会保留下来。

        $("#b").click(function () {
            var b = $("li").detach(); //删除所有的li元素
            $("#tow").append(b);//将刚刚删除的li元素添加到id为tow的ul中  我们会发现改变颜色的click事件还是起作用的。
        })
       
        //----------------------empty() 清空节点的内容

        $("#c").click(function () {
            $("li").empty(); //empty()方法并不是删除节点，而是清空节点的内容，节点还在。只是节点的内容被清空了
        })

        //----------------------clone() 复制节点

        $("li").click(function () {
            $(this).clone().appendTo("#tow"); //复制当前的节点并将它追加到id=tow的元素中 
           
        })

        //复制节点后，被复制的新元素并不具有任何行为，如果需要新元素也具有复制功能，可以如下这样写

        $("li").click(function () {
            $(this).clone(true).appendTo("#tow");//注意参数true 它的含义就是：复制元素的同时复制元素中所绑定的事件
        }) 

    })
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航