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

深度理解DOM拷贝clone()

克隆节点是DOM的常见操作,jQuery提供一个clone方法,专门用于处理dom的克隆: .clone()方法深度 复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。...clone() //只克隆了结构,事件丢失 //clone处理二 $("div").clone(true) //结构、事件与数据都克隆 使用上就是这样简单,使用克隆的我们需要额外知道的细节: clone...()方法时,在将它插入到文档之前,我们可以修改克隆后的元素或者元素内容,如右边代码我 $(this).clone().css('color','red') 增加了一个颜色 通过传递true,将所有绑定在原始元素上的事件处理函数复制到克隆元素上...clone()方法是jQuery扩展的,只能处理通过jQuery绑定的事件与数据 元素数据(data)内对象和数组不会被复制,将继续被克隆元素和原始元素共享。...">点击,clone深拷贝,可以继续触发创建div> div> //只克隆节点 /

1.1K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Web前端学习笔记之jQuery基础

    如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日) 3.x:不兼容IE678,只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。...一个约定,我们在声明一个jQuery对象变量的时候在变量名前面加上$: var $variable = jQuery对像 var variable = DOM对象 $variable[0]//jQuery....x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug,在3.x版本的jQuery中则没有这个问题。...例子: 点击按钮在表格添加一行数据。 点击每一行的删除按钮删除当前行数据。 替换 replaceWith() replaceAll() 克隆 clone()// 参数 克隆示例: jQuery 中添加新函数时使用。 示例: jQuery.extend({ min:function(a, b){return a < b ?

    3.6K20

    jquery

    如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日) 3.x:不兼容IE678,只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。...一个约定,我们在声明一个jQuery对象变量的时候在变量名前面加上$: var $variable = jQuery对像 var variable = DOM对象 $variable[0]//jQuery....x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug,在3.x版本的jQuery中则没有这个问题。...例子: 点击按钮在表格添加一行数据。 点击每一行的删除按钮删除当前行数据。 替换 replaceWith() replaceAll() 克隆 clone()// 参数 克隆示例: jQuery 中添加新函数时使用。 示例: jQuery.extend({ min:function(a, b){return a < b ?

    5.8K30

    jQuery学习笔记之DOM操作、事件绑定(2)

    before(content):在每个匹配的元素之前插入内容 insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面...empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点)。 复制节点 clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本....,不克隆事件 $("button").clone().appendTo("p"); //克隆节点,克隆事件 $("button").clone...当为该方法传递一个参数时, 即为某元素的获取指定属性。 当为该方法传递两个参数时, 即为某元素设置指定属性的值。 jQuery 中有很多方法都是一个函数实现获取和设置....在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.

    1.5K10

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

    把所有匹配的元素插入到另一个、指定的元素元素集合的后面。实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插到A后面,而是把A插到B后面。...当HTML标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包裹完成之后再行添加。...// 删除所有的p标签 $("p").remove(); 2.12 复制节点 clone([Even[,deepEven]])方法可以对节点进行克隆。...deepEven:一个布尔值,指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。 $("b").clone().prependTo("p"); 3....在 jQuery 1.2 以后可以用来获取 window 和 document 的高 参数 valString 可以是: Number, Function两种类似。

    2.2K90

    前端基础-jQuery节点操作

    第10章 jQuery节点操作 10.1 创建节点 // $(htmlStr) // htmlStr:html格式的字符串 $('<span-这是一个span元素</span-'); 10.2 添加节点...insertAfter 在被选元素之前插入内容 前.after(后) 后.insertAfter(前) 10.3 清空节点与删除节点 empty:清空指定节点的所有元素,自身保留(清理门户) $('div...').empty(); // 清空div的所有内容(推荐使用,会清除子元素上绑定的事件) $('div').html('');// 使用html方法来清空元素,不推荐使用,绑定的事件不会被清除。...remove:相比于empty,自身也删除(自杀) $('div').remove(); 10.4 克隆节点 作用:复制匹配的元素 // 复制$(selector)所匹配到的元素(深度复制) // cloneNode...$(selector).clone();//克隆元素本身及后代 $(selector).clone(true);//克隆元素本身及后代以及绑定的事件

    77900

    jquery第一次课的案例教程

    大版本分类: 1.x版本:能够兼容IE678浏览器 2.x版本:不能兼容IE678浏览器 3.x版本:不能兼容IE678浏览器,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678...当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中, 等前面的动画完成后再开始执行。...可是用户的操作往往都比动画快, 如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积, 影响到效果。.../*如果想克隆事件 false true克隆事件*/ var $cloneP = $('p').clone(true); 添加&移动节点 /*追加自身的最后面 传对象和html...但是如果与其他框架中的 作为标示符,但是如果与其他框架中的冲突时,jQuery可以释放$符的控制权.

    6910

    为什么要学jquery

    大版本分类: 1.x版本:能够兼容IE678浏览器 2.x版本:不能兼容IE678浏览器 3.x版本:不能兼容IE678浏览器,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678...#checkbox").removeProp("checked"); 对应案例:​​案例-《表格全选》​​ 动画 基本动画 /*注意:动画的本质是改变容器的大小和透明度*/ /*注意:如果不传参数是看不到动画...当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中, 等前面的动画完成后再开始执行。...可是用户的操作往往都比动画快, 如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积, 影响到效果。.../*如果想克隆事件 false true克隆事件*/ var $cloneP = $('p').clone(true); 添加&移动节点 /*追加自身的最后面 传对象和html格式代码

    7710

    用于H5的移动开发框架

    jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。...Kendo UI不是另一个jQuery UI的克隆,它的每一个决定都是从优化性能出发。...其中WeX5为国内打造,完全Apache开源,在融合Phonegap的基础上,做了深度优化,具备接近Native app的性能,同时开发便捷性也较好。...模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况); mui通过双webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview...mui的列表控件也支持滑动触发操作菜单功能,仅需按照特定格式拼装DOM结构即可;另外,滑动还支持事件触发,开发者可以通过监听滑动事件(slideleft/slideright),完成操作前的确认提醒工作

    4.9K10

    Jquery入门基础教程免费版

    同样,在jQuery里面,我们要操作页面对象还是需要找对象,找页面对象,就是通过各类的选择器来找,简化我们的业务代码量。...在jquery里面,使用[]来指定属性选择器,基本选择器[属性选择器] 属性选择器 符号 说明 用法 $("a[href]") 选择所有包含href属性的元素 $("a[href]").css("background...mouseover事件 鼠标指针移过时 mouseout( ) 触发或将函数绑定到指定元素的mouseout事件 鼠标指针移出时 3.1.2 键盘事件 当我们在键盘尚进行按键操作的时候,做出的响应事件...当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。 div> 克隆<!

    10210

    HTML5移动开发的10大移动APP开发框架

    jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。   ...Kendo UI不是另一个jQuery UI的克隆,它的每一个决定都是从优化性能出发。...其中WeX5为国内打造,完全Apache开源,在融合Phonegap的基础上,做了深度优化,具备接近Native app的性能,同时开发便捷性也较好。   ...模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况); mui通过双webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview...mui的列表控件也支持滑动触发操作菜单功能,仅需按照特定格式拼装DOM结构即可;另外,滑动还支持事件触发,开发者可以通过监听滑动事件(slideleft/slideright),完成操作前的确认提醒工作

    6.6K10

    用于H5的移动开发框架

    jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。...Kendo UI不是另一个jQuery UI的克隆,它的每一个决定都是从优化性能出发。...其中WeX5为国内打造,完全Apache开源,在融合Phonegap的基础上,做了深度优化,具备接近Native app的性能,同时开发便捷性也较好。...模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况); mui通过双webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview...mui的列表控件也支持滑动触发操作菜单功能,仅需按照特定格式拼装DOM结构即可;另外,滑动还支持事件触发,开发者可以通过监听滑动事件(slideleft/slideright),完成操作前的确认提醒工作

    5.1K40

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

    把所有匹配的元素插入到另一个、指定的元素元素集合的后面。实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插到A后面,而是把A插到B后面。...当HTML标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包裹完成之后再行添加。...// 删除所有的p标签 $("p").remove(); 2.12 复制节点 clone([Even[,deepEven]])方法可以对节点进行克隆。...参数:optionsBoolean默认值:'false',设置为 true 时,计算边距在内。 示例 获取第一段落外部宽度。...在 jQuery 1.2 以后可以用来获取 window 和 document 的高 参数 valString 可以是: Number, Function两种类似。

    6.1K00

    脚本语言知识总结.

    在实际开发中,如果传参数,使用HTML元素绑定事件,如果不传参数,使用JS绑定事件。传参数也可以使用与JS绑定事件【使用匿名函数】。...注意:在register.html文件中,与服务器建立连接是,url一定要写对,否则返回数据时出现404错误!【"/Ajax/CheckUsernameServlet?...1.8.3.js jQuery框架源码,没有被精简,体积较大 (主要用来研究 jQuery源码),企业开发时,需要导入 jquery-1.8.3.min.js (精简过) 1.jQuery程序快速入门..., 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery(expression, [context])  在核心函数jQuery中传入表达式,对页面中元素进行选择...背景黄色,不执行动画div背景绿色 <script type="text/javascript" src="..

    5K130
    领券