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>


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

  

 

 

时间: 2024-08-06 19:50:48

jQuery知识点总结(第五天)的相关文章

jquery知识点梳理

jQuery知识点梳理 一.              jquery选择器 基本选择器 ID选择器 类选择器 标记选择器 分组选择器 通配符选择器 层次选择器 $(“ancestor descendent”):祖先后代选择器    空格 $(“parent > child”):父子选择器   大于 $(“prev + next”):相邻后兄弟元素选择器   加号 $(“prev ~ siblings”):所有后兄弟元素选择器  波浪线 过滤选择器:基本过滤选择器 :first.:last.:od

2014年计算机软考《网络管理》知识点-【第五章】

51CTO学院,在软考备考季特别整理了"2014年计算机软考<网络管理>知识点",帮助各位学院顺利过关!更多软件水平考试辅导及试题,请关注51CTO学院-软考分类吧! 查看汇总:2014年计算机软考<网络管理>知识点汇总  第五章 局域网软件 ☆ 网络操作系统是使网络上各计算机能方便而有效的共享网络资源.为网络用户提供所需的各种服务的 软件和有关规程的集合. 5.1操作系统概述及其发展 (1) 操作系统有以下三个发展阶段: A. 最初的操作系统是单块式的,由一组

jQuery知识点总结

一.元素的增删改查 1.增加 a.append() 和 appendTo()  区别 append():后边的加到前边的里边(后置插入) appendTo():前边的加到后边的里边 b.prepend()  和 prependTo() 区别 后边的加到前边的里边(前置插入) c.after()   和 before() 区别 后边的插入到前边的之后 后边的插入到前边的之前 2.删除 a.remove .empty 和 detach 方法的区别 Remove:移除 Empty:把元素内容清空 De

jQuery知识点总结(第一天)

整理笔记前的题外话: 我认为互联网的高速发展其中最为主要的一点就是——开源. 开源精神,使得无数的IT爱好者贡献所学,将自己的智慧结晶无偿奉献给大家.后辈的学习者在混沌的互联网世界里,追寻着前辈们留下的足迹,亦步亦趋的前往更高的层楼.开源精神,大大减少了后辈们在学习技术的难度,使得技术的升级和迭代日新月异.我希望成为一名思维开阔的人,成为对互联网有贡献的开源人. 我是后端PHP程序员,很少写前端页面.在做项目的过程中,被jQuery的便捷性所吸引.因此购买了<锋利的JQuery>一书,最近一边

几个简单的jquery知识点练习

三.jquery对象和dom对象 <script type="text/javascript"> //页面的基本元素加载后 $(function () { var btnObjDom = document.getElementById('btn'); //dom对象变成jquery对象 alert($(btnObjDom).val());//如果val()该方法括号中什么都不写,表示的是获取值 //如果在括号中写内容了,表示的是设置该属性的值 //jquery对象变成dom

jquery知识点复习

一. 基本概念 jQuery简介 jQuery是一个基于javascript的框架.它提供了丰富的选择器和大量的函数,可以方便的实现网页中各种动态的效果.迄今为止,已经有大量的jquery插件和基于jQuery的UI框架(miniui.easyui.ligerui). jQuery的宗旨是:write less,do more! 文档加载完毕函数 常规形式:$(document).ready(function(){- -}); 简写形式:$(function(){- -}); jquery对象和

jQuery知识点总结(第二天)

今天继续从我的笔记上面搬运.我们不产生知识,只是知识的搬运工. 内容过滤选择器: ○ 内容选择过滤器                                       $("div:contains('text')");   内容为'text'的那个div ○ 不包含子元素也不包含文本元素(一穷二白的选择器)   $("div:empty"); ○ 含有选择器所匹配元素的元素(真他妈绕口)              $("div:has(p)&q

JQUERY 知识点的自我总结

一.名词释义 1 .js的入口函数:要等待文档树的加载完成,并且等待所有图片.文件都加载完成之后才开始执行. 2  .jquery入口函数会等待文档树的加载完成,并不会等待图片还有文件的加载 3 .js的入口函数: window.onload = function () { console.log("我是js的入口函数"); }; 4 .DOM对象:使用js的方法获取到的页面中的元素返回的就是DOM对象 5 .jquery对象:使用jquery的方法获取到页面中的元素,返回的就是jqu

jquery学习笔记(五)ajax

$(selector).load( url [,date] [,callback] ) url:请求页面的url地址 date:发送至服务器的key:value数据 callback:请求完成时的回调函数,无论请求成功或失败,即只要XMLHttpRequest对象的状态为4或complete时就调用 此函数会将ajax返回的内容作为innerHTML插入到selector里面如果需要可以在url后面添加参数来筛选要插入的内容 如果有date参数则按照POST方式发送,否则按照GET方式发送.da