Débuter avec jQuery: découvrir les bases du langage

Introduction: qu'est-ce que jQuery ?

jQuery est une bibliothèque JavaScript visant à développer rapidement et efficacement des scripts dans les pages HTML. Distribué sous licence MIT, jQuery est gratuit et librement téléchargeable sur le site officiel jQuery.

Avec jQuery, il est très simple d'agir sur les éléments du DOM (Document Object Model - éléments de la structure de la page web), créer des animations et effets visuels, interagir avec l'utilisateur, valider des formulaires ou encore effectuer des opérations en arrière plan.

Comment faire pour utiliser jQuery dans ma page web ?

Pour pouvoir utiliser jQuery, il faudra inclure la bibliothèque de la façon suivante:

<!-- Méthode 1: télécharger le fichier jquery (http://jquery.com/download) -->
<script src="/chemin/vers/jQuery.js"></script>

<!-- Méthode 2: utiliser le fichier jquery hébergé par Google -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Puis donner les instructions comme ceci:

<script type="text/javascript">
$( document ).ready(function() {
   /*
   ...
   Instructions jQuery
   ...
   */
});
</script>

Les rudiments du langage jQuery

Toute instruction jQuery commence par un $ suivi d'une parenthèse dans laquelle on retrouve un identifiant qui définira quel élément est concerné par la ou les instructions qui vont suivre. Chaque instruction se termine par un point-virgule.

Les identifiants

Il existe 3 types d'identifiants: les éléments, les id et les classes.

Les identifiants peuvent se combiner de différentes façons pour être à la fois précis et éviter la répétition.

Voici quelques exemples d'identification:

// identification par les types d'éléments (ici tous les éléments <div></div> et <table></table>)
$('div, table')

// identification par les id (ex: <div id="maDiv"></div>)
$('#maDiv')

// identification par les classes (ex: <div classe="maClasse"></div>)
$('.maClasse')  // tous les éléments ayant comme classe "maClasse" (div ou autre)

// Combinaison des identifiants
$('table.maClasse') // Uniquement les tables dont la classe est "maClasse"
$('.maClasse1.maClasse2') // Tous les éléments qui ont comme classe "maClasse1" et "maClasse2" (! pas d'espace entre les classes !)
$('.maClasse1, .maClasse2') // Tous les éléments qui ont comme classe "maClasse1" ou "maClasse2" (! virgule entre les classes !)
$('input:text') // Tous les champs textes du document

Les fonctions de base

La fonction .val()

La fonction .val() récupère la valeur de l'élément sélectionné ou lui assigne une valeur si spécifiée.

var login = $('input#login').val(); //crée la variable "login et lui assigne la valeur récupérée du champ id="login"
$('input#loginCopy').val( login ); // assigne la valeur de "login" au champ id="loginCopy"

La fonction .html()

La fonction .html() récupère le contenu HTML du premier des éléments trouvés. Si une valeur est spécifiée, assigne cette valeur à chaque élément concerné.

var contenuMaDiv1 = $('#maDiv1').html(); // Créé variable "contenuMaDiv1" et assigne le contenu de la div id="maDiv1"
$('#maDiv2').html( contenuMaDiv1 ); // Remplace le contenu de la div id="maDiv2" celui de la div id="maDiv1"

La fonction .css()

La fonction .css() récupère la propriété CSS d'un élément (ex: color). Il est possible de définir une ou plusieurs propriétés de style.

var textColor = $('#maDiv').css('color'); // Crée la variable "textColor" et lui assigne la valeur de la couleur de l'élément id="maDiv"

/************************************************************************
Changement la css de l'élément id="maDiv" coleur du texte en rouge et texte en gras
Les deux instructions sont valides et donnent le même résultat. La seconde est plus simple.
*************************************************************************/
$('#maDiv').css('color','red').css('fontWeight','bold');
$('#maDiv').css({'color':'red','fontWeight':'bold');

La fonction .hover()

La fonction .hover() exécute des instructions lors du survol de l'élément avec la souris et vous permet donc de créer des effets.

/**************************************************************************
Cette fonction va ajouter la classe 'classe1' à chaque lien de votre page
et l'enlever à la fin du survol. Cette classe que vous aurez défini dans
votre fichier CSS permettra par exemple de changer la couleur ou de taille
des caractères.
On peut également imaginer l'application d'un compteur ou l'affichage d'une
page distante dans une modale par exemple.
****************************************************************************/
$('a').hover(
   function(){
      // instructions à effectuer lors du survol
      $(this).addClass('classe1');
   },
   function(){
      // instructions à effectuer lors de la fin du survol
      $(this).removeClass('classe1');
   }
);