skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

lundi 23 février 2009

Équivalences prototype vs jQuery

Publié par Infinite Loop, à 19 h 11 0 commentaire

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.


Tags: JavaScript

0 réponse à "Équivalences prototype vs jQuery"


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ▼  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (37)
      • ▼  février 2009 (32)
        • Débuter avec Smarty
        • Excuses de programmeurs
        • Ajouter les numéros de lignes dans du code source
        • 12 étapes vers un meilleur code ?
        • Décompiler un fichier d'aide CHM
        • Équivalences prototype vs jQuery
        • Afficher une date en français avec PHP
        • Citation no. 18 sur la relation de couple
        • Comparer des versions de fichiers
        • Apprendre le Zend Framework
        • The Pragmatic Programmer
        • Lecture un fichier séquentiel avec Perl
        • Variables de Perl et de PHP
        • Redimensionner une image avec GD
        • Output buffering de PHP
        • Citation no. 17 sur Linux et Windows
        • Convertir des m4a en mp3
        • Configuration de base de TinyMCE
        • RTE gratuits à découvrir
        • Manipuler des mesures avec Zend_Measure
        • Monty Python influence l'informatique
        • Refuser l'accès à certains fichiers avec .htaccess
        • Citation no. 16 sur le travail
        • Jukebox touchscreen
        • Débuter avec SQLite et PHP
        • Regular Expressions (Regexp)
        • Compteur de caractères facile avec Prototype
        • Renommer la corbeille de Windows XP
        • Quota d'espace sur PostgreSQL
        • Fonction pgSQL avec %rowtype
        • Vider une table dans PostgreSQL
        • Citation no. 15 sur les étudiants
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft