JQuery_DOM 节点操作之复制、替换和 删除节点
一、复制节点
<script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script> $(function(){ $("div").click(function(){ alert("fasdf") }) $('body').append($('div').clone(true)); //复制一个节点添加到HTML 中 }); </script> </head> <body> <div>几点</div> </body>
clone(true)参数可以为空,表示只复制元素和内容,不复制事件行为。而加上true参数的话,这个元素附带的事件处理行为也复制出来。
二、删除节点
<script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script> $(function(){ $('div').remove(); //直接删除div 元素 }); </script> </head> <body> <div>几点</div> </body>
.remove()不带参数时,删除前面对象选择器指定的元素。而.remove()本事也可以带选择符参数的,比如:$('div').remove('#box');只删除id=box 的div。
.remove()和.detach()都是删除节点,而删除后本身方法可以返回当前被删除的节点对象,但区别在于前者在恢复时不保留事件行为,后者则保留。
<script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script> $(function(){ $("div").click(function(){ alert("fasdf") }); //$('div').remove().appendTo('body'); //直接删除div 元素后再添加回去不保留事件 $('div').detach().appendTo('body');//直接删除div 元素后再添加回去保留事件 }); </script> </head> <body> <div>几点</div> </body>
三、清空节点
<script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script> $(function(){ $('div').empty(); //删除掉节点里的内容 }); </script> </head> <body> <div>几点</div> </body>
四、替换节点
<script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script> $(function(){ $('div').replaceWith('<span>节点</span>'); //将div 替换成span 元素 //$('<span>节点</span>').replaceAll('div'); //同上 }); </script> </head> <body> <div>几点</div> </body>
节点被替换后,所包含的事件行为就全部消失了。
JQuery_DOM 节点操作之复制、替换和 删除节点的更多相关文章
- jquery插入,复制、替换和删除节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- python3.4学习笔记(十五) 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
python3.4学习笔记(十五) 字符串操作(string替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分割等) python print 不换行(在后面加上,end=''),prin ...
- 转 Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
转自: http://www.cnblogs.com/huangcong/archive/2011/08/29/2158268.html 黄聪:Python 字符串操作(string替换.删除.截取. ...
- neo4j 将一个节点的属性复制到另一个节点上
在使用Python操作Neo4j数据库的时候,经常会遇到重复的节点,需要将一个节点的属性复制到另一个节点,之后将该节点删除. def copy_node_properties(source_node_ ...
- (转载)html dom节点操作(获取/修改/添加或删除)
DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...
- JavaScript之节点的创建、替换、删除、插入
1.节点的创建 节点的创建使用document.creatElment();文本节点的创建使用document.creatTextNode();如想把<li>哈密瓜</li>添 ...
- jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点
样式表属性操作.css $("div").css({'width':100,'height':100,'background':'red'}); $("div" ...
- redis 集群新增节点,slots槽分配,删除节点, [ERR] Calling MIGRATE ERR Syntax error, try CLIENT (LIST | KILL | GET...
redis reshard 重新分槽(slots) https://github.com/antirez/redis/issues/5029 redis 官方已确认该bug redis 集群重新(re ...
- Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
去空格及特殊符号 s.strip().lstrip().rstrip(',') 复制字符串 #strcpy(sStr1,sStr2) sStr1 = 'strcpy' sStr2 = sStr1 sS ...
随机推荐
- c#:如何处理对对象进行深度拷贝
/// <summary> /// 对对象进行深度拷贝 /// </summary> /// <param name="obj"></pa ...
- Kernel Time和User Time分别指什么
比如你的一个程序读取并分析一个文件,读取时会调用系统接口,系统会调用驱动来从物理设备上读取数据这个就是kernel time,除此以外在你自己进程上下文中执行代码占用的时间就是user time了. ...
- php 读取json数据文本所遇到的问题
json数据属于特殊的字符串,一般自己写的json数据不要误加空格,回车,换行, 若是从其他文件读取过来的json数据很有可能带有空格,回车,换行等符号,导致使用json_decode()转诚数组失败 ...
- Qt : QProcess
QProcess 类用来启动另外的一个出现并与他们联系. 开始一个进程,通过传递你想要运行程序的名称和命令行参数作为参数给start()函数,来开始一个进程.参数作为独立的字符串来提供. QProce ...
- java中常见的几种异常
算术异常类:ArithmeticExecption空指针异常类:NullPointerException类型强制转换异常:ClassCastException数组负下标异常:NegativeArray ...
- C# DllImport“调用导致堆栈不对称。原因可能是托管的 PInvoke 签名与非托管的目标签名不匹配。请检查 PInvoke 签名的调用约定和参数与非托管的目标签名是否匹配 ”
调用外部dll时,出现如下问题 C# DllImport“调用导致堆栈不对称.原因可能是托管的 PInvoke 签名与非托管的目标签名不匹配.请检查 PInvoke 签名的调用约定和参数与非托管的目标 ...
- Lucene中几种常用的Query
看完图之后在来详细说明一下. 1.phrasequery是用来查询短语的.注意他只针对英文,对中文并没有什么用处. 核心用法: @Test public void test02(){ //新建查询 P ...
- Mac > MacBook Pro的移动硬盘方案
灵感来自:http://cone.cc/2012/12/30/Macbook-Air-HD/ 主要为了解决:如果让移动硬盘,无缝地,安全地,同时应用在苹果电脑系统和微软的系统. 除了储存文件,我还想用 ...
- 开发工具&环境
远程拷贝:scp cdh4.tar.gz root@10.239.44.111 ~ gerrit for code review: git add . git commit -a git push o ...
- selenium截图对比校验方法
/**对比图片进行校验是否成功**/package com.allin.pc;import java.awt.image.BufferedImage;import java.awt.image.Dat ...