Alex Rivera | Logout

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

Asked 2010-01-02T09:48:15.277
89

I am trying to understand the jquery plugin syntax, because I want to merge two plugins into one. The blinker that also needs to be able to stop de interval or run a number of times.

Anyway, is this syntax the same as

jQuery.fn.extend({
    everyTime: function(interval, label, fn, times) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, times);
        });
    },
    oneTime: function(interval, label, fn) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, 1);
        });
    },

this

$.fn.blink = function(options)
    {

because it looks like the first(without =) is a way to set multiple methods at once. Is this right? Also while I am here What would be the reason to add the elements and some logic to the jquery object?

jQuery.extend({
    timer: {
        global: [],
        guid: 1,
        dataKey: "jQuery.timer",

(this is from the timer plugin)

jquery syntax plugins extend
Edit
Report

2 Answers

23

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

Actually, there is none apart from their base reference. In the jQuery source, you can read:

jQuery.extend = jQuery.fn.extend = function() { … };

So how does it work? The documentation reads:

Merges the contents of two or more objects together into the first object.

It's just a for-in-loop that copies properties, pimped up with a flag to recurse nested objects. And another feature:

If only one argument is supplied to $.extend(), this means the target argument was omitted

 // then the following will happen:
 target = this;

So if the function is called on jQuery itself (without explicit target), it will extend the jQuery namespace. And if the function is called on jQuery.fn (without explicit target), it will extend the jQuery prototype object where all the (plugin) methods are located.

answered 2013-02-11T20:04:05.517
16

This blog post have nice description:

$.fn.extend({
myMethod: function(){...}
});
//jQuery("div").myMethod();

$.extend({
myMethod2: function(){...}
});
//jQuery.myMethod2();

Quotes:

As a general rule, you should extend the jQuery object for functions and the jQuery.fn object for methods. A function, as opposed to a method, is not accessed directly from the DOM.

answered 2013-03-13T12:10:31.463

Your Answer