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>GeeksforGeeks !!!</p> 
    <!--click on this method and see the clone element-->
    <button>Click Me!</button> 
</body> 
  
</html>

在單擊“Click Me”按鈕之前，

單擊“Click Me”按鈕後，

代碼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>GeeksforGeeks !</p> 
    <p>Hello Writer !</p> 
    <!--click on this method and see the clone element-->
    <button>Click Me!</button> 
</body> 
  
</html>

在此示例中，當您單擊“GeeksforGeeks”時，代碼事件處理程序animate將起作用，這也將反映在克隆的元素上。
輸出：
在單擊“Click Me”按鈕之前，

單擊“Click Me”按鈕後，

相關用法

注：本文由純淨天空篩選整理自kundankumarjha大神的英文原創作品 jQuery | clone() with Examples。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。