Framework JQuery pour écrire du Javascript non-intrusif

Les bases de chez base

Introduction très rapide à jQuery et aux concepts nécessaires pour aller plus loin. Très librement inspiré de How jQuery Works de John Resig, créateur de la library.

1. Prêt, pas prêt ?

   Pour éviter de lancer du code alors que le document n’est pas prêt, la déclaration suivante est votre amie :

   $(document).ready(function(){
       // Placez votre code ici (enlevez quand même les deux slashes !)
     });

2. Déclencher quelque chose sur un clic

   La première chose que je vous propose est d’afficher un alert() chaque fois qu’un lien est cliqué :

   $("a").click(function(){
       alert("Merci de votre visite !");
   });

3. Ajouter une classe CSS

   Ajouter ou enlever une classe à un élément est une tâche très courante : $(« a »).addClass(« test »);.

   Utilisez removeClass() pour enlever une classe.

4. Effets spéciaux

   jQuery fournit quelques effets pratiques pour réveiller votre site :

   $("a").click(function() {
       $(this).hide("slow");
       return false;
   });

   Maintenant, lorsque vous cliquez sur un lien, il devrait disparaitre lentement.

5. Chainabilité (Toute la magie de jQuery)

   jQuery utilise un concept intéressant pour un code simple et court. Chaque méthode dans jQuery retourne l’objet lui-même, vous autorisant à l’enchaîner à son tour à une autre méthode : $(« a »).addClass(« test »).show().html(« foo »);.

Mais le plus important, c’est le côté non-intrusif du code : toutes les fonctions présentées dans ce tutoriel sur jQuery sont placés dans un fichier externe.

C’est un peu court, oui je sais 😉

Quelques liens si vous êtes pressés d’aller voir ce que l’animal a dans le ventre :

• Page principale de la documentation jQuery
• Palanquée de tutoriels sur jQuery
• Documentation visuelle sur jQuery
• 15 jours avec jQuery : tutoriels, astuces, actualités
• Tutoriels en français

Déjà revenus ? Pas encore parti ? Entrons dans le vif du sujet.

*Utiliser jQuery sous dotclear 1.2.5 ? »*