Home > Developer > Web Develop
The use of the Extend method of jquery
1. [Code][javascript] Code
01<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en"
"Http://www.w3.org/TR/html4/strict.dtd" >
03<meta content= "text/html; Charset=utf-8 "http-equiv=" Content-type ">
<title>jquery Inheritance </title>
<body>
<p> Object Inheritance {name: ' ws ', Age: '}<={name ': ' King ', Sex: ' Man '}
Ten <p type= "text" id= "Parent1" ></p>
<input type= "button" value= "Extend" id= "BTN1" >
<p>
<p> Global Method Inheritance $.hello ()
<input type= "button" value= "Trigger" id= "BTN3" >
<p>
<p> class Plug-in method trigger
<br/>name:<input type= "text" id= "name" >
<br/>age:<input type= "text" id= "age" >
<input type= "button" value= "Trigger" id= "BTN4" >
<p>
<p>
22 deep Copy {name: "ws", Location:{city: "Ningbo", Code: "315000", locother= "other"},other: "Parameters in the first CEN object"}<={name: "King", L Ocation:{city: "Shaoxin", Code: "311824"}
<p id= "P5" ></p>
<p id= "P6" ></p>
<input type= "button" value= "deep copy Trigger" id= "BTN5" >
<input type= "button" value= "non-deep copy trigger" id= "BTN6" >
</p>
</body>
<script type= "Text/javascript" src= "Jquery-1.8.2.js" ></script>
<script>
$ (function () {
32
33/* Object Inheritance */
$ ("#btn1"). Click (function () {
var result = $.extend ({},{name: "ws", Age: "All"},{name: "King", Sex: "Man"});
$ ("#parent1"). HTML ("Name:" +result.name+ "--" + "Age:" +result.age+ "--" + "Sex:" +result.sex ");
37});
38
39/* Method Inheritance */
$.extend ({hello:function () {
Alert ("Global Method");
42}
43});
44
/*fn Plugin Method */
$.fn.extend ({fnmethod:function () {
$ (this). Click (function () {
Alert ($ (this). Val ());
49})
50}});
("#name"). Fnmethod ();
52
53/* Global jquery Method */
The function hello () {
Alert ("sub-method");
56}
$ ("#btn3"). Click (function () {
$.hello ();
59});
60
61/* Class Plugin Method trigger */
$ ("#btn4"). Click (function () {
$.ws.printinfo ({
name:$ ("#name"). Val (),
age:$ ("#age"). Val ()
66})
67});
68
69/* Deep copy */
$ ("#btn5"). Click (function () {
The var result = $.extend (true,{},{name: "ws", Location:{city: "Ningbo", Code: "315000", Locother: "Other"},other: " The parameters in the first CEN object "},{name:" King ", Location:{city:" Shaoxin ", Code:" 311824 "});
$ ("#p5"). HTML ("Name:" +result.name+ "--city:" +result.location.city+ "--code:" +result.location.code+ "--<b& Gt;locother: "+result.location.locother+" </b>--<b>other: "+result.other+" </b> ");
73});
$ ("#btn6"). Click (function () {
RESULT1 var = $.extend ({},{name: "ws", Location:{city: "Ningbo", Code: "315000", Locother: "Other"},other: "First cen object The parameters in "},{name:" King ", Location:{city:" Shaoxin ", Code:" 311824 "});
$ ("#p6"). HTML ("Name:" +result1.name+ "--city:" +result1.location.city+ "--code:" +result1.location.code+ "--&L T;b>locother: "+result1.location.locother+" </b>--<b>other: "+result1.other+" </b> ");
77});
78
79
80});
81
82/** Class Plugin method trigger */
(function ($) {
$.ws={
op:{
The name: "WS",
AGE:20,
"Other Param"
89},
Printinfo:function (NEWOP) {
op_ var = $.extend ({},this.op,newop);
Console.info ("Name:" +op_.name);
Console.info ("Age:" +op_.age);
94 Console.info ("Sex:" +op_.other);
95}
96}
) (JQuery);
98 </script>
992. [Code] Description
View Sourceprint?
The extension method of 01Jquery extend is a common method in the process of writing plugins.
http://www.huiyi8.com/moban/
03 Model: Extend (DEST,SRC1,SRC2,SRC3 ...); Explanation: Will SRC1,SRC2,SRC3 ... Merge into dest, return value is merged dest
04
051. Global methods
06 expands the jquery class itself. Add a new method to a class
07 to understand as adding static methods
08$.extend ({
Hello:function () {alert (' Hello ');}
10});
11 How to Invoke: $.hello (), which will overwrite the other child's Hello () method
12
Instance object method for 132.jquery
14 (Add method to jquery object) such as: Click on any DOM object to eject its value
15$.fn.extend ({fnmethod:function () {
$ (this). Click (function () {
Alert ($ (this). Val ());
18})
19}});
20
213. About Deep copy
22 Deep Copy
23var Result=$.extend (True, {}, {name: "ws", Other:{x:xvalue,y:yvalue}},{name: "ws", Other:{x:xx}}}
24=> {name: "ws", Other:{x:xx,y:yvalue}}
25
26 Non-deep copy
27var Result=$.extend (False, {}, {name: "ws", Other:{x:xvalue,y:yvalue}},{name: "ws", Other:{x:xx}}}
28=> {name: "ws", Other:{x:xx}} site template
29 The difference is that a deep copy copies all the properties of an object in an object, and not a deep copy.
30 people understand: OK. The object is understood as a JSON object, and jquery's extend inherits the top-level attributes from all objects, and if you need to inherit the attributes from the object properties, you need to use depth inheritance
31jquery default copy mode is non-deep copy
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
