jQuery.fn.extend() Method
Last Updated :
14 May, 2020
This jQuery.fn.extend() method is used to merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.
Syntax:
jQuery.fn.extend( object )
Parameters: This method accepts single parameter as mentioned above and described below:
- object: This parameter holds the object to merge onto the jQuery prototype.
Return Value: It returns the object after merging.
Below examples illustrate the use of jQuery.fn.extend() method:
Example 1: In this example, the jQuery.fn.extend() method is used to add two methods to the jQuery prototype object and then use one of them.
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title >jQuery.fn.extend() method</ title >
< script src =
</ script >
</ head >
< body style = "text-align:center;" >
< h1 style = "color: green" >
GeeksForGeeks
</ h1 >
< h3 >jQuery.fn.extend() method</ h3 >
< p >
Add two methods to the jQuery prototype
object < br >and then use one of them.
</ p >
< p >< input type = "radio" name = "Geek_1" > Geek_1</ p >
< p >< input type = "radio" name = "Geek_2" > Geek_2</ p >
< script >
jQuery.fn.extend({
Gfg1: function () {
return this.each(function () {
this.checked = true;
});
},
Gfg2: function () {
return this.each(function () {
this.checked = false;
});
}
});
// Use the newly created .Gfg1() method
$("input[type='radio']").Gfg1();
</ script >
</ body >
</ html >
|
Output:
Example 2: In this example, the jQuery.fn.extend() method is used to merge more methods to the jQuery prototype object.
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title >jQuery.fn.extend() method</ title >
< script src =
</ script >
</ head >
< body style = "text-align:center;" >
< h1 style = "color: green" >
GeeksForGeeks
</ h1 >
< h3 >jQuery.fn.extend() method</ h3 >
< p >
Add two methods to the jQuery prototype
object < br >and then use one of them.
</ p >
< p >< input type = "checkbox" name = "Geek_1" > Geek_1</ p >
< p >< input type = "checkbox" name = "Geek_2" > Geek_2</ p >
< p >< input type = "checkbox" name = "Geek_3" > Geek_3</ p >
< p >< input type = "checkbox" name = "Geek_4" > Geek_4</ p >
< script >
jQuery.fn.extend({
Gfg1: function () {
return this.each(function () {
this.checked = true;
});
},
Gfg2: function () {
return this.each(function () {
this.checked = false;
});
}
});
// Use the newly created .Gfg1() method
$("input[type='checkbox']").Gfg1();
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...