search

Home >Web Front-end >JS Tutorial >Detailed explanation of usage examples of clone() function in jQuery

Detailed explanation of usage examples of clone() function in jQuery

巴扎黑
巴扎黑Original
2017-06-25 10:01:351439browse

This article mainly introduces the usage of clone() method in jQuery. It analyzes the function and definition of clone() method and the usage skills of cloning matching DOM elements with examples. Friends in need can refer to the following

The example in this article describes the usage of clone() method in jQuery. Share it with everyone for your reference. The specific analysis is as follows:

This method clones matching DOM elements and selects these cloned copies and all their event handling.

Grammar structure:

The code is as follows:

$(selector).clone(Events, deepEvents)

Parameter list:

Parameter Description
Events Optional. Boolean value used to specify whether the event processing function is copied. Default is false.
true - copies all event handlers of the element.
False - Do not copy the element's event handling.
deepEvents Optional. Boolean value that specifies whether data for event handlers and all child elements of the cloned element should be copied.

Example code:

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
p{
  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("p"); 
  }) 
}) 
</script>
</head>
<body>
<p>我是p</p>
<p>我会被克隆</p>
<button>点击查看效果</button>
</body>
</html>

The above is the detailed content of Detailed explanation of usage examples of clone() function in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of the usage difference between jquery function clone and clone(true)Next article：Detailed explanation of the usage difference between jquery function clone and clone(true)

Related articles

See more