Équivalences prototype vs jQuery

J'adore travailler avec la librairie JavaScript prototype, mais force est de constater que le framework semble à l'abandon. La dernière version (1.6) remonte à novembre 2007 et mis à part quelques corrections mineures effectuées lors du release 1.6.0.3 (septembre 2008), il n'y a plus aucune trace d'innovations.

C'est pourquoi j'ai décidé de me tourner vers jQuery, une librairie plus légère et performante que son prédécesseur. Des effets visuels sont aussi disponibles, sans faire appel à des librairies externes comme le fait prototype avec scriptaculous.

À titre de référence, voici une liste rapide de certaines équivalences entre les deux librairies :

1. Initialisation au chargement de la page

// prototype
Event.observe(window, 'load', onLoadFunction );
// ou
document.observe('dom:loaded', onLoadFunction );

// jQuery
$(document).ready( onLoadFunction );

2. Attacher une fonction à un événement

// prototype
Event.observe('buttonId', 'click',
 function() {
     // implement...
 }
);

// jQuery
$('#buttonId').click(
 function() {
     // implement...
 }
);

jQuery possède plusieurs événements, dont blur, change, click, dblclick, focus, keydown, keypress, load, submit, unload...

3. Cacher / Montrer un élément

// prototype
$('divId').show();
$('divId').hide();

// jQuery
$('#divId').show();
$('#divId').hide();

4. Mettre à jour le contenu HTML

// prototype
$('divId').update('Lorem ipsum dolor sit amet...');

// jQuery
$('#divId').html('consectetur adipiscing elit');

5. Effets visuels

// prototype, à l'aide de script.aculo.us
Effect.SlideUp('divId');

// jQuery
$('#divId').slideUp("slow");

6. Avorter un événement

// prototype
Event.stop(e)

// jQuery
e.preventDefault();

7. Ajouter une classe CSS

// prototype
$('a').addClassName('link');

// jQuery
$('a').addClass('link');

Chaînabilité

Toutes les fonctions jQuery ont aussi l'avantage de toujours retourner un objet jQuery, donc on peut enchaîner les appels sans problème :

$('#links').find('a.external').addClass('fooclass');

Utiliser jQuery en même temps que prototype

Vous voulez utiliser jQuery simultanément à une autre librairie JavaScript ? Il suffit d'activer le mode sans conflits :

jQuery.noConflict();
jQuery('#divName').hide();

ou

// créer une référence dans une variable
$j = jQuery.noConflict();
$j('#divName').hide();

Et finalement, tout comme prototype, jQuery peut aussi construire des requêtes AJAX. Mais j'en ferai le sujet d'une autre chronique prochainement.