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

Question

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)

If your learning custom jQuery plugin development I recommend reading this thread https://stackoverflow.com/questions/1117086/how-to-create-a-jquery-plugin-with-methods/22976877#22976877 — CrandellWS, Nov 06 '18 at 21:19

score 94 · Accepted Answer · edited Jan 02 '10 at 10:36

94

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)

edited Jan 02 '10 at 10:36

vava

24,851
11
64
79

answered Jan 02 '10 at 09:53

Philippe Leybaert

168,566
31
210
223

1

thanks, thats clear about assign multiple objects, but I am still not sure when one should use jquery.extend. Why would you pass something that you do in fn.extend to the jquery.extend? I can also post a new question for this, because I asked two questions. – Richard Jan 02 '10 at 11:54
13

jQuery.extend() is actually a convenience function that can be used in your own javascript code to extend objects in a generic way. It's part of the "utility" functions in jQuery (not used for DOM manipulation) – Philippe Leybaert Jan 02 '10 at 12:02

score 82 · Answer 2 · edited Dec 26 '22 at 23:59

82

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().

edited Dec 26 '22 at 23:59

starball

20,030
7
43
238

answered Dec 21 '12 at 14:54

Dinesh

1,126
9
6

Bergi · Answer 3 · 2019-11-27T09:30:10.833

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.

My upvote !!!! to this . i was looking at the source code to see how jQuery extend itself — aked, Jul 15 '13 at 17:41

score 16 · Answer 4 · edited Jun 20 '20 at 09:12

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 13 '13 at 12:10

gavenkoa

45,285
19
251
303

1

What does it mean to access a method *'directly from the DOM'*? – Dan Nissenbaum May 18 '16 at 03:13
1

`directly from the DOM` refers to very basic JavaScript concept of function call vs object property/prototype call (on jQuery wrapper around native DOM objects). See example and try to find difference and think about why code in examples are not interchangeable. – gavenkoa May 18 '16 at 06:20
2

@DanNissenbaum In this context, 'directly from the DOM' means to select DOM elements using `jQuery("selector")` and then applying a method on those (jQuery-wrapped) elements like so: `jQuery("selector").myMethod()`. A method is _designed_ to act on DOM elements, whereas a function might not. An example for a function is `jQuery.each()` https://api.jquery.com/jQuery.each/ which can act on arbitrary JS objects, not DOM elements. – Martin Lisowski May 25 '23 at 08:57

score 10 · Answer 5 · edited May 18 '16 at 03:20

$.fn.something= function{};

points to the jQuery.prototype and lets access dom elements through "this". Now u may use $(selector).something(); So this works as plugin function like $(selector).css();

$.something = function{};

adds a property or function to the jQuery object itself and u cannot use "this" for dom access Now u may use it as $.something(); this works as a utility function as $.trim()

but

$.fn.extend({function1(), function2()}) and  $.extend({function1(), function2()})

allows adding more than 1 function at the same time.Also they can be used to merge two object literals in case we provide more than one objects.

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

5 Answers5

Linked

Related