Introduction à jQuery

Introduction

jQuery est une bibliothèque, ou un framework, probablement l’un des plus utilisés par les développeurs, et qui permet de gérer vos pages côté client (effets dynamiques et autres effets visuels...), sur le front-end, ce que voit l’utilisateur dans les navigateurs au final.

Puissant et flexible comme JavaScript, jQuery met à votre disposition une pléthore de fonctions intégrées. Là où JavaScript et CSS atteindraient leurs limites pour certaines tâches, jQuery y parviendra, et permettra de réaliser simplement des choses comme les animations, la gestion des évènements et l’utilisation des processus asynchrones (Ajax).

Pour suivre ce chapitre, il est recommandé d’avoir acquis les bases du langage JavaScript et des notions de CSS. N’hésitez pas à parcourir les chapitres précédents si vous ne vous sentez pas encore à l’aise avec ces langages.

Sélectionner des éléments

Il existe de nombreuses façons de sélectionner un élément dans votre document HTML, souvenez-vous qu’une page HTML est composée hiérarchiquement, l’élément le plus haut est le parent, composé lui-même d’enfants, qui deviennent à leur tour parent de leurs enfants, etc. Cette notion de hiérarchie est très importante.

1. Relation parent enfant

Dans votre page, chaque élément enfant a un parent, et un enfant peut avoir des éléments "frères", par exemple, dans le code HTML suivant :

<div> 
    <p>Ceci est le premier paragraphe</p> 
    <p>Ceci est le deuxième paragraphe</p> 
    <p>Ceci est le troisième paragraphe</p> 
    <span> 
           <p>et un paragraphe dans un span</p> 
    </span> 
</div>
 

Le div est l’élément parent et les paragraphes (p) sont les enfants, le span est aussi un enfant de l’élément div, le dernier paragraphe est un enfant de l’élément span.

On utilise déjà cette notion en CSS pour accéder à un élément afin de changer un style, par exemple :

div p { 
  textDecoration: underline; 
}
 

 Il en sera de même pour accéder aux éléments en jQuery, vous pouvez utiliser la notion de parent-descendant :

$("div p")
 

L’affichage du code HTML ci-dessus rendrait à l’écran :

 Ajoutez un peu de code jQuery, simplement pour démontrer l’accès hiérarchique aux éléments :

<script src = 'https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js'> 
</script>  
 
<div> 
    <p>Ceci est le premier paragraphe</p> 
    <p>Ceci est le deuxième paragraphe</p> 
    <p>Ceci est le troisième paragraphe</p> 
    <span> 
          <p>et un paragraphe dans un span</p> 
....</span> ...

Utilisation des méthodes jQuery

Le chapitre précédent vous a montré comment atteindre les éléments de vos pages HTML, maintenant, comme le permettait JavaScript, on va utiliser les fonctionnalités de jQuery pour donner vie aux pages.

Les fonctions sont appelées des méthodes, et c’est ce que l’on va voir dans les paragraphes suivants.

Peut-être l’avez-vous remarqué à la section Sélectionner des éléments, vous avez utilisé une méthode jQuery : css(). Cette fonction permet simplement d’attribuer des styles aux éléments du DOM, c’est ce que vous allez découvrir dans un premier temps.

1. Manipuler le contenu du document

Voici ci-dessous une liste de méthodes qui permettent de modifier du texte, les couleurs, la taille de la police utilisée, la dissimulation de certaines parties du document, etc.

a. .html()

Cette méthode remplace le contenu HTML de la page ou d’une partie de la page (un identifiant, une classe, etc.), regardez cet exemple :

<script src = 'https://ajax.aspnetcdn.com/ajax/jQuery/ 
jquery-3.3.1.js'> 
</script>  
 
<div> 
    <p id="p1">Ceci est le premier paragraphe</p> 
    <p id="p2">Ceci est le deuxième paragraphe</p> 
    <p id="p3">Ceci est le troisième paragraphe</p> 
</div> 
 
<script>  
    $("#p1").html("<span>on a ajoute un span dans le premier  
paragraphe</span>"); 
</script>
 

Ce qui donne à l’écran :

L’appel de la méthode html() sur l’identifiant id="p1" a remplacé le contenu de ce paragraphe par le code qui est placé dans les parenthèses de la fonction. Vous voyez dans la console de Google Chrome à droite, que l’on a bien un élément span dans le premier paragraphe (voir encadré rouge). Seul l’intérieur du paragraphe a été remplacé, pas le paragraphe lui-même.

b. .replaceWith()

Cette méthode est identique à html(), mais elle remplace non seulement le contenu de l’élément, mais aussi l’élément...