zoukankan      html  css  js  c++  java
  • jQuery知识点总结(第五天)

    节点的操作和数据库操作一样,无非是增、删、改、查。

    今天总结删除节点、复制节点、替换节点、与包裹节点



    删除节点:

    如果文档中一个元素多余,那么就需要删除掉。jQuery提供了三种删除节点的方法。分别是remove()   、  detach()    、   empty();

               remove:

    1 <body>
    2     <ul class="bigul">
    3         <li class="smchild">我这么可爱你不要我了。</li>
    4         <li class="smchild">我的爸爸ul最宠爱我</li>
    5     </ul>
    6     <script>
    7         $(".bigul :first-child").remove();
    8     </script>
    9 </body>

                   detach:

    1 <body>
    2     <ul class="bigul">
    3         <li class="smchild">我这么可爱你不要我了。</li>
    4         <li class="smchild">我的爸爸ul最宠爱我</li>
    5     </ul>
    6     <script>
    7         $(".bigul :first-child").detach();
    8     </script>
    9 </body>

                  

                  empty:

    1 <body>
    2     <ul class="bigul">
    3         <li class="smchild">我这么可爱你不要我了。</li>
    4         <li class="smchild">我的爸爸ul最宠爱我</li>
    5     </ul>
    6     <script>
    7         $(".bigul :first-child").empty();
    8     </script>
    9 </body>

    这里必须注意的是,empty()并不是删除节点,只是清除节点中的内容。下面是empty()执行后的页面效果。

      

      remove()   、  detach()    、   empty() 辨析:

     

           remove()   和   detach()的共同点都是可以删除节点。更更严谨更科学的说法就是【剪切】,并没有真正的删除掉元素,这些元素还可以重新插入到其他的地方。不同点在于,remove() 【剪切】节点后,该节点上绑定的事件同时也被销毁,但是detach()  所【剪切】的节点上所绑定的事件都能够保留。

          empty() 并不是删除,只清楚元素的内容。相当于把contains中内容替换成了null。

          删除节点之后,可以使用appendTo()插入到DOM树中。

           1 $(".bigul :first-child").remove().appendTo('你的元素内'); 

          当然如果你是要剪切元素。可以直接使用appendTo:

           1 $(".bigul :first-child").appendTo('你的元素内'); 

          上下这两种写法最终的效果都是一样的。

          复制节点(克隆节点):

          看到克隆,就想起了那只多莉小绵羊,clone这个单词也是克隆的音译,比较好记忆。

          clone()的用法比较简单,但是作用很大。

          clone(boolean) 

          clone的boolean默认是false。克隆节点的时候,该元素的所绑定的事件对象将不克隆,只克隆节点本身。

          clone的boolean可以设置为true,克隆的时候,该元素所绑定的事件对象,将会被带到克隆的副本上去,同等具有原节点的功能。

          替换节点:

          替换节点用的也比较多。对于后台的数据处理特别有用,利用的好,可以实现一个页面增删改查无跳转,当然仅仅一个clone是不够的,需要后面的知识辅助,例如Ajax。

          replaceWith  与  replaceAll

          这两者作用是一样的,还是为了方便jQuery的链式操作。

          $('A').replaceWith('B')   把A替换成B;

          $('A').replaceAll('B')      把B替换成A;

     

      包裹节点:

          包裹节点,简称为【穿内衣】 、 【穿外套】  、【穿大衣】

          穿内衣:wrapInner

          执行代码之前的html结构:

         

     1 <body>
     2     <ul class="bigul">
     3         <li class="smchild">我是一个小美女</li>    
     4         <li class="smchild">我是一个小美女</li>    
     5         <li class="smchild">我是一个小美女</li>    
     6     </ul>
     7     <script>
     8         $(".smchild").wrapInner("<b>对呀!</b>");
     9     </script>
    10 </body>

        

           执行wrapInner()代码之后html结构:

     1 <body>
     2     <ul class="bigul">
     3         <li class="smchild"><b>对呀!我是一个小美女</b></li>    
     4         <li class="smchild"><b>对呀!我是一个小美女</b></li>    
     5         <li class="smchild"><b>对呀!我是一个小美女</b></li>    
     6     </ul>
     7     <script>
     8         $(".smchild").wrapInner("<b>对呀!</b>");
     9     </script>
    10 </body>

      穿外套:

         执行wrap代码后的html结构:

     1 <body>
     2     <ul class="bigul">
     3         <b>对呀!<li class="smchild">我是一个小美女</li></b>    
     4         <b>对呀!<li class="smchild">我是一个小美女</li></b>    
     5         <b>对呀!<li class="smchild">我是一个小美女</li></b>    
     6     </ul>
     7     <script>
     8         $(".smchild").wrap("<b>对呀!</b>");
     9     </script>
    10 
    11 </body>

      

      穿大衣:

      执行wrapAll后的html结构:

     1 <body>
     2     <ul class="bigul">
     3           <b>对呀!
     4                    <li class="smchild">我是一个小美女</li>
     5                    <li class="smchild">我是一个小美女</li>
     6                    <li class="smchild">我是一个小美女</li>
     7          </b>            
     8     </ul>
     9     <script>
    10         $(".smchild").wrapAll("<b>对呀!</b>");
    11     </script>
    12 </body>

    今天总结先进行到这里,有内容有错误或者有疑问,评论里提问。

      

         

          

         

     

     

    本人博客所有文章,均为原创。部分文章中或引用相关资料,但均已著明来源出处。可随意转载、分享,但需加本文链接,以及版权说明。
  • 相关阅读:
    delete
    js混淆代码还原-js反混淆:利用js进行赋值实现
    Microservice Trade-Offs
    tagged by: microservices 【martinfowler.com】
    Tackle Business Complexity in a Microservice with DDD and CQRS Patterns
    Why Can't I Access A Protected Member From A Derived Class
    tagged by: domain driven design 【martinfowler.com】
    Domain Driven Design
    Why Would I Ever Need to Use C# Nested Classes
    RabbitMQ compare with redis and MSMQ
  • 原文地址:https://www.cnblogs.com/roverliang/p/4666678.html
Copyright © 2011-2022 走看看