首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么jquery克隆克隆父节点而不是它的子节点?

首先,我们需要明确 jQuery 的克隆方法 clone() 是如何工作的。clone() 方法返回一个深拷贝(完全相同的副本)的 HTML 元素。

在讨论为什么 clone() 克隆父节点而不是子节点时,我们需要考虑以下因素:

  1. 选择器clone() 方法使用的是元素的选择器。如果选择器匹配到的是子节点,那么克隆的结果将包含所有匹配到的子节点。如果选择器匹配到的是父节点,那么克隆的结果将包含所有匹配到的子节点。
  2. 层级关系:如果希望在克隆过程中包含所有子节点,需要使用 clone(true) 方法。这将创建一个包含所有子节点的完全相同的副本。
  3. 数据绑定:当使用 clone() 方法时,如果元素绑定了数据(例如,<input><select><textarea> 元素),原始数据不会复制,仅会复制元素本身。这意味着,如果希望复制包含数据绑定的子节点,需要手动进行数据复制。

综上所述,使用 clone() 方法克隆父节点不会克隆子节点,因为选择器将匹配到子节点。为了包含所有子节点,需要使用 clone(true) 方法。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端基础-jQuery节点操作

第10章 jQuery节点操作 10.1 创建节点 // $(htmlStr) // htmlStr:html格式字符串 $('<span-这是一个span元素</span-'); 10.2 添加节点...append appendTo 在被选元素结尾插入内容 .append() .appendTo() prepend prependTo 在被选元素开头插入内容 .prepend...() .prependTo() before insertBefore 在被选元素之后插入内容 后.before(前) 前.insertBefor(后) after insertAfter...remove:相比于empty,自身也删除(自杀) $('div').remove(); 10.4 克隆节点 作用:复制匹配元素 // 复制$(selector)所匹配到元素(深度复制) // cloneNode...即修改新元素,不会影响到原来元素。 $(selector).clone();//克隆元素本身及后代 $(selector).clone(true);//克隆元素本身及后代以及绑定事件

76700

jQuery源码解析之clone()

