Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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)

like image 223
Richard Avatar asked Jan 02 '10 09:01

Richard


People also ask

What is jQuery fn extend?

The jQuery. fn. extend() method extends the jQuery prototype ( $. fn ) object to provide new methods that can be chained to the jQuery() function.

What does fn mean jQuery?

fn is an alias for jQuery. prototype which allows you to extend jQuery with your own functions. For Example: $.fn. something = function{}


2 Answers

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) 
like image 95
Philippe Leybaert Avatar answered Oct 07 '22 10:10

Philippe Leybaert


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.

like image 44
Dinesh Avatar answered Oct 07 '22 10:10

Dinesh