#

> Récap. jQuery, guide complet

jQuery est une librairie Javascript qui ajoute de nombreuses fonctionnalités pour manipuler le contenu d’une page web, et mettre en place une interactivité sur-mesure.

jQuery est écrit en Javascript, on peut s’en passer et tout faire soit-même en pur Javascript, mais c’est plus facile de ne pas s’en passer !

Installation

Rendez-vous sur la page de téléchargement de jQuery, c’est la version « compressed production » qui vous intéresse.

Placez le fichier dans le dossier js/ de votre site, et déclarer le fichier Javascript dans l’entête de votre page HTML, entre <head> et </head> :

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

jQuery doit toujours être appelé en premier (au cas où les librairies suivantes auraient besoin de jQuery pour fonctionner).

Commencer à coder

Vous devez attendre que la page soit chargée pour exécuter votre code, car sinon les blocs HTML auxquels vous allez vous adresser ne seront pas encore créés.

Votre document Javascript doit donc commencer par :

$(document).ready(function(){
	// votre code js, exécuté une fois que la page est prête	
});

Debugger le code

Il faut toujours ouvrir la console d’erreur du navigateur quand on code, pour suivre les éventuelles erreurs de syntaxe.

Si besoin vous pouvez écrire des choses dans la console avec :

console.log("Le texte à afficher");

Vous pouvez aussi afficher une variable ou même un objet Javascript complexe, c’est très utile.

Commentaires Javascript

Vous pouvez désactiver une partie de votre code ou vous laisser des commentaires :

// un commentaire d'une seule ligne
/*
un commentaire 
sur plusieurs lignes
*/

Sélecteurs jQuery

Pour sélectionner une balise HTML ou un groupe de balise, on utilise les mêmes sélecteurs qu’en CSS (jQuery en propose quelques autres en plus), à l’intérieur de la fonction $.
La fonction $ est le symbole qui représente la fonction jQuery pour plus de facilité.

$('h1'); // sélectionne tous les h1 de la page
$('#test"); // sélectionne la balise avec id="test"
$('.test'); // sélectionne toutes les balises avec class="test"

Ecrire une « phrase » avec jQuery

Une phrase jQuery a toujours la même structure :

  • qu’est-ce que je cible ?
  • quelle action sur cette cible ?
  • quelles options éventuelles ?
$('nav').hide(600); // la cible est 'nav', l'action est de cacher le bloc, l'option est 600ms

Fonctions de base

.hide()masque la cible (en lui attribuant display:none en css)
.show()affiche la cible (display:block)
.css({ … })consulte ou modifie les propriétés CSS de la cible
.animate({ … }), 600)comme .css(), mais avec une durée d’animation
.addClass(« maclasse’)ajoute une classe CSS
.removeClass(‘maclase’)retire une classe CSS
.toggleClass(‘maclasse’)ajoute ou retire la classe CSS, suivant qu’elle est déjà en place ou pas
.hasClass(‘maclasse’)regarde si la cible a bien la classe CSS indiquée, renvoie true ou false
.attr(‘src’)extrait la valeur d’un attribut html (ici l’url d’une image)
.attr(‘src’, ‘image2.png’) modifie la valeur d’un attribut html
.width()consulte ou de modifie la largeur d’un bloc
.height()consulte ou de modifie la hauteur d’un bloc
.offset().left
.offstet().top		récupère les coordonnées de la cible dans la page, en pixels
.text()consulte ou modifie le contenu texte de la cible
.html()consulte ou modifie le contenu html de la cible
.append(‘mon texte’)ajoute le texte (ou le code) dans la cible, à la fin
.prepend(‘mon texte’)ajoute le texte (ou le code) dans la cible, au début
.empty()efface tout le contenu de la cible (retiré du code de la page)
.remove()efface la cible et son contenu (retirés du code de la page)
.val()récupère le contenu d’un champ de formulaire

Evénements (clic, survol, etc)

