jQuery 文档操作 - clone() 方法
2017-09-12 10:44
316 查看
clone( [withDataAndEvents ] ):创建一组匹配元素的深层副本
withDataAndEvents :一个布尔值,指示是否应复制克隆元素的所有子代的事件处理程序和数据。默认情况下,它的值与第一个参数的值匹配(默认值为false)。
clone()方法执行匹配元素集的深层拷贝,这意味着它会复制匹配的元素以及其所有后代元素和文本节点。
注意:出于性能原因,某些表单元素(例如,输入到文本区域的用户数据和对选择进行的用户选择)的动态状态不会复制到克隆元素。当克隆输入元素时,元素的动态状态(例如,键入文本输入的用户数据和对复选框进行的用户选择)保留在克隆的元素中。
当与其中一种插入方法结合使用时,.clone()是一种方便的方法来复制页面上的元素。
注意:使用.clone()方法时,您可以修改克隆的元素或其内容,然后再将其重新插入到文档中。
通常,绑定到原始元素的任何事件处理程序都不会复制到克隆中。可选的withDataAndEvents参数允许我们更改此行为,而是将所有事件处理程序的副本绑定到元素的新副本。从jQuery 1.4开始,所有元素数据(由.data()方法附加)也被复制到新的副本。
但是,元素数据中的对象和数组不会被复制,并将继续在克隆元素和原始元素之间共享。
从jQuery 1.5开始,withDataAndEvents可以通过deepWithDataAndEvents任意增强,以复制克隆元素的所有子代的事件和数据。
注意:使用.clone()具有生成具有重复id属性的元素的副作用,它们应该是唯一的。 在可能的情况下,建议您避免使用此属性克隆元素,或使用类属性作为标识符。
实例:
克隆所有b个元素(并选择克隆),并将其添加到所有段落
实例:
withDataAndEvents :一个布尔值,指示是否应复制克隆元素的所有子代的事件处理程序和数据。默认情况下,它的值与第一个参数的值匹配(默认值为false)。
clone()方法执行匹配元素集的深层拷贝,这意味着它会复制匹配的元素以及其所有后代元素和文本节点。
注意:出于性能原因,某些表单元素(例如,输入到文本区域的用户数据和对选择进行的用户选择)的动态状态不会复制到克隆元素。当克隆输入元素时,元素的动态状态(例如,键入文本输入的用户数据和对复选框进行的用户选择)保留在克隆的元素中。
当与其中一种插入方法结合使用时,.clone()是一种方便的方法来复制页面上的元素。
注意:使用.clone()方法时,您可以修改克隆的元素或其内容,然后再将其重新插入到文档中。
通常,绑定到原始元素的任何事件处理程序都不会复制到克隆中。可选的withDataAndEvents参数允许我们更改此行为,而是将所有事件处理程序的副本绑定到元素的新副本。从jQuery 1.4开始,所有元素数据(由.data()方法附加)也被复制到新的副本。
但是,元素数据中的对象和数组不会被复制,并将继续在克隆元素和原始元素之间共享。
从jQuery 1.5开始,withDataAndEvents可以通过deepWithDataAndEvents任意增强,以复制克隆元素的所有子代的事件和数据。
注意:使用.clone()具有生成具有重复id属性的元素的副作用,它们应该是唯一的。 在可能的情况下,建议您避免使用此属性克隆元素,或使用类属性作为标识符。
实例:
克隆所有b个元素(并选择克隆),并将其添加到所有段落
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>clone demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <b>Hello</b><p>, how are you?</p> <script> $( "b" ).clone().prependTo( "p" ); </script> </body> </html>
实例:
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("body").append($("p").clone()); }); }); </script> </head> <body> <p>This is a paragraph.</p> <button>复制每个 p 元素,然后追加到 body 元素</button> </body> </html>
相关文章推荐
- jQuery 文档操作 - html() 方法与text()方法
- jquery文档操作wrap()方法实例简述
- jQuery 文档操作 - text() 方法
- 【jQuery】 文档操作 -- empty( ) 方法
- jQuery 文档操作 - prependTo() ,appendTo()方法
- jQuery 文档操作 - detach() 方法
- Jquery 操作xml 文档的方法
- jQuery文档操作之detach()方法
- jQuery 文档操作 - after() 方法
- jQuery 文档操作 - remove() 方法
- jQuery 文档操作 - before() 方法
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
- jQuery 文档操作 - append() 方法
- jquery文档操作wrap()方法实例简述
- jQuery 文档操作 - text() 方法
- jQuery 文档操作 - appendTo() 方法---动态加HTML 元素
- jQuery 文档操作 - appendTo() 方法
- jQuery 文档操作 - insertAfter() ,insertBefore(),after(),before() 方法
- jquery clone在ie7文档模式下无效解决方法
- jQuery 文档操作 - remove() detach() 方法