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:
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();
For any types of queries, you can contact us on info[at]namasteui.com.