jQuery学习笔记之empty()

来源：互联网发布：cad排料软件编辑：程序博客网时间：2024/06/15 03:27

官方资料
jQuery.empty()

jQuery.detach()

empty()
删除匹配元素(集)的全部子元素，该方法不接受任何参数。empty()不仅移除子元素、后代元素，也移除匹配元素内部的文本内容。
empty()在移除子元素之前会先移除子元素上的数据和事件处理。如果你想移除元素而又不想破坏它的数据结构或事件处理(以便这些元素稍后可以再次添加)，我们可以使用detach()代替

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript" src="jquery-2.2.4.js"></script></head><body>    <ul>        <li>方案 1<span>测试效果</span></li>        <li>方案 2<span>测试效果</span></li>        <li>方案 3<span>测试效果</span></li>        <li>方案 4<span>测试效果</span></li>        <li>方案 5<span>测试效果</span></li>    </ul>    <button id="span">删除span</button>    <button id="li">删除li</button>    <button id="detach">使用detach</button>    <button id="add">添加被detach删除的数据</button></body><script type="text/javascript">    $(function(){        $("#span").on("click",function(){            $("ul li span").empty();        });        $("#li").on("click",function(){            $("ul").empty();        });        $("ul").on("click","li",function(){            alert($(this).text());        })        var data = null;        $("#detach").on("click",function(){            data = $("ul").detach();        });        $("#add").on("click",function(){            $("body").prepend(data);            data = null;        });    })</script></html>

在使用上面的demo查看效果时请打开开发者工具，注意观察代码的变化

阅读全文

0 0