Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!