Aller plus loin avec jQuery

Écrire un plug-in basique

Il existe plusieurs façons de créer de nouvelles méthodes au sein de la bibliothèque jQuery. Toutes enrichissent le prototype jQuery nommé $.fn.

Une de ces méthodes consiste simplement à nommer et à définir les méthodes directement sur le prototype, par exemple :

$.fn.maFonctionExemple = function (mesParametres) {monCode...}; 

Une autre manière de faire consiste à utiliser la méthode .extend() du prototype jQuery $.fn. Cette méthode accepte en paramètre un objet qui possède, en propriétés, les fonctions à ajouter comme méthodes à la bibliothèque. Celles-ci deviennent alors disponibles et exécutables sur l’ensemble des éléments retournés par le sélecteur sur lequel on les applique.

Enfin, il est aussi possible d’étendre la bibliothèque jQuery en utilisant la méthode .extend() de jQuery cette fois. Cette méthode permet d’étendre un objet passé en premier paramètre avec les fonctionnalités de l’objet passé en deuxième paramètre. Si nous lui passons en paramètres le prototype $.fn et un objet dont les propriétés sont la ou les méthodes à ajouter à la bibliothèque, celle-ci s’en trouve enrichie.

Exemple :

$.extend($.fn, {maFonction: function (){Le code de la fonction...}; 
autreFonction: function (params){le code de l'autre fonction...}}); 

Exemple utilisant l’autre syntaxe :

jQuery.extend(jQuery.fn, {maFonction: function (){Le code de la 
fonction...}; autreFonction: function (params){le code de l'autre 
fonction...}}); 

Quelle que soit la technique utilisée pour étendre jQuery, à l’intérieur de ces nouvelles méthodes, le contexte représenté par la variable this correspond aux éléments ramenés par le sélecteur, ce qui permet d’interagir directement avec eux.

Imaginons une méthode appelée .coloriser(), qui change la couleur de fond de tous les éléments ramenés par un sélecteur quelconque.

function coloriser(couleur) 
{ 
     this.each(e =>...