Difference between jQuery.extend and jQuery.fn.extend

There is a significant difference between using jQuery extend() with passing one argument and doing it with two or more arguments.

Basically, jQuery.extend() merge the contents of two or more objects into the first object.

$.extend() is used to extend any object with additional functions but $.fn.extend() is used to extend the $.fn object, which in fact adds several plugin functions in one go instead of assigning each function separately.

$.extend:

var obj = { x: function() {} }
$.extend(obj, { y: function() {} });

$.fn.extend:

$.fn.extend( {
x: function() {},
y: function() {}
});

A simple example for $.extend():

<script>
var obj1 = {
apple: 5,
banana: { weight: 100, price: 200 },
cherry: 95
};
var obj2 = {
banana: { price: 400 },
durian: 200
};

$.extend( obj1, obj2 );
console.log( JSON.stringify( obj1 ) );
</script>

Result:
{“apple”:5,”banana”:{“price”:400},”cherry”:95,”durian”:200}

For more details see jQuery reference page.

A simple example for $.fn.extend():

<div>
<input type="checkbox" name="chkA"> A
<input type="checkbox" name="chkB"> B
</div>

<script>
$.fn.extend({
check: function() {
return this.each(function() {
this.checked = true;
});
},
uncheck: function() {
return this.each(function() {
this.checked = false;
});
}
});

$( "input[type='checkbox']" ).check();
</script>

Result:
All checkbox will be checked.

For more details see jQuery reference page.

When jQuery .extend() receives a single object then it adds the methods defined to it to either the jQuery or the jQuery.fn objects.

When jQuery .extend() receives two or more objects then it takes the first object and adds to it the methods and variables defined in the other objects.

Read Also:

• jQuery wrapInner – wrap element around the content
• Avoid jQuery conflicts with other libraries

Different way of calling a method when extending the jQuery.fn or jQuery objects:

<script>
$.extend({
methodOne: function(){...}
});
</script>

jQuery.methodOne();

<script>
$.fn.extend({
methodTwo: function(){...}
});
</script>

jQuery("div").methodTwo();