Petite synthèse
jQuery

Maj le 13/04/2023 par Gildas P.

jQuery est une librairie Javascript qui va vous donner plein d'outils pour ajouter de l'interactivité dans une page web.

Installation

- télécharger la librairie (ou utiliser mon template de site vierge, avec jquery déjà installé)

- placer le fichier js dans le dossier js/

- déclarer le fichier js à la fin de votre page html :

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

- c'est bon, vous pouvez utiliser jQuery dans votre fichier .js personnel !

En réalité vous aurez donc un autre fichier js (le vôtre), voire plusieurs extensions de jQuery.
Dans ce cas en bas de page html on indique :

- jquery en premier (!)
- ensuite les extensions de jQuery
- en dernier votre script.js, qui a besoin que les autres fichiers soient lus pour fonctionner

<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery.transit.min.js"></script>
<script type="text/javascript" src="js/jquery.easyDrag.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Syntaxe de base

jQuery c'est la fonction $() ou jQuery() - c'est la même chose, mais $() c'est plus court !

Une phrase jQuery c'est toujours :

$(cible).action(paramètres);

et plus spécifiquement :

$('selecteur css').action(paramètres);

On utilise les mêmes sélecteurs css que dans une feuille de style, avec des guillemets autour (pour indiquer que c'est juste une chaine de caractères, pas des noms de variables à aller chercher en mémoire).

; sert à conclure la phrase
() sert à indiquer "exécute cette fonction"
. articule le sélecteur jQuery et l'action
, sert à séparer 2 paramètres
: sert à séparer propriété et valeur, comme en css
{} sert à délimiter un bloc de données ou de code
// sert à écrire un commentaire
/*... */ sert à passer plusieurs lignes en commentaire

Quelques exemples :

$('nav').hide(); // pas de paramètre $('nav').hide(600); // 1 paramètre, ici la durée de l'animation $('nav').css('color', 'white'); // 2 paramètres séparés par une virgule

$('nav').css({'color':'white', 'font-size':'12px'}); // 1 paramètre délimité par {}
entre les {} on indique autant de couples 'nom-de-propriété':'valeur' qu'on le souhaite.

Rappel des sélecteurs css

Il y a déjà une synthèse détaillée ici !
https://etu.gildasp.fr/mpro2022/les-codes-du-prof/synthese%20raccourcis%20et%20balises/#selecteurs-css

$('article') // sélectionne toutes les balises html <article>

$('.article') // sélectionne les balises (quelles qu'elles soient) 
qui ont la CLASSE article, du genre <div class="article">

$('#article') // sélectionne les balises (quelles qu'elles soient) 
qui ont l'IDENTIFIANT article, du genre <div id="article">

On peut (on doit) faire des phrases pour être plus précis, en partant du parent pour aller jusqu'aux enfants qu'on souhaite cibler :

$('section article') // les <article> qui sont dans une <section> (mais pas les autres)

$('#portfolio article') // les <article> qui sont dans une balise 
qui a l'IDENTIFIANT portfolio (mais pas les autres), 
ex : <section id="portfolio"><article>...</article></section>

Si les mots sont accolés ça ne signifie pas la même chose :

$('article#portfolio') // c'est l'article qui à l'identifiant portfolio : <article id="portfolio">

Pas d'espace signifie : "la balise qui a à la fois toutes les spécifs demandées" - ce n'est donc pas un chemin parent→enfant

Quelques fonctions jQuery

Remarque : je vais écrire $(...) pour raccourcir, mais on doit bien faire $('mon-sélecteur') à chaque fois

Fonctions d'animations de base :

$(...).hide(); $(...).show(); $(...).toggle(); // affiche / masquer / afficher ou masquer $(...).fadeOut(); $(...).fadeIn(); $(...).fadeToggle(); // pareil mais en fondu d'opacité $(...).slideOut(); $(...).slideIn(); $(...).slideToggle(); // pareil mais en mode "volet roulant" $(...).hide(); // masque instantanément $(...).hide(600); // masque après une animation de 600 millisecondes = 0.6 secondes

Modifier le css d'un élément :

$(...).css({
    'propriété1' : 'valeur1', // ne pas oublier la virgule 
    'propriété2' : 'valeur2',
    'propriété3' : 'valeur3'
});

La modification sera instantannée.

Animation avancée / modif de css animée :

Je vous recommande d'utiliser la librairie transitCSS3, qui ajoute la fonction $(...).transition({...}).

La fonction fonctionne comme $(...).css(...) mais permet d'animer la modification de css, d'ajouter des effets d'accélération, etc.

La librairie va même améliorer la fonction css() de base, pour lui permettre de piloter des effets 3d, etc : https://ricostacruz.com/jquery.transit/

(La librairie est déjà présente dan le template de site vierge à votre disposition, je m'en sers sur tous mes projets).

Par ailleurs on va pouvoir indiquer la durée de la transition, le easing à utiliser, voire exécuter un autre bout de côde une fois l'animation terminée :

$('...').transition(
    {'background-color':'red', 'font-size':'20px'}, // les modifs à faire en css
    600, // durée de l'animation en millisecondes
    'easeOutBack', // effet d'accélération à utiliser, ici rebond
    function(){
    // du code a exécuter à la fin de l'animation
    }
);

Tout ça est détaillé sur la page de la librairie.

On peut à tout moment interrompre une animation avec $(...).stop()

C'est aussi valable pour les fonctions listées plus haut : hide(), show(), fadeIn(), slideUp(), etc

Pour arrêter les éventuelles animations en cours sur un élément, on peut donc vider la file d'attente, AVANT de lancer une nouvelle animation :

$(...).stop().transition({...});

Modifier les classes CSS des balises HTML

$(...).addClass('maclasse'); // ajoute la classe à l'élément $(...).removeClass('maclasse'); // retire la classe à l'élément (si elle était présente) $(...).toggleClass('maclasse'); // retire ou ajoute la classe suivant qu'elle était présente ou non

Insérer du texte/code dans un élément

$(...).append("Une longue phrase ou du code html"); // ajoute à la fin de l'élement $(...).prepend("Une longue phrase ou du code html"); // ajoute au début de l'élement $(...).after("Une longue phrase ou du code html"); // ajoute après l'élement $(...).before("Une longue phrase ou du code html"); // ajoute avant l'élement $(...).text("Mon texte"); // remplace le contenu texte de l'élément $(...).html("Mon texte <br>avec du html dedans"); // remplace le contenu html de l'élément

Accessoirement on peut vider un élément (c'est à dire supprimer tous ses enfants) :

$(...).empty();

A ne pas confondre avec :

$(...).remove(); // supprime l'élément et tous ses enfants avec

Data html

On peut cacher des données dans le code html :

<div id="truc" data-test="yeah">...</div>

L'attribut data-test est valide, et accessible avec jQuery comme ceci :

$('#truc').data('test'); data-test côté html → $(...).data('test') côté js data-bidule côté html → $(...).data('bidule') côté js data-machin côté html → $(...).data('machin') côté js

etc

Accéder/modifier un attribut html

Un attribut html c'est tout ce qui se trouve DANS la balise après le nom de la balise :

<img src="img/img1.jpg" alt="texte de remplacement">

Ici on a 2 attributs : src et alt

Lire l'attribut :

$('img').attr('src');

Modifier l'attribut :

$('img').attr('src', 'img/img2.jpg'); // modifie l'attribut html src → une nouvelle image s'affiche

Evénements

Les événements sont déclenchés par l'utilisateur (ou pas) après le démarrage de la page.

Les événements sont très importants en Javascript, c'est ce qui va vous permettre de définir les règles d'interaction de la page.

Les événements vont vous permettre de mettre de côté du code, pour qu'il soit exécuté lors de click, du survol, etc

La fonction .on() permet de lancer l'écoute de n'importe quel événement :

$(...).on('click', function(){
    // le code a exécuté au click sur l'élément ciblé
});

Concrètement on a donc souvent 2 cibles à spécifier :

- la cible de l'évenement (sur quoi je clique)
- la cible de l'action à déclencher quand ça arrivera

// au click sur le bouton "night mode" (ici sélectionné par sa classe)
$('header .night-mode').on('click', function() {
    // je change la classe de la balise <body>
    $('body').toggleClass('mode-nuit');
});

Quand on veut agir sur l'élément qu'on vient de cliquer (où qui vient de déclencher l'événement) :

// on cible toute une série d'articles
$('article').on('click', function(){
    $(this).action();
    // $(this) c'est CELUI qui vient d'être cliqué
});

On peut aussi empêcher la conséquence normale de l'événement :

// je cible tous les liens
$('a').on('click', function(e){
    e.preventDefault(); // empêche l'ouverture du lien, qui est le comportement par défaut d'un lien
    $(...).action();
});

Quelques-uns des nombreux événements Javascript utilisables avec $(...).on(...) :

$(...).on('click', function(){ ... }); // le click souris
$(...).on('mousedown', function(){ ... }); // bouton souris enfoncé
$(...).on('mouseup', function(){ ... }); // bouton souris relâché
$(...).on('mousemove', function(){ ... }); // mouvement de la souris (répété très vite)
$(...).on('mouseover', function(){ ... }); // survol de l'élément par la souris
$(...).on('mouseout', function(){ ... }); // sorite du survol souris

$(...).on('resize', function(){ ... }); // a changé de taille (sur $(window) le plus souvent)
$(...).on('scroll', function(){ ... }); // le scroll a changé (sur $(window) le plus souvent)
$(...).on('focus', function(){ ... }); // focus sur l'élément (ou la fenêtre)
$(...).on('blur', function(){ ... }); // perte du focus sur l'élément (ou la fenêtre)

$(...).on('keydown', function(){ ... }); // touche clavier enfoncée
$(...).on('keyup', function(){ ... }); // touche clavier relâchée

Il y a plein d'autres événements à découvrir (accéléromètre, chargement de la page, tactile, etc).

Parcourir un groupe d'éléments

Parfois on sélectionne plusieurs éléments, mais on a besoin d'exécuter du code sur chacun des éléments, séparément.

C'est à ça que sert la fonction $(...).each(...)

Exemple :

$('article').transition({ 'left': random(0, 500) });
// ici tous les articles vont avoir la même position aléatoire car le code a été exécuté une seule fois et appliqué à tous les articles

$('article').each(function(){
    // code exécuté pour CHAQUE article
    $(this).transition({ 'left': random(-20, 500) });
});
// → chaque article aura une position différente

Accéder au voisin, au parent, à un enfant, ou à 1 élément particulier d'un groupe d'éléments

On appelle ça "tree traversal" = traversée de l'arbre...

Il faut considérer l'arborescence html comme une suite de relation parent/enfant/voisin.

En partant d'un élément on peut remonter à ses parents, descendre chercher dans ses enfants, ou sauter dans la branche voisine :)

$(...).next() // va sélectionner l'élément voisin suivant $(...).prev() // va sélectionner l'élément voisin précédent $(...).parent() // va sélectionner le parent direct de l'élément

Pour être plus précis on peut faire :

$(...).closest('selecteur css')

pour parcourir le parent, les grand-parents, arrières grands-parents, etc jusqu'à trouver un élément qui corresponde au sélecteur indiqué

$(...).find('selecteur css')

va parcourir les enfants, petits-enfants, etc jusqu'à trouver un élément qui corresponde au sélecteur indiqué

Cibler 1 élément spécifique d'un groupe

Il arrive souvent qu'on sélectionne tout un groupe d'élements; de là il est parfois pratique de resserrer la sélection au seul 1er élément, ou au dernier, ou au 3ème, etc

$('article') // sélectionne tous les articles $('article').first() // sélectionne le 1er article seulement $('article').last() // sélectionne le dernier article seulement $('article').eq(0) // sélectionne le 1er article seulement $('article').eq(1) // sélectionne le 2ème article seulement $('article').eq(2) // sélectionne le 3ème article seulement $('article').eq(17) // sélectionne le 16ème article seulement

On compte donc à partir de 0 et non de 1...

Plus de fonctions de "tree traversal" sur le site de jQuery : https://api.jquery.com/category/traversing/tree-traversal/