Langage JQuery

Introduction
Syntaxe JQuery
Selections JQuery

Selecteurs basé sur les élements
Selecteurs basé sur l'attribut
Tableau sur les différents selecteurs
Remarque

Actions JQuery
Evenement JQuery

Introduction

JQuery = Javascript Query = Langage de rêquete en Javascript
jQuery est une bibliothèque en JavaScript (fichier .js).
But de jQuery : écrire moins d’instructions pour faire plus d’actions.
Avec jQuery, on peut faire :

La sélection des éléments HTML (img, table, titre).
La manipulation des éléments HTML (affichage, modification).
Utiliser CSS : jQuery respecte la syntaxe du CSS.
Utilisation du DOM (Arbre des objets du navigateur : window, document).
Utilisation de l’outil Ajax :

Permet une flexibilité de la navigation sur la relation client/serveur.

Comment utiliser jQuery dans nos pages web ?

Il faut appeler la bibliothèque jQuery sur la page :

Dans la section Head :

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

La bibliothèque jQuery est disponible gratuitement sur le réseau : il faut la télécharger.
Deux versions du fichier jQuery sont proposées :

jquery.min.js (fichier compressé, non lisible)
jquery.js (fichier lisible et plus lourd)

Syntaxe JQuery

jQuery est basé sur la syntaxe suivante : $(sélecteur).action();

$ indique le langage jQuery.
sélecteur permet la sélection d’un ou plusieurs éléments HTML.
action indique la manipulation demandée sur la sélection d’éléments HTML.

Remarque :

L'instruction jQuery $(sélecteur).action(); peut être imbriquée plusieurs fois pour réaliser la tâche demandée par l’utilisateur.

Exemples d’appels jQuery :

$(".this").hide(); : cacher l’élément de classe test
$("#this").hide(); : cacher l’élément qui a comme ID test.
$("p").hide(); : cacher les éléments paragraphe de la page.

Remarque :

Le script jQuery doit être exécuté après le chargement de la page pour assurer une interprétation correcte de la page.
Pour cela, il faut appeler l’instruction jQuery suivante :

$(document).ready(function(){ code });

Après la lecture du DOM, on exécute le code utilisateur.
Un raccourci offert par jQuery :

$(function(){ code });

Si vous n'avez pas ajouté jquery à votre dossier de travail, cliquez sur télécharger et déplacez-le dans votre dossier de travail.
Vous avez également la possibilité de lier la page au fichier jquery :

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Exemple

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $('div#test').css("color", "red");
    </script>
</head>
    
<body>
    <br>
    <div id="test">Texte en rouge</div>
    <br>
</body>

Problème : Le texte du div n’est pas affiché en rouge.

Le navigateur a interprété le code utilisateur avant le changement.

Solution : Mettre le code utilisateur entre $(function() { ... });
Le script utilisateur (ex) devient :

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(function(){
            $('div#test').css("color", "red");
        });
    </script>
</head>

<body>
    <br/>
    <div id="test">Texte en rouge</div>
    <br/>
</body>

Remarque : $(function() { ... }); est une version abrégée de $(document).ready(function() { ... });.

Selections JQuery

jQuery est basé sur la syntaxe suivante :
- $(selecteur).action(paramètres)
Explications :
- selecteur: pour sélectionner les éléments
- action : pour appliquer un traitement sur les éléments sélectionnés
Deux types de sélecteurs :
1. Sélecteurs basés sur les éléments
2. Sélecteurs basés sur les attributs

Selecteurs basé sur les élements

Sélecteurs basés sur l'attribut ou l'élément

Le type d'élément: p, img, h1, div, etc...

Exemple : $(p).action(paramètres);

La classe d'élément:

Exemple : $(.intro).action(paramètres);: Selectionner les éléments qui ont comme classe info
$(p.intro).action(paramètres);: Selectionner les paragraphes qui ont comme classe info

L'ID d'élément:

