How to create a plugin for jQuery’s $() function

Question

I noticed that you can create plugins in various jQuery functions like AJAX, CSS (using the cssHooks), animate, create new functions, among others. But I wondered if it is possible to create a plugin for the service call function, for example:

$('26/08/1966')

As an example the plugin could return a string with the most detailed date to use with jQuery(html, css, each functions).

Understand as a way to teach jQuery what to do with the given string at the beginning.

I don’t know if this is possible, I searched and found nothing related (I don’t know if I researched right) and it would be interesting why I could facilitate the use of a plugin I’m doing.

Answer 1

Background

jQuery specializes in dealing with elements of DOM. When you do something like:

var x = $("seletor")

It creates an object that contains - among other things - a list of zero or more elements. Other ways to create this object:

var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
var x = $([a, b, c]); // Lista com 3 elementos
var x = $(a);         // Lista com 1 elemento
var x = $();          // Lista com 0 elemento

var x = $("<div><span>Teste</span></div>"); // Cria um elemento e põe na lista
var x = $("<p>A</p><p>B</p><p>C</p>");      // Idem, para mais de um elemento

All functions of the "jQuery object" then operate on lists of FOD elements. Other user-defined functions can be created, but they are expected to also act on DOM element lists:

$.fn.minhaFuncao = function() {
    // Aqui "this" é um objeto jQuery
    // Pode-se fazer isso:
    return this[0].value; // Retorna o valor do primeiro elemento
    // Ou isso:
    return this.each(function() { 
        this.value = 10; 
    }); // Faz todos elementos terem o valor 10, e retorna o próprio objeto (pra chaining)
};

Answer

Using jQuery in arbitrary object lists is complicated, as it would mix incompatible data types. If you wanted to deal with date lists (or worse: isolated dates) all original jQuery functions could be called on those dates (causing errors as they are different types) and similarly the new functions you create could also be called in the DOM element lists (idem).

Mix the two, so it’s not a good idea... I don’t know a generalized solution to do this for "type A lists," but there are libraries like Underscore.js using a concept similar to that of jQuery (do wrap on an object to introduce its own functions, including with chaining) to accomplish its specific purposes.

If the question is adding methods to individual elements of a kind, just touch your prototype:

Date.prototype.formatarData = function() {
    // "this" aqui é um objeto Date
}

var agora = new Date();
agora.formatarData(); // Chama seu método num objeto com a data atual

Some consider this bad practice (myself, for example) by "polluting the namespace", but used as moderation and care can be a good option...

Answer 2

A syntax to create a new plugin that is in the documentation so jQuery is:

$.fn.esverdear = function() {
    this.css( "color", "green" );
};

$("a").esverdear(); // Muda a cor de todos os elementos para verde.

To work a URL could for example do as I put it below. Note that return a jQuery object (i.e. with wrapper $()) is important to be able to associate other methods such as .each() in the example:

var url = 'http://server/path/program?foo=bar&animal=gato';

$.fn.abrirURL = function (url) {
    var regex = /[?&;](.+?)=([^&;]+)/g;
    var match;
    params = [];
    if (url) {
        while (match = regex.exec(url)) {
            var param = {};
            param[match[1]] = decodeURIComponent(match[2]);
            params.push(param);
        }
        return $(params);
    }
};

$.fn.abrirURL(url).each(function () {
    console.log(this)
});

// Isto vai dar:
// Object {foo: "bar"} 
// Object {animal: "gato"} 

Example

Answer 3

If I understand correctly, you are wanting to create a function to format a date through JQuery. If that’s it, you can do it like this:

(function( $ ){
   $.fn.formatadata = function() {          
      //formata a data
   }; 
})( jQuery );

$('.data').formatadata();

You can read more about on How to Create a Basic Plugin