深度理解DOM拷贝clone()
克隆节点是DOM的常见操作，jQuery提供一个clone方法，专门用于处理dom的克隆:
.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了
例如：
HTML部分
<div></div> JavaScript部分
$("div").on('click', function() {//执行操作}) //clone处理一
$("div").clone() //只克隆了结构，事件丢失 //clone处理二
$("div").clone(true) //结构、事件与数据都克隆
使用上就是这样简单，使用克隆的我们需要额外知道的细节：
- clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如右边代码我 $(this).clone().css('color','red') 增加了一个颜色
- 通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上
- clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据
- 元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个
案例分析：
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
.left,
.right {
width: 300px;
height: 120px;
} .left div,
.right div {
width: 100px;
height: 90px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
background: #bbffaa;
}
</style>
</head> <body>
<h2>通过clone克隆元素</h2>
<div class="left">
<div class="aaron1">点击,clone浅拷贝</div>
<div class="aaron2">点击,clone深拷贝,可以继续触发创建</div>
</div>
<script type="text/javascript">
//只克隆节点
//不克隆事件
$(".aaron1").on('click', function() {
$(".left").append( $(this).clone().css('color','red') )
})
</script> <script type="text/javascript">
//克隆节点
//克隆事件
$(".aaron2").on('click', function() {
console.log(1)
$(".left").append( $(this).clone(true).css('color','blue') )
})
</script>
</body> </html>
深度理解DOM拷贝clone()的更多相关文章
- 深度理解DOM事件（实例）
前言 通过如下两个实例来理解DOM事件 实例1--点击别处关闭浮层 onclick与addEventListener的区别 实例2--点击后颜色一层一个层出现的漂亮的彩虹圈 1 实例1--点击别处关 ...
- js对象详解(JavaScript对象深度剖析，深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
- 深度理解IIS下部署ASP.NET Core2.1 Web应用拓扑图
原文:深度理解IIS下部署ASP.NET Core2.1 Web应用拓扑图 IIS部署ASP.NET Core2.1 应用拓扑图 我们看到相比Asp.Net, 出现了3个新的组件:ASP.NET Co ...
- 理解DOM事件流的三个阶段
本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...
- 深度理解Jquery 中 offset() 方法
参考原文:深度理解Jquery 中 offset() 方法
- 【温故而知新-Javascript】理解 DOM
DOM(Document Object Model,文档对象模型)允许我们用 JavaScript 来探查和操作 HTML 文档里的内容.它对于创建丰富性内容而言是必不可少的一组功能. 1. 理解文档 ...
- 【使用 DOM】理解 DOM
DOM(Document Object Model,文档对象模型)允许我们用 JavaScript 来探查和操作 HTML 文档里的内容.它对于创建丰富性内容而言是必不可少的一组功能. 1. 理解文档 ...
- javascript:理解DOM事件
首先,此文不讨论繁琐细节,但是考虑到读者的心灵感受,本着以积极向上的心态,在此还是会列举示例说明. 标题为理解DOM事件,那么在此拿一个简单的点击事件为例,希望大家看到这个例子后能触类旁通. DOM ...
- Java深度理解——Java字节代码的操纵
导读:Java作为业界应用最为广泛的语言之一,深得众多软件厂商和开发者的推崇,更是被包括Oracle在内的众多JCP成员积极地推动发展.但是对于 Java语言的深度理解和运用,毕竟是很少会有人涉及的话 ...
随机推荐
- 【redis源码阅读】redis对象
结构定义 在redis中,对象的数据结构定义如下: typedef struct redisObject { unsigned type:4; unsgined encoding:4; uns ...
- IPFS家族(一)
IPFS这个项目其实很大,并不像大家想象的是一个东西,IPFS是由很多模块组成,每一个模块现在都已经独立成项目了,并且有自己的主页.让我们来简单看一下IPFS家族成员. 协议实验室的主页:https: ...
- S/4 HANA中的ACDOCT和FAGLFLEXT
最近的几个需求让我对ACDOCT和FAGLFLEXT这两个财务相关表(准确地说是视图)产生了一些了解,同时也发现某些开发同行和业务顾问并没有认识到这些东西.因此打算从技术角度来说明一下这两个视图在S4 ...
- wipefs进程
wipefs进程是啥,占用了百分之90多的cpu wipefs进程是啥,占用了百分之90多的cpu,把这个进程干掉了,过了一天又自动启动了,很多朋友应该遇到过类似的问题. wipefs是linux自带 ...
- 实现win的on程序数据更新
枚举是一组描述性的名称定义一组有限的值,不包含方法对可能的值进行约束枚举是一组指定的常数,对可能的值进行约束枚举使用时直观方便.更易于维护 pictureBox控件属性名称 说明image ...
- Python打包工具setuptools的使用
将我们写的Python程序发布成包后,可以使其能够安装使用. 在项目上测试的时候,某些情况下,可以将Python打包,然后上传到测试服务器,安装测试. setuptools是常用的打包工具. 一个简单 ...
- Docker深入浅出系列教程——Docker初体验
我是张飞洪,钻进浩瀚代码,十年有余,人不堪其累,吾不改其乐.我喜欢把玩代码,琢磨词句!代码算法让我穿透规律,文章摘句让我洞察人情.如果你觉得和我的看法不一样,请关注我的头条号,那我们一定合得来. Do ...
- java基础之类与对象
[类 & 对象] 1.类:具有一系列相同属性(特征)和方法(行为)的个体的集合,称为类. 类是一个抽象的概念,只能说类具有哪些属性,而不能直接对属性进行赋值. 例如:人类有身高的属性,但是不能 ...
- 测试工作中经常用到的几个Linux命令（第一弹）
自己平时测试工作中经常要在Linux下搭建测试环境,有涉及到启动/终止服务器,修改tomcat配置文件,偶尔碰到端口被占用... 这时就不得不需要一些基本的Linux命令来处理遇到的这些问题(顺便迈向 ...
- alpha-咸鱼冲刺day2
一,合照 emmmmm.自然是没有的. 二,项目燃尽图 三,项目进展 今天并没有什么进展,弄了好久好像也只研究出怎么把JS的功能块插入进去.html的信息提交这些还不知道要怎么弄. 四,问题困难 日常 ...