深度理解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语言的深度理解和运用,毕竟是很少会有人涉及的话 ...
随机推荐
- mysql存储过程(查询数据库内表 游标循环 if判断 插入别的表内)
BEGIN declare f_age int;DECLARE incode1 VARCHAR(100);DECLARE incode2 VARCHAR(100);DECLARE incode3 VA ...
- JavaScript对象入门指南
前言 不少开发对JavaScript实现面向对象编程存在一知半解,并且不少的在项目实践中写的都是面向过程编程的代码,因此,希望能从零入手介绍面向对象的一些概念到实现简单的面向对象的例子让大家包括我自己 ...
- DBI-1.634之selectrow_array与fetchrow_array的区别
在DBI-1.634使用手册里有一个selectrow_array函数,该函数具体说明如下: This utility method combines "prepare", &qu ...
- Java基础知识回顾之二 ----- 修饰符和String
前言 在上一篇中,回顾了Java的基本数据类型 ,这篇就来回顾下Java中的一些修饰符以及String. 修饰符介绍 Java修饰符主要分为两类: 访问修饰符 非访问修饰符 其中访问修饰符主要包括 p ...
- iOS开发-LayoutGuide（从top/bottom LayoutGuide到Safe Area）
iOS7 topLayoutGuide/bottomLayoutGuide 创建一个叫做LayoutGuideStudy的工程,我们打开看一下Main.storyboard: storyboard-t ...
- 【Python】 汉字转化汉语拼音pinyin
pinyin pinyin模块是github上一个小项目,在github.com/cleverdeng/pinyin.py上面可以下到源码.衷心感谢那些为这个模块做出贡献的人来方便我们[鞠躬] 安装: ...
- Java 并发编程实践基础 读书笔记： 第一章 JAVA并发编程实践基础
1.创建线程的方式: /** * StudySjms * <p> * Created by haozb on 2018/2/28. */ public class ThreadDemo e ...
- Flash Builder4.7安装破解
引用自CSDN博客,日后我会上传FlashBuilder到百度网盘谢谢 http://bbs.csdn.net/topics/391036327
- Dependency Walker的替代品Dependencies
在c++时代, Dependency Walker基本上是大部分程序员必备的工具之一,很可惜的是从2006起就不更新了.而且只支持vc的名字undemangle, https://github.com ...
- 借鉴别人的Oracle 11g安装和卸载图文教程
Oracle 11g安装 1.解压下载的包,然后进入包内,点击setup.exe开始安装 . 2.出现如下:一般把那个小对勾取消,点击下一步进行, 弹出下图这个后点‘是' 3.下图后,选择创建和配置数 ...