Ajouter ses propres fonctions à jQuery avec $.fn.extend

Le sélecteur jQuery retourne systématiquement un objet jQuery, doté de toutes les fonctions qu'offre le framework jQuery. Mais il est possible d'ajouter ses propres fonctions dont vont hériter tous les objets jQuery, grâce à la fonction jQuery.fn.extend.

Voici un petit exemple où on ajoute une fonction alertContent à tous les objets jQuery :

jQuery(document).ready(function($){
	$.fn.extend({
		alertContent: function(){
			alert("contenu: " + $(this).text());
		}
	});

	$('#test').alertContent();
});

La fonction alertContent affiche le contenu de l'élément dans une alert javascript. On accède à l'objet retourné par le sélecteur via la variable this, comme toujours en Javascript (c'est la référence vers l'objet courant). L'avantage de cette technique est qu'elle permet de rendre le code plus lisible et en accord avec le style de programmation propre à jQuery, où on commence par sélectionner un objet avec un sélecteur, avant de lui appliquer une ou plusieurs fonctions (avec le chainage de méthodes).

Allez donc jeter un oeil sur cette page : défusionner des cellules excel.

Différence entre jQuery.extend et jQuery.fn.extend

Il ne faut pas confondre la fonction fn.extend avec la fonction extend :

• La fonction fn.extend sert comme on vient de le voir à enrichir le prototype de l'objet jQuery
• La fonction extend sert quant à elle à fusionner 2 objets Javascript, c'est en quelque sorte un équivalent de la fonction array_merge en PHP

Fini de lire cette page ? allez faire un tour ici : zombie sans tête, ça peut vous intéresser.