• 第二十四篇 jQuery 学习6 删除元素


    jQuery 学习6 删除元素

     
    上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论。
    jQuery的删除方法:
    • remove() - 删除被选元素(及其子元素)
    • empty() - 从被选元素中删除子元素
    以上引用w3c教程
     
    为了同学们更好的扩展,老师就不在上节课的基础上模拟删除,而是写出删除的功能代码和注意事项,同学们就自己多尝试,来瞧瞧代码先:
     
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>jQuery 学习6 删除元素</title>
        <!--使用jQuery一定不要忘记引用jQuery文件-->
        <script src="../js/jquery-1.12.2.min.js"></script>
    </head>
    <body>
    <div class="div">
        我是第一个div元素
        <span>第一个div里面的span元素</span>
    </div>
    <div>
        我是第二个div哟
        <b>第二个div下面的b元素</b>
        <span>第二个div下面的span元素</span>
    </div>
    <div class="div">我是第三个div</div>
    <!--以上给出三个div测试效果-->
    <br/>
    <!--给三个按钮事件-->
    <button onclick="shanchu1()">删除div</button>
    <button onclick="shanchu2()">过滤删除div里class="div"的</button>
    <button onclick="shanchu3()">删除div里的子元素</button>
    
    <script>
        //shanchu1事件,删除所有div元素
        function shanchu1(){
            $("div").remove();
            //remove()删除方法
        }
        //shanchu2事件,删除div里,只有class="div" 的元素
        function shanchu2(){
            $("div").remove('.div');
            //只会删除div元素里面带有class并且值等于div的元素
        }
        //shanchu3事件,删除div里面的所有子元素
        function shanchu3(){
            $("div").empty();
            //删除被选元素下的所有子元素(包括内容)
        }
    </script>
    </body>
    </html>
     
    以上,我们在页面,打开检查代码,可以看到,执行shanchu1事件,所有div都被删除,同学们注意,这里是删除,并非隐藏,检查代码里的div也就消失了,而不是添加display属性隐藏哦。
    remove()删除方法,它还可以带一个参数,就是过滤条件,在div元素里过滤,过滤条件是class="div",所以我们在remove的括号里,带一个参数,写法和前的$("")是一样的,也就是找到,指定的意思,那么我们调用shanchu2事件,可以看到,只有第一个和第三个div被删除,因为过滤条件指向了它们。
    shanchu3事件,里面用的是empty()方法,它也是删除,但不是删除此元素,而是删除此元素下面的所有元素,包括内容。所以我们检查源码会发现,三个div依旧存在,不过内容、元素等都被删除了。
     
    本节课学的删除操作很简单,难点在于扩展,就看同学们在实战中,能否合理运用。
     
  • 相关阅读:
    c++ 文件读写模板
    sys和system用户的权限区别
    Oracle cmd 命令
    sqldeveloper的安装及其使用教程
    Oracle权限管理详解(2)
    Oracle权限管理详解(1)
    Oracle使用基础
    win7 64位操作系统中 Oracle 11g 安装教程(图解)
    MySQL cmd操作
    Linux下安装tomcat
  • 原文地址:https://www.cnblogs.com/longfeng995/p/7590474.html
Copyright © 2020-2023  润新知