À titre de référence, voici une liste rapide de certaines équivalences entre les deux librairies :
1. Initialisation au chargement de la page
1. // prototype
2. Event.observe(window, 'load', onLoadFunction );
3.
4. // jQuery
5. $(document).ready( onLoadFunction );
2. Attacher une fonction à un événement
1. // prototype
2. Event.observe('buttonId', 'click',
3. function() {
4. // implement...
5. }
6. );
7.
8. // jQuery
9. $('#buttonId').click(
10. function() {
11. // implement...
12. }
13. );
3. Cacher / Montrer un élément
1. // prototype
2. $('divId').show();
3. $('divId').hide();
4.
5. // jQuery
6. $('#divId').show();
7. $('#divId').hide();
4. Mettre à jour le contenu HTML
1. // prototype
2. $('divId').update('Lorem ipsum dolor sit amet...');
3.
4. // jQuery
5. $('#divId').html('consectetur adipiscing elit');
5. Effets visuels
1. // prototype, à l'aide de script.aculo.us
2. Effect.SlideUp('divId');
3.
4. // jQuery
5. $('#divId').slideUp("slow");
6. Avorter un événement
1. // prototype
2. Event.stop(e)
3.
4. // jQuery
5. e.preventDefault();
7. Ajouter une classe CSS
1. // prototype
2. $('a').addClassName('link');
3.
4. // jQuery
5. $('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 :
1. $('#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 :
1. jQuery.noConflict();
2. jQuery('#divName').hide();
3.
4. ou
5.
6. // créer une référence dans une variable
7. $j = jQuery.noConflict();
8. $j('#divName').hide();
Pour voir l'article original
1 commentaire