jquery plugin syntax

Question

I am trying to create a jquery plugin, and I want have the following options:

$.plugin_name(variable)
$(selector).plugin_name(variable)

The first case the plugin would not need to be applied to an element ( it could create one for example) the second case the same plugin will do whatever it does on the element/s selected

My question is: How do I specify inside the plugin this:

if (selector is not given) {
  create an element
} else {
  ( for example) insert variable in elements matching the selector
}

I was actually wondering if there was a way to author a plugin that would do both... in case no selector is given it would create an element...so ideally it can be called both as $.pluginName() or $(selector).pluginName() not either or . thank you — salmane, Jan 24 '10 at 02:10
possible duplicate of [I'd like to understand the jQuery plugin syntax](http://stackoverflow.com/questions/4484289/id-like-to-understand-the-jquery-plugin-syntax) — Nathan Osman, Jul 05 '11 at 05:50

Jacob Relkin · Accepted Answer · 2012-09-28T19:10:26.760

You can use jQuery.fn.myPluginName = function().... for plugins that operate on jQuery objects.

For a standalone function in the jQuery namespace, you can just set jQuery.func_name = function()....

An example:

jQuery.fn.erase = function() {
   return this.each(function() {
       jQuery(this).remove();
   });
};

jQuery("body").erase();

jQuery.erase = function(element) {
   jQuery(element).erase();
};

jQuery.erase("body"); // exact same result.

David Hellsing · Answer 2 · 2010-01-24T11:20:16.493

By using $.myFunc you are simply adding a function to the jQuery namespace.

By using $.fn.myFunc, you are extending the jQuery prototype, which means that the this keyword inside the function will represent the jQuery object returned from the selector.

If you'd like them both to do the same thing, you can check for the jQuery instance and create a new element:

try this:

$.myFunc = $.fn.myFunc = function(first, second) {
    if (!(this instanceof $)) {
        return $.fn.myFunc.apply($('<div>'), arguments);
    }
    // begin plugin code here:
    return this.each(function() {
        $(this).text(first + ' ' + second);
    });
};

// now you can call myFunc in two ways:

$('<div>').myFunc('foo','bar').appendTo('body') 

$.myFunc('bar','foo').appendTo('body');

score 2 · Answer 3 · answered Jan 24 '10 at 01:57

2

To cover $.plugin_name() use:

jQuery.plugin_name = function(data) {
  // do stuff
}

For $(selector).plugin_name() use:

jQuery.fn.plugin_name = function() {
  return this.each(function() {
    // do stuff
  });
};

See Plugins/Authoring.

answered Jan 24 '10 at 01:57

cletus

616,129
168
910
942

jquery plugin syntax

3 Answers3