Skip to content
jQuery extend: Explained with 3 examples
In This Tutorial
jQuery extend
In Object Oriented Programming (OOP), the extend is one of the major concepts to understand that relates to inheritance. Inheritance is a concept that allows extending the built classes. i.e. The work that has been done by one programmer can be not only reused by others but other programmers can extend its functionality.
In jQuery, extend works almost like that where you “inherit” object, functionality. You can extend a plugin developed by a programmer or company, for example, keeping its existing functionality as well as adding new features to it.
See an example of extend
Similarly, you can extend objects. Suppose a feedback form is built by a jQuery developer that has fields: Name, Email, Feedback. Now you want to add more fields like address, website etc. to that existing form. You can inherit that form that will have Name, Email, Feedback options plus you add address and website fields as well to that form.
The extend allows you to do that.
Below you can see the basic example of using jQuery extend, for demonstration purpose.
Basic example of using extend jQuery
The example below creates three object variables. Object1 containing name and age. Object2 contains profession while object3, which is the target object is kept blank in the start.
By using extend, object3 will take object1 and object2 “content”. As you click on button “Click to see Object3”, it will show three variables taken from object1 and object2.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!doctype html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<title>jQuery.extend demo</title>
<script src=“//code.jquery.com/jquery-1.10.2.js”></script>
<script>
$(document).ready(function(){
var object1 = {
name: “Anna”,
age: 25
};
var object2 = {
profession: “programmer”
};
var object3 = {};
jQuery.extend( object3 , object1,object2 );
$(“button”).click(function(){
alert (“Name: “ + object3.name + “; Age: “ + object3.age + “; Profession: “ + object3.profession);
});
});
</script>
</head>
<body>
<button>Click to see Object3</button>
</body>
</html>
|
Adding variables to target object
This example adds variable to target object3 while extend method merges object1 and object2 into object3 as well.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!doctype html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<title>jQuery.extend demo</title>
<script src=“//code.jquery.com/jquery-1.10.2.js”></script>
<script>
$(document).ready(function(){
var object1 = {
name: “Anna”,
age: 25
};
var object2 = {
profession: “programmer”
};
var object3 = {
blood_group: “A+”
};
jQuery.extend( object3 , object1,object2 );
$(“button”).click(function(){
alert (“Name: “ + object3.name + “; Age: “ + object3.age + “; Profession: “ + object3.profession + “; Blood Group: “ + object3.blood_group);
});
});
</script>
</head>
<body>
<button>Click to see Object3</button>
</body>
</html>
|
Example of before and after using extent method
To make it easier look at this example. As you click on the first button “Object3 before extend”, the first div will be filled with Object3 before using the jQuery extend method.
As you click on the second button “Object3 after extend” it will show merged object3 after extend.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
<!doctype html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<title>jQuery.extend demo</title>
<script src=“//code.jquery.com/jquery-1.10.2.js”></script>
<script>
$(document).ready(function(){
var object1 = {
name: “Anna”,
age: 25
};
var object2 = {
profession: “programmer”
};
var object3 = {
blood_group: “A+”
};
$(“#obj1”).click(function(){
$(“#div1”).empty();
for( key in object3 ) {
$(“#div1”).append(“key is “ + [ key ] + “, value is “ + object3[ key ] + “<BR>” );
}
});
$(“#obj2”).click(function(){
jQuery.extend( object3 , object1,object2 );
$(“#div2”).empty();
for( key in object3 ) {
$(“#div2”).append(“key is “ + [ key ] + “, value is “ + object3[ key ] + “<BR>” );
}
});
});
</script>
<style>
div{
border: solid 1px;
}
</style>
</head>
<body>
<div id=“div1”>Object 3 before</div>
<div id=“div2”>Object 3 after extend</div>
<button id=“obj1”>Object3 before extend</button>
<button id=“obj2”>Object3 after extend</button>
</body>
</html>
|
Related reading: jQuery class | jQuery remove class
Leave A Comment?