jQuery.fn.extend() Method
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 = "https://code.jquery.com/jquery-3.4.1.js" > </ script > </ head > < body style = "text-align:center;" > < h1 style = "color: green" > w3wiki </ 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 = "https://code.jquery.com/jquery-3.4.1.js" > </ script > </ head > < body style = "text-align:center;" > < h1 style = "color: green" > w3wiki </ 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:
Contact Us