Exemple : $(#intro).action(paramètres);: Selectionner les éléments qui ont comme id info
$(p#intro).action(paramètres);: Selectionner les paragraphes qui ont comme id info

Sélecteurs basés sur les attributs

Pour utiliser l'attribut dans la sélection, il faut mettre le nom de l'attribut entre crochets : $[ ... ]$
On peut également utiliser la valeur de l'attribut dans la sélection.
Exemple :

Sélection des éléments qui ont comme attribut href.
$("[href]").action(paramètres);
Sélection des éléments qui ont un attribut href qui vaut '#'.
$("[href ='#']").action(paramètres);
Sélection des éléments qui ont comme attribut href où la valeur est différente de 'h'.
$("[href !='#']").action(paramètres);
Sélection des éléments qui ont un attribut href qui se termine par ".gif"
$("[href$='.gif']").action(paramètres);

Tableau sur les différents selecteurs

Sélecteur	Description
$*$	Tous les éléments
$ \#id$	L'élément qui a comme ID
$.nom$	Les éléments qui ont comme classe $\text{nom}$
$\text{nomÉlément}$	Les éléments du type $\text{nomÉlément}$
$:first$	Le premier élément
$:last$	Le dernier élément
$:even$	Les éléments pairs (indices $0, 2, 4, \ldots$)
$:odd$	Les éléments impairs (indices $1, 3, 5, \ldots$)
$:eq(index)$	L'élément d'indice $\text{index}$
$:gt(nb)$	Les éléments avec un indice plus grand que $\text{nb}$
$:lt(nb)$	Les éléments avec un indice plus petit que $\text{nb}$
$:header$	Les éléments de type en-tête ($<h1>, <h2>, \ldots$)
$[attr]$	Les éléments qui ont l'attribut $\text{attr}$
$[attr = v]$	Les éléments où $\text{attr = v}$
$[attr != v]$	Les éléments où $\text{attr} \neq v$
$[attr]$ ^$= v]$	Les éléments où l'attribut $\text{attr}$ commence par $\text{v}$
$[attr]$ $$= v]$	Les éléments où l'attribut $\text{attr}$ se termine par $\text{v}$
$:text$	Les champs de saisie texte d'une ligne
$:password$	Les champs de saisie de type mot de passe
$:radio$	Les boutons radio
$:checkbox$	Les cases à cocher
$:submit$	Les boutons de validation ($\text{submit}$)
$:reset$	Les boutons de réinitialisation ($\text{reset}$)

Remarque

L'instruction jQuery $(sélecteur).action(paramètres); peut être utilisée dans une forme imbriquée.
L'imbrication peut être dans le sélecteur.
$($(sélecteur).action(paramètres)).action(paramètres);
Exemple :

$($("p.intro").hide()).css("background-color", "yellow");

Description : Chaque élément de type paragraphe avec la classe intro est caché, puis le sélecteur imbriqué est utilisé pour changer le couleur de fond de ces éléments.

L'imbrication peut être au niveau de l'action.
$(sélecteur).action($(sélecteur).action(paramètres));
Exemple :

$("p").css("color", $("h1").css("color"));

Description : La couleur des paragraphes est modifiée pour correspondre à la couleur du texte de l’en-tête h1.

Exemple : Colorer une partie <div> par une couleur liée d'une zone de texte input.

$(function(){
    $('input#b1').click(function(){
        $('div#contenu').css("color", $('input#zonetexte').val());
    });
});

Actions JQuery

L'instruction JQuery :

$(sélecteur).action(paramètres);

