为什么jquery克隆克隆父节点而不是它的子节点？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

前端基础-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);//克隆元素本身及后代以及绑定的事件

7790 0

jQuery学习笔记之DOM操作、事件绑定（2）

empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点)。复制节点 clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本....(function(){ alert("点击按钮"); }); //克隆节点，不克隆事件 $("button").clone...().appendTo("p"); //克隆节点，克隆事件 $("button").clone(true).appendTo("p"); 替换节点....如果类名存在则删除它, 如果类名不存在则添加它。...遍历节点取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.

1.5K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

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.7K2 0

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

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

1.4K1 0

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获得到它的父节点

7002 0

JQuery常用命令

子元素过滤选择器 — 重点　在每个父元素中进行分组，查找指定的子元素，下标从 1 开始 (1). :first-child 第一个子元素语法: $('li:first-child'); (2)....// 添加到父节点 (2)....// 在父节点最后追加子节点 $(li).appendTo( 'ul' ) // 子节点追加到父节点最后以上代码可以简写为...$('newChild').replaceAll( oldChild ) 新节点替换所有的旧节点，返回新节点 24. 克隆节点 (1)....JQuery 类数组对象的操作： window.$ window.Jquery $()函数或 JQuery()返回值是一个“类数组象”— 有点像数组，但不是 Array 类型的实例，其中封装着查找到的所有

6.5K1 0

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.2K9 0

10Node对象

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

7133 0

jQuery入门前言

对象，再进行操作，而jQuery获取到的$p是jQuery对象。...image.png 10、子元素筛选选择器：这个不是很常用，用法如下： ? image.png 11、表单元素选择器：顾名思义，表单元素选择器就是方便操作表单的选择器。 ?...，跟有没有选中没关系) alert($("#test input:radio").val());// 弹出“红色” //第二种用法(获取用户选中的值，而不是返回第一个) alert($("input...5、克隆节点clone()：克隆可以理解为复制，用法如下： //clone处理一 $("div").clone() //只克隆了div结构，事件丢失 //clone处理二 $("div").clone...parents方法和parent方法的不同之处在于parent只查找父级一级的元素，而parents则会一直往上查找。

2.8K3 0

jQuery就业课系列之.jQueryDOM

概念：DOM 文档对象模型（必考），jQuery Dom应该是之前的DOM加了个jQuery的封装。...4.2 追加节点语法功能 append(content) $(A).append(B)表示将子元素B追加到A中 prepend(content) $(A). prepend (B)表示将子元素...") //加到了ul的子元素li列表的后面； //$(".gameList").prepend("雨鑫战神...--用一个按钮来做测试，更简单--> 4.5 遍历函数实际它属性节点的查找：复习：first() last() sibings()都是查找；...4个，2个子元素街边；2个兄弟元素级别； 3.节点操作就是删除、清空、复制、替换（删改） 4.属性节点：attr() attr('name','name) 5.节点的遍历，注意使用：$("选择器").each

741 0

看Zepto如何实现增删改查DOM

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

2.5K9 0

Node 接口的方法

Node 接口的方法 Node.appendChild() appendChild方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。...它接受一个布尔值作为参数，表示是否同时克隆子节点。它的返回值是一个克隆出来的新节点。...var cloneUL = document.querySelector('ul').cloneNode(true); Node.insertBefore() insertBefore方法用于将某个节点插入父节点内部的指定位置...返回值是移除的子节点。...，替换当前节点的某一个子节点。

2972 0

JavaScript笔记(14)

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

3692 0

【收藏】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.1K2 0

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.1K0 0

JavaWeb04-jQuery(Java真正的全栈开发)

它是轻量级的js库，它兼容CSS3，还兼容各种浏览器。 jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。...：parent 不为空，（有子节点的元素） 5.可见性过滤：hidden 所有隐藏的(存在浏览器兼容问题) ：visible 所有可见的 6.属性 [attribute] 有此属性的元素 [attribute...参数2：子元素中绑定数据是否被克隆。...6.包裹 wrap(...) ：每一个匹配元素使用指定的内容包裹。 wrapAll(...)：所有的元素使用一个指定的内容包裹 wrapInner(...)：子节点使用指定的内容包裹。...unwrap(): 移出该元素的父元素。

2.3K9 0

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节点存在的话，也可以在返回的节点中包含它。

5525 0

Jquery入门基础教程免费版

为什么要反复的讲选择器，这个就是jQuery的要点，同CSS3，通过复杂的document.getElement(s)ById|ByTagName|ByClassName等等，这些方式，找页面的元素对象..." ) 匹配“家乡”中的“北京”选项；#userform是表单名，不是下拉框 2.6 属性操作 jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作 html...4.2 追加节点语法功能 append(content) $(A).append(B)表示将子元素B追加到A中 prepend(content) $(A). prepend (B)表示将子元素B前置插入到...--用一个按钮来做测试，更简单--> 4.5 遍历函数实际它属性节点的查找：复习：first() last() sibings()都是查找；语法功能 each...4个，2个子元素街边；2个兄弟元素级别； 3.节点操作就是删除、清空、复制、替换（删改） 4.属性节点：attr() attr('name','name) 5.节点的遍历，注意使用：$("选择器").each

1021 0

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效率。

6033 0

Vue内部是如何渲染视图

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

9535 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