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

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

删除节点：

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

　　         remove：

 <body>

     <ul class="bigul">

         <li class="smchild">我这么可爱你不要我了。</li>

         <li class="smchild">我的爸爸ul最宠爱我</li>

     </ul>

     <script>

         $(".bigul :first-child").remove();

     </script>

 </body>

detach:

 <body>

     <ul class="bigul">

         <li class="smchild">我这么可爱你不要我了。</li>

         <li class="smchild">我的爸爸ul最宠爱我</li>

     </ul>

     <script>

         $(".bigul :first-child").detach();

     </script>

 </body>

              empty:

 <body>

     <ul class="bigul">

         <li class="smchild">我这么可爱你不要我了。</li>

         <li class="smchild">我的爸爸ul最宠爱我</li>

     </ul>

     <script>

         $(".bigul :first-child").empty();

     </script>

 </body>

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

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

　

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

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

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

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

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

$(".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结构：

 <body>

     <ul class="bigul">

         <li class="smchild">我是一个小美女</li>

         <li class="smchild">我是一个小美女</li>

         <li class="smchild">我是一个小美女</li>

     </ul>

     <script>

         $(".smchild").wrapInner("<b>对呀！</b>");

     </script>

 </body>

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

 <body>

     <ul class="bigul">

         <li class="smchild"><b>对呀！我是一个小美女</b></li>

         <li class="smchild"><b>对呀！我是一个小美女</b></li>

         <li class="smchild"><b>对呀！我是一个小美女</b></li>

     </ul>

     <script>

         $(".smchild").wrapInner("<b>对呀！</b>");

     </script>

 </body>

　　穿外套：

     执行wrap代码后的html结构：

 <body>

     <ul class="bigul">

         <b>对呀！<li class="smchild">我是一个小美女</li></b>

         <b>对呀！<li class="smchild">我是一个小美女</li></b>

         <b>对呀！<li class="smchild">我是一个小美女</li></b>

     </ul>

     <script>

         $(".smchild").wrap("<b>对呀！</b>");

     </script>

 </body>

　　

　　穿大衣：

　　执行wrapAll后的html结构：

 <body>

     <ul class="bigul">

           <b>对呀！

                    <li class="smchild">我是一个小美女</li>

                    <li class="smchild">我是一个小美女</li>

                    <li class="smchild">我是一个小美女</li>

          </b>

     </ul>

     <script>

         $(".smchild").wrapAll("<b>对呀！</b>");

     </script>

 </body>

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

　　

 

　

jQuery知识点总结（第五天）的更多相关文章

  1. [独孤九剑]Oracle知识点梳理（五）数据库常用对象之Table、View

    本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracl ...

  2. JQuery知识点总结

    一. 1.JavaScript是Netscape公司开发的一种脚本语言(scripting language).JavaScript的出现实现了使得网页和用户之间实时的,动态的和交互的关系,使网页包含 ...

  3. JQUERY 知识点的自我总结

    一.名词释义 1 .js的入口函数:要等待文档树的加载完成,并且等待所有图片.文件都加载完成之后才开始执行. 2  .jquery入口函数会等待文档树的加载完成,并不会等待图片还有文件的加载 3 .j ...

  4. jQuery知识点总结（第六天）

    今天工作繁忙,晚上又和所谓的'朋友',吃了自助烧烤. 但我内心是很抗拒的,不知为了什么,竟然稀奇古怪的答应了下来,竟要去吃饭.我向来不喜欢去凑热闹,特别是和志趣不投的人在一起吃,对方所说的话,自己根本 ...

  5. jQuery知识点总结（第二天）

    今天继续从我的笔记上面搬运.我们不产生知识,只是知识的搬运工. 内容过滤选择器: ○ 内容选择过滤器                                       $("div ...

  6. jQuery知识点总结（第一天）

    整理笔记前的题外话: 我认为互联网的高速发展其中最为主要的一点就是——开源. 开源精神,使得无数的IT爱好者贡献所学,将自己的智慧结晶无偿奉献给大家.后辈的学习者在混沌的互联网世界里,追寻着前辈们留下 ...

  7. jquery知识点复习

    一. 基本概念 jQuery简介 jQuery是一个基于javascript的框架.它提供了丰富的选择器和大量的函数,可以方便的实现网页中各种动态的效果.迄今为止,已经有大量的jquery插件和基于j ...

  8. （jQuery知识点整理-含有选择器）

                                       第一单元                                       jQuery介绍:   javaScript ...

  9. jQuery 知识点总结

    jQuery 是一个“写的更少,但做的更多”的轻量级JavaScript 库.对于网页开发者来说,学会jQuery是必要的.因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很 ...

随机推荐

  1. AR播放器

    一.项目需求 AR播放器:将一系列带透明通道的图片以一定的帧率连续显示,叠加载摄像头采集的画面之上,并播放声音. 此为最初级的AR技术,因为画面是事先渲染好的,固定不变的,所以实际上并不能实现“互动” ...

  2. [云上天气预报-有时有闪电]2月3日23:00-4:00阿里云SLB升级期间网络会闪断

    大家好,2月3日23:00-2月4日4:00,阿里云将对SLB(负载均衡)进行升级,在升级期间,SLB会有约4-8次的网络闪断.由此给您带来麻烦,望谅解! 阿里云官方公告内容如下: 尊敬的用户: 您好 ...

  3. 【bzoj1601】[Usaco2008 Oct]灌水（MST）

    题目:http://hzwer.com/1158.html 分析: 解法很巧妙,弄一个超级源,对某个点装水井相当于把这个点连向超级源,边权为这个点的点权,然后跑最小生成树就行了

  4. 支持向量机通俗导论（理解SVM的三层境界）

    原文链接:http://blog.csdn.net/v_july_v/article/details/7624837 作者:July.pluskid :致谢:白石.JerryLead 出处:结构之法算 ...

  5. NLPIR分词工具的使用（java环境下）

    一.NLPIR是什么? NLPIR(汉语分词系统)由中科大张华平博士团队开发,主要功能包括:中文分词,词性标注,命名实体识别,用户词典功能,详情见官网:http://ictclas.nlpir.org ...

  6. WEB 文件上传

    关键:<input name="file" type="file"/> 然后,在外面<form>层中必须写上:enctype=" ...

  7. python内置数据类型-字典和列表的排序 python BIT sort——dict and list

    python中字典按键或键值排序(我转!)   一.字典排序 在程序中使用字典进行数据信息统计时,由于字典是无序的所以打印字典时内容也是无序的.因此,为了使统计得到的结果更方便查看需要进行排序. Py ...

  8. Rest API 开发 学习笔记(转)

    Rest API 开发 学习笔记 概述 REST 从资源的角度来观察整个网络,分布在各处的资源由URI确定,而客户端的应用通过URI来获取资源的表示方式.获得这些表徵致使这些应用程序转变了其状态.随着 ...

  9. PHP值传递和引用传递的区别

    PHP值传递和引用传递的区别.什么时候传值什么时候传引用 (1)按值传递:函数范围内对值的任何改变在函数外部都会被忽略 (2)按引用传递:函数范围内对值的任何改变在函数外部也能反映出这些修改 (3)优 ...

  10. elasticsearch和hadoop集成，gateway.type hdfs设置

    配置elasticsearch的存储路径为hdfs需要两步,安装插件 elasticsearch-hadoop,在联网的情况下在命令窗口运行:plugin -install elasticsearch ...