action() : Manipulation réalisée par l'utilisateur sur le sélecteur
Plusieurs types de manipulation :
- Modifier le contenu d'un élément
- Modifier la valeur d'un objet
- Manipuler du CSS (mise en forme sur l'élément)
- Insérer, modifier ou supprimer un élément ou un attribut
- Plusieurs actions offertes par jQuery

Action	Description
.html(…)	Modifie un contenu par un autre élément HTML
.val()	Permet de récupérer la valeur d'un objet HTML
.val(v)	Remplace la valeur de $\text{val}$ par $v$
.addClass(…)	Ajoute une classe CSS à l'élément HTML
.removeClass(…)	Supprime une classe d'un élément
.toggleClass(…)	Ajoute la classe si absente et la supprime si présente
.css(prop, val)	Applique un paramétrage CSS à l'élément sélectionné
.append(…)	Insère un contenu après le contenu précédent
.replaceWith(…)	Remplace un élément par un autre élément
.remove(…)	Supprime un élément
.attr(…)	Ajoute un attribut à l'élément
.removeAttr(…)	Supprime un attribut de l'élément
.toggleAttr(…)	Ajoute l'attribut s'il est absent et le supprime s'il est présent

Exemples

.html(...)

Code : $("#div1").html("<p>Texte modifié</p>");
Explication : Remplace le contenu de l’élément avec l’ID div1 par un paragraphe.

.val()

Code : $("#input1").val();
Explication : Récupère la valeur de l’élément input1.

.val(v)

Code : $("#input1").val("Nouvelle valeur");
Explication : Définit la valeur de l'attribut value d’élément input1 à “Nouvelle valeur”.

.addClass(…)

Code : $("#paragraphe").addClass("highlight");
Explication : Ajoute la classe CSS highlight à l’élément paragraphe.

.removeClass(…)

Code : $("#paragraphe").removeClass("highlight");
Explication : Supprime la classe CSS highlight de l’élément paragraphe.

.toggleClass(…)

Code : $("#paragraphe").toggleClass("highlight");
Explication : Si l’élément ne possède pas la classe highlight, celle-ci est ajoutée, si non celle-ci est supprimée.

.css(prop, val)

Code : $("#paragraphe").css("color", "blue");
Explication : Applique la couleur bleue au texte de l’élément paragraphe.

.append(…)

Code : $("#liste").append("<li>Nouvel élément</li>");
Explication : Ajoute un nouvel élément de liste à la fin de la liste liste.

.replaceWith(…)

Code : <$("#titre").replaceWith("<h2>Nouveau titre</h2>");/Li>
Explication : Remplace l’élément titre par un titre de niveau 2.

.remove(…)

Code : $("#paragraphe").remove();
Explication : Supprime l’élément paragraphe de la page.

.attr(…)

Code : $("#image").attr("alt", "Description de l'image");
Explication : Ajoute un attribut alt avec la valeur “Description de l’image” à l’élément image.

.removeAttr(…)

Code : $("#image").removeAttr("alt");
Explication : Supprime l’attribut alt de l’élément image.

.toggleAttr(…)

Code : $("#checkbox").toggleAttr("checked");
Explication : Ajoute ou supprime l’attribut checked sur l’élément checkbox en fonction de son état actuel.

Evenement JQuery

Remarque : $("sélecteur").action(function() { /* Fonction de JavaScript */ });
Une action en jQuery peut inclure des instructions JavaScript définies par l’utilisateur. Cela permet d’exécuter du code personnalisé en réponse à un événement.
Exemple :

$("img").click(function() { alert("clic sur l'image"); });

alert(" ") : est une méthode prédéfinie de l'objet window. Elle permet d'afficher une boîte de dialogue.
Événement : Manipulation de l'utilisateur sur la page.

Lors d'un événement, on peut lancer l'exécution d'un script jQuery.
L'événement est appelé comme une action en jQuery :

$(sélecteur).action()
$(sélecteur).événement()

Plusieurs types d'événements :

Événements liés à la souris :

Événement	Description
`click()`	Clique de souris sur l'élément.
`dblclick()`	Double clic de souris sur l'élément.
`mouseenter()`	Passage de la souris sur l'élément.
`mouseleave()`	La souris quitte l'élément.
`mousedown()`	Maintien du clic sur l'élément.
`mouseup()`	Relâchement du clic sur l'élément.
`mousemove()`	Déplacement de la souris sur l'élément.
`scroll()`	Souris sur la barre de défilement.

Événements liés au clavier :

Événement	Description
`keydown()`	Appui sur une touche clavier sur l'élément.
`keyup()`	Relâchement de la touche clavier sur l'élément.
`keypress()`	Maintien de l'appui sur une touche sur l'élément.

Autres événements :

Événement	Description
`focus()`	Lorsque l'élément est en premier plan.
`blur()`	Lorsque l'élément perd le focus.
`change()`	Lorsque l'on modifie un élément.
`load()`	Chargement d'un élément.

Sélecteur	Description
\(*\)	Tous les éléments
\( \#id\)	L'élément qui a comme ID
\(.nom\)	Les éléments qui ont comme classe \(\text{nom}\)
\(\text{nomÉlément}\)	Les éléments du type \(\text{nomÉlément}\)
\(:first\)	Le premier élément
\(:last\)	Le dernier élément
\(:even\)	Les éléments pairs (indices \(0, 2, 4, \ldots\))
\(:odd\)	Les éléments impairs (indices \(1, 3, 5, \ldots\))
\(:eq(index)\)	L'élément d'indice \(\text{index}\)
\(:gt(nb)\)	Les éléments avec un indice plus grand que \(\text{nb}\)
\(:lt(nb)\)	Les éléments avec un indice plus petit que \(\text{nb}\)
\(:header\)	Les éléments de type en-tête (\(<h1>, <h2>, \ldots\))
\([attr]\)	Les éléments qui ont l'attribut \(\text{attr}\)
\([attr = v]\)	Les éléments où \(\text{attr = v}\)
\([attr != v]\)	Les éléments où \(\text{attr} \neq v\)
\([attr]\) ^\(= v]\)	Les éléments où l'attribut \(\text{attr}\) commence par \(\text{v}\)
\([attr]\) \($= v]\)	Les éléments où l'attribut \(\text{attr}\) se termine par \(\text{v}\)
\(:text\)	Les champs de saisie texte d'une ligne
\(:password\)	Les champs de saisie de type mot de passe
\(:radio\)	Les boutons radio
\(:checkbox\)	Les cases à cocher
\(:submit\)	Les boutons de validation (\(\text{submit}\))
\(:reset\)	Les boutons de réinitialisation (\(\text{reset}\))