Difference between jQuery.extend and jQuery.fn.extend?

jQuery.extend({
    abc: function(){
        alert('abc');
    }
});

usage: $.abc(). (No selector required like $.ajax().)

jQuery.fn.extend({
    xyz: function(){
        alert('xyz');
    }
});

usage: $('.selector').xyz(). (Selector required like $('#button').click().)

Mainly it is used to implement $.fn.each().

I hope it helps.


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

jQuery.extend:

var obj = { x: function() {} }

jQuery.extend(obj, { y: function() {} });

// now obj is an object with functions x and y

jQuery.fn.extend:

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

// creates 2 plugin functions (x and y)