Tout ce qui est interactif ou temps-réel passe par la notion d’événement, comme le clic de la souris ou la redimention de la page.

Pour mettre en place « l’écoute » d’un événement on utilise la fonction .on() sur une cible (qui peut être une balise html ou la page elle-même).

$('nav a').on('click', function(e){
    e.preventDefault(); // empêcher le clic par défaut
    $(this).addClass('orange'); // on lui ajoute la classe 'orange'
});
  • « function(){ … } » permet de mettre de côté le code qui sera exécuté lorsque l’événement aura lieu (ici le click).
  • « e » est un nom arbitraire, la variable « e » contiendra toutes les infos relatives à l’événement qui vient d’avoir lieu.
  • « e.preventDefault() » est optionnel, et permet de bloquer le comportement par défaut de l’événement (ici on empêche le clic de suivre le lien et de changer de page)
  • $(this) représente le lien qui vient d’être cliqué, et seulement lui

Autre exemple d’événement, associé à la fenêtre du navigateur cette fois-ci :

$(window).on('resize', function(){
    // du code exécuté quand la page est redimentionnée
});

Quand on cible la fenêtre elle-même, on ne met pas de guillemets à window, c’est une variable Javascript native et non un sélecteur CSS.

Les événements les plus courants : ‘click’, ‘mouseover’, ‘mouseout’, ‘mousemove’, ‘resize’, ‘scroll’

Les événements tactiles sont : ‘touchstart’, ‘touchend’, ‘touchmove’

Les événements clavier sont : ‘keypress’, ‘keyup’ et s’appliquent généralement à $(window) directement.

Pour détecter la touche qui a été enfoncée :

$(window).on('keypress', function(e){
	var key = e.which; // code de la touche relâchée
	console.log(key); // affichera le code de la touche dans la console

	if(key == 13){ 
		// un code exécuté seulement pour la touche Enter
	}
});

Se déplacer dans l’arborescence HTML

C’est un cas courant lors du click d’un objet jQuery, par exemple.
A l’intérieur du function(){}, on a accès à $(this) qui représente l’élément cliqué.

Comment, à partir de là, accéder à un sous-élément ou à l’élément parent ?

.find(‘img’)permet de chercher parmi les éléments enfants, suivant le sélecteur css indiqué
.parent()permet de remonter d’un niveau, et sélectionne l’élément parent
.closest(‘.truc’)fait une recherche en remontant parmi les parents, jusqu’à trouver l’élément le plus proche correspond au sélecteur css
.next()sélectionne l’élément suivant
.prev()sélectionne l’élément précédent
.children()sélectionne tous les éléments enfant directs (mais pas les petits-enfants)

C’est ce qu’on appelle les fonctions de « tree traversal », qui permettent d’explorer et de se déplacer dans l’arborescence html.

On peut chaîner ces fonctions pour se déplacer, exemple :

$(this).closest('nav').find('img).hide();

va remonter dans les parents jusqu’à ‘nav’, et de là sélectionner toutes les images et les cacher.

Parcourir un groupe d’objets

Quand vous avez sélectionné un groupe d’éléments html, il peut être utile de les parcourir un par un pour traiter chacun séparément.

Exemple, pour empiler des articles avec un décalage qui augmente à chaque article :

$('article').each(function(i){
     // ce code va être répété pour chaque article
     // i c'est le n° de l'élément actuel, ça commence à 0
     $(this).css({
         position: 'absolute,'
         left: (i*50)+'px', //0, puis 50px, puis, 100, 150, 200, etc         top: (i*50)+'px'
     });
});

Pour approfondir :

Toutes les fonctions jQuery sont détaillées sur le site officiel, dans la section API.

Par ailleurs jQuery est extrêment bien documenté et commenté par la communauté.
Pour trouver des réponses à toutes vos questions, tapez juste « jquery ma question » dans Google, quelqu’un a certainement déjà trouvé la réponse !