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>

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

  

     

      

     

 

 

本人博客所有文章,均为原创。部分文章中或引用相关资料,但均已著明来源出处。可随意转载、分享,但需加本文链接,以及版权说明。
原文地址:https://www.cnblogs.com/roverliang/p/4666678.html