jQuery如何使用clone()方法(代码示例)

【jQuery如何使用clone()方法(代码示例)】clone()是jQuery中的内置方法, 用于复制所选元素(包括其子节点, 文本和属性)。
语法如下:

$(selector).clone(true|false)

参数:
它接受一个可选参数, 该参数可以为true或false, 指定是否应复制事件处理程序。
返回值:
它返回所选元素的克隆元素。
jQuery代码显示此方法的工作方式:
代码1:
在下面的代码中, 不会将true或false传递给change方法。
< html> < head> < script src="https://ajax.googleapis.com/ajax/libs/ jquery/3.3.1/jquery.min.js"> < /script> < !--In this example no parameter is passing to the clone method--> < script> $(document).ready(function() { $("button").click(function() { $("p").clone().appendTo("body"); }); }); < /script> < /head> < body> < p> Welcome to< /p> < p> lsbin !!!< /p> < !--click on this method and see the clone element--> < button> Click Me!< /button> < /body> < /html>

在点击"点击我"按钮之前,
jQuery如何使用clone()方法(代码示例)

文章图片
点击"点击我"按钮后,
jQuery如何使用clone()方法(代码示例)

文章图片
代码2:
在下面的代码中, 将true传递给clone方法。
< html> < head> < script src="https://ajax.googleapis.com/ajax/libs/ jquery/3.3.1/jquery.min.js"> < /script> < !--here clone method is called with the true value passing--> < script> $(document).ready(function() { $("button").click(function() { $("body").append($("p:first").clone(true)); }); $("p").click(function() { $(this).animate({ fontSize: "+=1px" }); }); }); < /script> < /head> < body> < p> lsbin !< /p> < p> Hello Writer !< /p> < !--click on this method and see the clone element--> < button> Click Me!< /button> < /body> < /html>

在此示例中, 当你单击" lsbin"时, 代码事件处理程序的动画将起作用, 这也将反映在克隆的元素上。
输出如下:
在点击"点击我"按钮之前,
jQuery如何使用clone()方法(代码示例)

文章图片
点击"点击我"按钮后,
jQuery如何使用clone()方法(代码示例)

文章图片

    推荐阅读