Tutorial JQuery

JQuery est un framework JavaScript. il s'appuie sur CSS pour détecter des objets dans la page et leur associer des traitements.

I. Installation

Vous avez juste à télécharger le code javascript à partir du site officiel : http://jquery.com/. Insérer dans l'en-tête de votre page web le code suivant si vous avez sauvegardé votre fichier jquery.js:

<script type="text/javascript" src="jquery.js"></script>

Exécuter un code au chargement d'une page

<script type="text/javascript">
  $(document).ready( 
     function() {
       alert( "ok" ); 
     }
  );
</script>

La fonction associée à la méthode ready sera exécutée lors du chargement du document uniquement.

II. Principe

JQuery fonctionne selon la syntaxe $( selecteur de balise ).méthode. Le sélecteur s'appuie sur la syntaxe CSS 3. Les méthodes sont liées au type d'objets trouvé par le sélecteur. Parmi les méthodes, nous aurons les événéments utilisateurs. Par exemple l'activation par onclick devient une méthode click. On associe à des événéments utilisateur une fonction de traitement de l'événement, elle aura en argument l'événément event dont on peut inhiber l'activation sur l'objet final par event.preventDefault(). Deux sélecteurs spéciaux document (tout) et this pour l'objet courant.

Exemples de sélecteur :

- #monId : un identifiant monId
- div p : Tous les descendant p de div
- div > p : Tous les enfants p de div
- p:last : Le dernier p

On peut utiliser la fonction find pour tous les descendants, each sert à faire un traitement pour chaque élément trouvé.

<script type="text/javascript">
 $(document).ready( 
 function() {
  $( "#test1" ).find( "div" ).each( function( occ ) {
   $( this ).append( "Hello " + occ ); 
   } );
 }
 );
 </script>

Nous avons dans notre exemple utilisé la fonction append pour ajouter un texte, mais il est également possible d'affecter ou de lire un code HTML associé à un élément par la fonction html.

Exemple d'action utilisateur

 function activerLien() { 
 $("a#monLien").click( 
  function( event ) {
   alert( "OK" );
   event.preventDefault();
  } 
 );
 }
$(document).ready = activerLien();

Lorsque le lien est activé, la fonction activerLien est invoquée et déclenche un popup.

>> DEMO : Mon lien

III. Gestion du CSS

Ajout / Suppression d'une classe CSS

Grâce aux méthodes addClass et removeClass il est possible d'affecter ou de supprimer une class CSS d'un objet.

<style type="text/css">
 .rouge {
 color:red; 
 }
</style>

<div id="test2">Changer la couleur en cliquant</div>

<script type="text/javascript">		
		var flip1 = false;
	
		$(document).ready( 
			function() {
				$("#test2").click(
					function() {
						if ( !flip1 ) {
							$(this).addClass( "rouge" );
						} else {
							$(this).removeClass( "rouge" );
						}
						flip1 = !flip1;
					} );
			}
		);
</script>

 <script type="text/javascript">
 $(document).ready(
 function() {
  $( "#test2 > p:last" ).css( "font-style", "italic" ).css( "font-weight", "bold" );
 // ( $( "#test2 > p:last" ).css( "font-style" ) ); 
 }
 );
 </script>

IV. Effets spéciaux

Principe

Les effets sont des formes d'animation d'un objet respectivement lié à différents états comme show et hide. Parmi les effets nous avons "slow" et "fast" pour un affichage progressif lent ou progressif rapide. Il est également possible de passer une fonction callback en fin d'animation.

Exemple show / hide

<input type="button" value="Test" id="test3" />
<div id="test3b" style="background-color:blue;color:white;display:none;padding:5px;">
Bienvenu sur JQuery !!!!</div>
<div id="test3c" style="background-color:red;color:white;display:none;padding:5px;">
Bienvenu sur JQuery !!!!</div>

<script type="text/javascript">
       var flip1 = false;
   
       $(document).ready( 
       function() {
       $("#test3").click(
       function() {
       if ( !flip1 ) {
       $( "#test3b" ).show( "slow", function() { $( "#test3c" ).show( "slow" ) } ); 
       } else {
       $( "#test3c" ).hide( "slow", function() { $( "#test3b" ).hide( "slow" ) } ); 
       }
       flip1 = !flip1;
       }
       ); 
       }
       );
   </script>

Dans cet exemple, nous affichons le premier bloc puis un deuxième grâce au callback passé en argument. Et inversement pour masquer.

>> DEMO :