jQuery Clone方法是jQuery庫中的一個非常常用的方法。使用它可以實現對DOM元素的復制,將一個元素的完全復制到另一個位置,或是創建另外一個基于現有元素的副本,實現非常簡單方便。
下面是使用jQuery Clone方法的代碼示例:
//復制一個input框 $(document).ready(function(){ $("#btnCopy").click(function(){ var inputObj = $("input:first"); var clonedInputObj = inputObj.clone(); clonedInputObj.insertAfter(inputObj); }); });
上述代碼中,我們首先選擇頁面上的第一個input元素。
然后使用Clone方法復制這個元素,生成了一個clonedInputObj的元素對象。
最后,將這個復制出來的元素對象,插入到原來的元素對象之后。
如果需要在復制過程中,保留這個元素綁定的事件、樣式等信息,可以將Clone方法的參數設置為true。
下面是帶參數的代碼示例:
//復制一個Box,并保留原始節點的事件、樣式等信息 $(document).ready(function(){ $("#btnCopyBox").click(function(){ var boxObj = $(".Box:first"); var clonedBoxObj = boxObj.clone(true); clonedBoxObj.insertAfter(boxObj); }); });
正如我們看到的,使用jQuery Clone方法非常方便,可以實現許多類型的DOM元素復制。同時,還可以保持復制出來的元素樣式、事件等信息,是一個十分強大的功能。