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= </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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
Output:
