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: