Home > Article > Web Front-end > The clone method in JQuery copies nodes
This article mainly introduces the clone method in JQuery to copy nodes. The example analyzes the use of shallow cloning and deep cloning of the clone method. Friends in need can refer to the examples in this article. Describes the clone method in JQuery to copy nodes. Share it with everyone for your reference. The details are as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>复制节点</title> <style type="text/css"> #main{ width:300px; margin:200px auto; background-color:gold; padding:10px; } </style> <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var $text = $("#txt1"); $text.click(function () { alert('我是文本框单击事件'); }); $("#btn1").click(function () { $("#btn1").after($text.clone()); //浅克隆(不复制事件) }); $("#btn2").click(function () { $("#btn2").after($text.clone(true)); //深克隆(复制事件) }); }); </script> </head> <body> <p id="main"> <input type="text" value="我是文本框" id="txt1" /> <input type="button" id="btn1" value="进行浅克隆(不复制事件)" /> <input type="button" id="btn2" value="进行深克隆(复制事件)" /> </p> </body> </html>
The above is the detailed content of The clone method in JQuery copies nodes. For more information, please follow other related articles on the PHP Chinese website!