jQuery
Complementos

Plugins - Primeros pasos

La API de jQuery se puede ampliar agregando a su prototipo. Por ejemplo, la API existente ya tiene muchas funciones disponibles, como .hide() , .fadeIn() , .hasClass() , etc.

El prototipo jQuery se expone a través de $.fn , el código fuente contiene la línea

jQuery.fn = jQuery.prototype

Agregar funciones a este prototipo permitirá que esas funciones estén disponibles para ser llamadas desde cualquier objeto jQuery construido (lo que se hace implícitamente con cada llamada a jQuery, o cada llamada a $ si lo prefiere).

Un objeto jQuery construido tendrá una matriz interna de elementos en función del selector que se le haya pasado. Por ejemplo, $('.active') construirá un objeto jQuery que contiene elementos con la clase activa, en el momento de la llamada (como en, esto no es un conjunto vivo de elementos).

El valor de this dentro de la función de complemento se referirá al objeto jQuery construido. Como resultado, this se utiliza para representar el conjunto coincidente.

Plugin básico :

$.fn.highlight = function() {
    this.css({ background: "yellow" });
};

// Use example:
$("span").highlight();

Ejemplo de jsFiddle

Encadenamiento y reutilización

A diferencia del ejemplo anterior , se espera que los Complementos de jQuery sean Chainable .
Lo que esto significa es la posibilidad de encadenar múltiples Métodos a una misma Colección de Elementos como $(".warn").append("WARNING! ").css({color:"red"}) (vea cómo usamos el .css() Método .css() después de .append() , ambos métodos se aplican en la misma colección .warn )

Permitir que uno use el mismo complemento en diferentes colecciones, las diferentes opciones de personalización desempeñan un papel importante en la personalización / reutilización

(function($) {
  $.fn.highlight = function( custom ) {

    // Default settings
    var settings = $.extend({
        color : "",              // Default to current text color
        background : "yellow"    // Default to yellow background
    }, custom);

    return this.css({     // `return this` maintains method chainability
        color : settings.color,
        backgroundColor : settings.background
    });

  };
}( jQuery ));


// Use Default settings
$("span").highlight();    // you can chain other methods

// Use Custom settings
$("span").highlight({
    background: "#f00",
    color: "white"
});

demo jsFiddle

Libertad

Los ejemplos anteriores están en el ámbito de la comprensión de la creación básica de complementos. Tenga en cuenta que no debe restringir a un usuario a un conjunto limitado de opciones de personalización.

Digamos, por ejemplo, que desea crear un .highlight() donde pueda pasar una cadena de texto que se destacará y permitir la máxima libertad con respecto a los estilos:

//...
// Default settings
var settings = $.extend({
   text : "",          // text to highlight
   class : "highlight" // reference to CSS class
}, custom);

return this.each(function() {
   // your word highlighting logic here
});
//...

el usuario ahora puede pasar un texto deseado y tener control completo sobre los estilos agregados usando una clase de CSS personalizada:

$("#content").highlight({
    text : "hello",
    class : "makeYellowBig"
});

Ejemplo de jsFiddle

Método jQuery.fn.extend ()

Este método extiende el objeto prototipo jQuery ($ .fn) para proporcionar nuevos métodos personalizados que se pueden encadenar a la función jQuery ().

Por ejemplo:

<div>Hello</div>
<div>World!</div>
 
<script>
jQuery.fn.extend({
  // returns combination of div texts as a result
  getMessage: function() {
    var result;
    // this keyword corresponds result array of jquery selection
    this.each(function() {
        // $(this) corresponds each div element in this loop
        result = result + " " + $(this).val();
    });
    return result;
  }
});
 
// newly created .getMessage() method
var message = $("div").getMessage();

// message = Hello World!
console.log(message); 
</script>