Primeros pasos con los complementos de jquery

Encadenamiento

Esto funciona, pero hay un par de cosas que debemos hacer para que nuestro complemento sobreviva en el mundo real. Una de las funciones de jQuery es el encadenamiento, cuando vincula cinco o seis acciones en un selector. Esto se logra haciendo que todos los métodos de objetos jQuery devuelvan el objeto jQuery original nuevamente (hay algunas excepciones: .width() llamado sin parámetros devuelve el ancho del elemento seleccionado y no se puede encadenar). Hacer que nuestro método de complemento se pueda encadenar requiere una línea de código:

$.fn.greenify = function() {
    this.css( "color", "green" );
    // return the reference for chaining
    return this;
}
 
$( "a" ).greenify().addClass( "greenified" );

Instalación o configuración

Los complementos jQuery generalmente se instalan a través de NPM o Yarn (si están alojados allí), o haciendo referencia a un archivo de script externo que contiene el complemento, ya sea desde un directorio relativo o un CDN.

<script type="text/javascript" src="/path/to/plugin.jquery.js"></script>

Complemento básico que cambia el color del texto a verde.

// plugin initialization
$.fn.greenify = function() {
    // within the function you can use any of the jQuery methods
    // and `this` context refers to jQuery object
    this.css( "color", "green" );
};
 
// apply plugin
$( "a" ).greenify(); 

Opciones de soporte con valores predeterminados

Puede hacer que su complemento sea personalizable aceptando opciones.

$.fn.colourize = function(options) {

    // This is one method to support default options
    var style = $.extend({
        color: "green",
        backgroundColor: "white"
    }, options);

    // Set the colours on the current selection based on the option parameters
    return this.css({
        color: style.color,
        backgroundColor: style.backgroundColor
    });
};

Ejemplo de uso:

$("button").colourize({
    color: "orange"
});

El valor predeterminado para la opción de color “verde” se anula con $.extend() para que sea “naranja”.

Estructura típica del complemento jQuery

Si bien escribir complementos de jQuery es simple, queremos encerrar nuestros complementos en un ámbito local. Esto evitará conflictos de espacio de nombres y contaminará el espacio de nombres global, además de garantizar que jQuery se cargue antes de que nuestro complemento lo extienda.

// Encapsulate our plugins in a local scope
(function($) {

    // Plugin definition
    $.fn.colourize = function() {

        // Plugin code

    };

// Pass the jQuery object into our local scope
}(jQuery));

El envoltorio de alcance local se puede omitir en otros ejemplos para mantenerlos simples y concisos.

Usando el método each()

Su objeto jQuery típico contendrá referencias a cualquier cantidad de elementos DOM, y es por eso que los objetos jQuery a menudo se denominan colecciones. Si desea manipular elementos específicos (por ejemplo, obtener un atributo de datos, calcular posiciones específicas), debe usar .each() para recorrer los elementos.

$.fn.myNewPlugin = function() { 
    return this.each(function() {
        // Do something to each element here.
    });
 
    // return the reference for chaining
    return this;
};