,包含节点、文本和属性 注意:('div').clone(true) 表示克隆目标节点事件和数据('div').clone(true,true) 表示克隆目标节点及其节点事件和数据 源码: jQuery.fn.extend...({ //克隆目标节点及其节点 //dataAndEvents是否克隆目标节点事件和数据,默认是false //deepDataAndEvents是否克隆目标节点节点事件和数据...//源码6117行 //生成被选元素副本,包含节点、文本和属性 clone: function( elem, dataAndEvents, deepDataAndEvents...bug,主要是在fixInput()方法上进行处理 (2)从目标节点克隆数据、添加事件给克隆元素 (3)将克隆元素中script标签设为已运行 四、fixInput() 作用: (1)解决 IE...五、cloneCopyEvent() 作用: $().clone()关键方法,用来从目标节点克隆数据、添加事件给克隆元素 注意: jQuery 采用数据分离方法来保存 DOM 上事件和数据,利用

2.6K20

dom-to-image库是如何将html转换成图片

所以前面的getParentOfChildren方法会判断当前节点不是一个Shadow host节点,是的话就返回内部Shadow root节点,否则返回自身。...回到cloneChildren方法,接收两个参数:克隆节点、原节点。...接下来就是遍历节点,然后对每个子节点再次调用cloneNode方法,只不过会把原节点样式也传进去。对于元素又会递归处理它们节点,这样就能深度克隆完整棵DOM树。...比如原节点是一个span标签,节点也是一个span,再上一个节点是一个div,那么获取到标签列表就是[span, span, div]。 ​...到这里,节点克隆部分就结束了,不得不说,还是有点复杂,很多操作其实我们也没有看懂为什么要这么做,开发一个库就是这样,要处理很多边界和异常情况,这个只有遇到了才知道为什么

92810

webapi(三) -节点

所有的文本 节点操作 查找结点 节点 语法: 元素.parentNode (这是属性) // 查找son元素 let son = document.querySelector...语法: 元素.insertBefore(要添加元素, 在谁前面) 作用:将节点添加到指定节点前面 // 语法:元素.insertBefore(要添加元素, 在谁前面) //...: 元素.cloneNode(布尔值) true 会克隆节点自身,后代节点克隆 也叫做深克隆 false 默认值 只会克隆节点自身,后代节点不会克隆 也叫做浅克隆 (默认) let...,后代节点克隆 // false 默认值 只会克隆节点自身,后代节点不会克隆 let newLi = ul.cloneNode(true) // 克隆整个ul...// 第一种方法 ul.removeChild(this) // 第二种方法,不需要ul,使用li获得到节点

68120

10Node对象

属性节点 属性节点属性名 2 属性节点属性值 Text文本节点 #text 3 文本节点内容 获取节点 获取节点包括两个分别为 获取节点:parenNode 获取指定节点节点,其父节点不一定是元素节点...获取节点元素:parentElement 获取指定节点元素节点,其父节点必须是元素节点。...通常情况下parentNode ≈ parentElement,但是特殊情况是元素节点是document对象 获取节点 firstChild 获取指定节点第一个节点 lastChild...也就是说,没有节点 如果de参数设为 false,则不克隆任何节点。该节点所包含所有刘本也不会被克隆,因为文本本身也是一个或多个Text节点。...返回值dupNode 表示克隆节点。 参数deep表示是否进行深度克隆 true:深度克隆,所有后代节点也都会被克隆 false:默认值。

69130

04-老马jQuery教程-DOM节点操作及位置和大小

DOM节点操作 2.1 添加节点append(content|fn)方法 参数: content:类型String, Element, jQuery,添加节点。...,只不过一个是在最后追加节点,一个是在最前面追加节点(prev vs after) 2.2 追加到appendTo(content)方法 参数:content: 用于被追加内容选择器,String...(htm|element|fnl)方法 概述 将每一个匹配元素内容(包括文本节点)用一个HTML结构包裹起来 这个函数原理是检查提供第一个元素(它是由所提供HTML标记代码动态生成),并在代码结构中找到最上层祖先元素...// 删除所有的p标签 $("p").remove(); 2.12 复制节点 clone([Even[,deepEven]])方法可以对节点进行克隆。...deepEven:一个布尔值,指示是否对事件处理程序和克隆元素所有元素数据应该被复制。 $("b").clone().prependTo("p"); 3.

2.2K90

JavaScript笔记(14)

但是只能得到它最近节点(亲爸爸) 如果指定节点没有元素则返回null 2.节点 parentNode.childNodes (注意's',节点可以有很多个) 假如我们现在只想要ul...所以我们可以用另一种方法: parentNode.children(非标准) parentNode.children是一个只读属性,返回所有的元素节点.只返回元素节点,其余节点不返回(这个是我们重点掌握...就是节点,child是节点....注意: 如果括号里面的参数为空或者为false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的节点....如果括号里为true,则是深拷贝,即克隆节点克隆里面的节点 改成这样才行哦 呼,学了好久,从10点多到下午4点...累,虽然效率很低,但是学到了很多东西也做了很多案例,一会儿要复习英语还要去做运动

35520

看Zepto如何实现增删改查DOM

确定parent节点以及target目标节点 通过上面的分析我们知道通过insertBefore(在当前节点某个子节点之前再插入一个节点)来完成节点插入,很重要几个因素就是 节点) 需要插入节点...1)克隆节点时候,先将新节点克隆一份,如果没有找到对应parent节点,就讲要插入节点删除,最后通过insertBefore方法插入新节点。...,底层还是用浏览器cloneNode,并传参为true表示需要进行深度克隆(其实感觉这里是不是将true设置为可选参数比较好呢,让使用者决定是深度克隆与否不是更合理?)...unwrap 移除集合中每个元素直接节点,并把他们元素保留在原来位置 unwrap: function () { // 通过parent()获取当前元素集合所有直接节点 // 将获取到节点集合进行遍历...this.parent().each(function () { // 将该节点替换为该节点所有节点 $(this).replaceWith($(this).children

2.5K90

Node对象

Node.prototype.firstChild: 只读,返回该节点第一个节点Node,如果该节点没有节点则返回null。...Node.prototype.parentNode: 只读,返回一个当前节点Node节点。如果没有这样节点,比如说像这个节点是树结构顶端或者没有插入一棵树中, 这个属性返回null。...Node.prototype.parentElement: 只读,返回一个当前节点节点Element。如果当前节点没有节点或者说节点不是一个元素Element, 这个属性返回null。...Node.prototype.cloneNode(): 克隆一个Node,并且可以选择是否克隆这个节点所有内容,默认情况下,节点内容会被克隆。...Node.prototype.getRootNode(): 返回上下文对象节点,如果shadow root节点存在的话,也可以在返回节点中包含

52950

【收藏】JavaScript DOM操作简易速查手册

虽然JQuery更便利,但我还是喜欢用原生API。 2 文档元素选取 2.1 ID选择器 通过ID选取元素是最简单和常用选取元素方法,ID选择器性能优于其它选择器。...其一,name属性值 不是必须唯一,多个元素可能有同样名称;其二,name属性只在少数HTML元素中有效,包括表单、表单元素、iframe 及 img 元素。...var comment = document.createComment("Created by 毛瑞"); 查看示例程序 6.5 节点克隆-cloneNode 通过复制已存在节点来创建新文档节点。...parent.appendChild(h2); 查看示例程序 7.2 节点前插入-insertBefore 在节点上调用本方法 第一参数表示待插入节点 第二参数是节点中已经存在节点,新节点插入到该节点前面...查看示例程序 8 删除和替换 8.1 删除节点-removeChild 在节点上调用 参数是待删除节点 parent.removeChild(h2); 查看示例程序 8.2 替换节点-replaceChild

1.1K20

04-老马jQuery教程-DOM节点操作及位置和大小

DOM节点操作 2.1 添加节点append(content|fn)方法 参数: content:类型String, Element, jQuery,添加节点。...,只不过一个是在最后追加节点,一个是在最前面追加节点(prev vs after) 2.2 追加到appendTo(content)方法 参数:content: 用于被追加内容选择器,String...(htm|element|fnl)方法 概述 将每一个匹配元素内容(包括文本节点)用一个HTML结构包裹起来 这个函数原理是检查提供第一个元素(它是由所提供HTML标记代码动态生成),并在代码结构中找到最上层祖先元素...// 删除所有的p标签 $("p").remove(); 2.12 复制节点 clone([Even[,deepEven]])方法可以对节点进行克隆。...deepEven:一个布尔值,指示是否对事件处理程序和克隆元素所有元素数据应该被复制。 $("b").clone().prependTo("p"); 上传视频标签文本框特效案例: <!

6.1K00

Vue进阶 Diff算法详解

: 普通元素节点 ComponentVNode: 组件节点 CloneVNode: 克隆节点,可以是以上任意类型节点,唯一区别在于isCloned属性为true Patch函数 patch函数接收以下参数...(通过sameVnode函数对比 后续详解),通过patchVnode进行后续比对工作 如果vnode和oldVnode不是同一个节点,那么根据vnode创建新元素并挂载至oldVnode元素下。...DOM失败,则创建一个空Vnode节点去替换 oldVnode = emptyNodeAt(oldVnode) } // 获取oldVnode节点...,return 如果vnode不是文本节或注释节点 如果vnode和oldVnode都有节点并且两者节点不一致时,就调用updateChildren更新节点 如果只有vnode有自节点,则调用addVnodes...找到,获取这个节点,判断和newStartVnode是不是同一个节点 为什么会有头对尾、尾对头操作? 可以快速检测出reverse操作,加快diff效率。

52430

Vue内部是如何渲染视图

虚拟DOM与VNode简介什么是虚拟DOM以前M命令式操作DOM即使用jQuery操作DOM节点,随着状态增多,DOM操作就会越来越频繁,程序状态也越难维护,现在主流框架都是采用声明式操作DOM...vnode所有属性赋值到clone节点,并且设置isCloned = true,作用是优化静态节点和插槽节点。...以静态节点为例,因为静态节点内容是不会改变,当首次生成虚拟DOM节点后,再次更新时是不需要再次生成vnode,而是将原vnode克隆一份进行渲染,这样在一定程度上提升了性能。...初次渲染过程当oldvnode中不存在,vnode中存在时,就需要使用vnode新生成真实DOM节点并插入到视图中。...,直接创建评论节点,并将其插入到节点上,其他创建文本节点,并将其插入到节点parentElm(刚创建div)上去。

92750

JavaScript DOM(二)

指定节点没有节点则返回 null(测试只有 document.parentNode 会返回 null,body 里节点节点可以是 body) 节点 parentNode.childNodes...,也是所有的节点第一个节点 4. parentNode.lastChild 返回最后一个节点,也是所有的节点最后一个节点 5. parentNode.firstElementChild 返回第一个元素节点...("div"); 添加节点 创建节点后,创建节点并不会出现,需要把节点添加上去才可以。...添加节点主要是先找到要添加位置节点,然后才添加进去。有两种方法 node.appendChild(child) 将节点 child 添加到指定节点 node 节点末尾。...参数为空或者 false,则是浅拷贝,只克隆节点自身,不克隆里面的节点,包括文本节点 参数为 true,则是深拷贝,克隆节点本身以及里面所有节点

61730

jQueryDOM操作

a 删除节点: remove:$(‘#test′).remove();该方法不会把匹配元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配元素。...但除了这个元素本身得以保留之外,remove() 不会保留元素 jQuery 数据。...注意克隆节点id属性,避免id重复 clone(true):复制内容,也复制行为 替换节点:xxx.replace(a)用xxx把a替换掉 前后宾语调换:a.replaceWith(xxx)将a替换成...xxx 节点互换需要先克隆节点 包裹节点:warp() 将指定节点用其他标记包裹起来,该方法对于需要在文档中插入额外结构化标记非常有用。...:查找节点,返回值为节点对应jq对象 var text=$trNode.find(“te:first”).text();//获取tr第一个td文本节点文本值

1.2K20
领券