jQuery知识点总结(第五天)
节点的操作和数据库操作一样,无非是增、删、改、查。
今天总结删除节点、复制节点、替换节点、与包裹节点
删除节点:
如果文档中一个元素多余,那么就需要删除掉。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知识点总结(第五天)的更多相关文章
- [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table、View
本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracl ...
- JQuery知识点总结
一. 1.JavaScript是Netscape公司开发的一种脚本语言(scripting language).JavaScript的出现实现了使得网页和用户之间实时的,动态的和交互的关系,使网页包含 ...
- JQUERY 知识点的自我总结
一.名词释义 1 .js的入口函数:要等待文档树的加载完成,并且等待所有图片.文件都加载完成之后才开始执行. 2 .jquery入口函数会等待文档树的加载完成,并不会等待图片还有文件的加载 3 .j ...
- jQuery知识点总结(第六天)
今天工作繁忙,晚上又和所谓的'朋友',吃了自助烧烤. 但我内心是很抗拒的,不知为了什么,竟然稀奇古怪的答应了下来,竟要去吃饭.我向来不喜欢去凑热闹,特别是和志趣不投的人在一起吃,对方所说的话,自己根本 ...
- jQuery知识点总结(第二天)
今天继续从我的笔记上面搬运.我们不产生知识,只是知识的搬运工. 内容过滤选择器: ○ 内容选择过滤器 $("div ...
- jQuery知识点总结(第一天)
整理笔记前的题外话: 我认为互联网的高速发展其中最为主要的一点就是——开源. 开源精神,使得无数的IT爱好者贡献所学,将自己的智慧结晶无偿奉献给大家.后辈的学习者在混沌的互联网世界里,追寻着前辈们留下 ...
- jquery知识点复习
一. 基本概念 jQuery简介 jQuery是一个基于javascript的框架.它提供了丰富的选择器和大量的函数,可以方便的实现网页中各种动态的效果.迄今为止,已经有大量的jquery插件和基于j ...
- (jQuery知识点整理-含有选择器)
第一单元 jQuery介绍: javaScript ...
- jQuery 知识点总结
jQuery 是一个“写的更少,但做的更多”的轻量级JavaScript 库.对于网页开发者来说,学会jQuery是必要的.因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很 ...
随机推荐
- C# 7.0 新特性3: 模式匹配
本文参考Roslyn项目Issue:#206,及Docs:#patterns. 1. C# 7.0 新特性1: 基于Tuple的“多”返回值方法 2. C# 7.0 新特性2: 本地方法 3. C# ...
- 一起写一个JSON解析器
[本篇博文会介绍JSON解析的原理与实现,并一步一步写出来一个简单但实用的JSON解析器,项目地址:SimpleJSON.希望通过这篇博文,能让我们以后与JSON打交道时更加得心应手.由于个人水平有限 ...
- java swing模仿随机频谱
import java.awt.BorderLayout; import java.awt.Color; import java.awt.Dimension; import java.awt.Grap ...
- redis入门配置
简介: Redis是Nosql中比较出名的,分布式数据库缓存,提升相应的速度,降低对数据库的访问! Redis是一种高级key-value数据库.它跟memcached类似,不过数据可以持久化,(永久 ...
- 20 seq 某个数到另外一个数之间的所有整数
seq命令Shell内建命令 seq命令用于产生从某个数到另外一个数之间的所有整数. 语法 : seq [选项]... 尾数 seq [选项]... 首数 尾数 seq [选项]... 首数 增量 尾 ...
- Collection中Set集合在应用中常见的方法和注意点
Set集合 : 元素无序的,元素不允许重复. ---->HashSet : 存值方式使用哈希表来存值的. 原理 : 如果HashSet中存放对象 ...
- Windows配置mycat
MyCat使用Mysql的通讯协议模拟成一个MySQl服务器,并建立了完整的Schema(数据库).Table(数据表).User(用户)的逻辑模型,并将这套逻辑模型映射到后端的存储节点DataNod ...
- Ubuntu14.04下安装Hadoop2.4.0 (单机模式)
一.在Ubuntu下创建hadoop组和hadoop用户 增加hadoop用户组,同时在该组里增加hadoop用户,后续在涉及到hadoop操作时,我们使用该用户. 1.创建hadoop用户组 2.创 ...
- 【UOJ #17】【NOIP 2014】飞扬的小鸟
http://uoj.ac/problem/17 dp,注意细节. #include<cstdio> #include<cstring> #include<algorit ...
- 【BZOJ 1568】【JSOI 2008】Blue Mary开公司
经典的splay维护凸壳,但是看了看zky学长的题解最后决定写线段树维护标记永久化. Round1考到了这个之后一直没有理解标记永久化,CTSC也因为自己的缺陷丢掉了一些部分分,so sad 看来以后 ...