jQuery中clone()方法用法實例

2024-05-06 16:14:36

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jQuery中clone()方法用法,實例分析了clone()方法的功能、定義及克隆匹配的DOM元素的使用技巧,需要的朋友可以參考下

本文實例講述了jQuery中clone()方法用法。分享給大家供大家參考。具體分析如下：

此方法克隆匹配的DOM元素并且選中這些克隆的副本以及其所有的事件處理。

語法結構:

復制代碼代碼如下:

$(selector).clone(Events，deepEvents)

參數列表:

參數	描述
Events	可選。布爾值，用來規定事件處理函數是否被復制。默認為false。 true-復制元素的所有事件處理。 false-不復制元素的事件處理。
deepEvents	可選。布爾值，用來規定是否對事件處理程序和克隆的元素的所有子元素的數據應該被復制。

實例代碼:

復制代碼代碼如下:

		
		<!DOCTYPE html>
		<html>
		<head>
		<meta charset="utf-8">
		<meta name="author" content="http://www.survivalescaperooms.com/" />
		<title>武林網</title>
		<style type="text/css">
		div{
		  width:200px;
		  height:200px;
		  border:1px solid blue;
		}
		p{
		  width:200px;
		  height:200px;
		  border:1px solid green;
		}
		</style>
		<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
		<script type="text/javascript">  
		$(document).ready(function(){ 
		  $("button").click(function(){ 
		    $("p").clone().insertBefore("div"); 
		  }) 
		}) 
		</script>
		</head>
		<body>
		<div>我是div</div>
		<p>我會被克隆</p>
		<button>點擊查看效果</button>
		</body>
		</html>