Vous souhaitez rendre vos sites web plus dynamiques et interactifs.
Sans les bons outils, cela peut être complexe et chronophage.
Découvrez comment jQuery simplifie le processus avec ses fonctionnalités puissantes et faciles à utiliser.
Apprenez les bases de jQuery à travers des projets pratiques et engageants.
Installer jQuery facilement
jQuery est la bibliothèque JavaScript « Écrivez moins, faites plus ». Il ne s’agit pas d’un langage de programmation, mais plutôt d’un outil utilisé pour rendre plus concise l’écriture de tâches JavaScript courantes. jQuery présente l’avantage supplémentaire d’être compatible avec tous les navigateurs, ce qui signifie que vous pouvez être certain que la sortie de votre code s’affichera comme prévu dans n’importe quel navigateur moderne.
Conditions pour utiliser jQuery
Avant de commencer ce guide, vous aurez besoin des éléments suivants :
- Une connaissance de base de HTML et CSS.
- Une compréhension des principes fondamentaux de la programmation. Bien qu’il soit possible de commencer à écrire du jQuery sans avoir de connaissances avancées en JavaScript, une connaissance des concepts de variables et de types de données sera d’une grande aide.
Configurer la bibliothèque jQuery
jQuery est un fichier JavaScript auquel vous allez créer un lien dans votre code HTML. Il existe deux façons d’inclure jQuery dans un projet : soit en téléchargeant une copie locale, soit en créant un lien vers un fichier via un réseau de diffusion de contenu (CDN).
Vous pouvez trouver la dernière version de jQuery dans les bibliothèques hébergées de Google . Si vous souhaitez plutôt le télécharger, vous pouvez obtenir une copie de jQuery sur le site officiel .
Afin de mettre tout ça en pratique, vous commencerez par créer un projet web qui sera composé d’un répertoire « js/jquery.js » et « js/script.js » et d’un main « index.html » à la racine du projet.
Vous devrez créer par la suite un squelette HTML et l’enregistrer sous « index.html » :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-ad1d5236-ea2a-4f76-a322-e51f6e10c13c: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-ad1d5236-ea2a-4f76-a322-e51f6e10c13c: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"ad1d5236-ea2a-4f76-a322-e51f6e10c13c","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<script>window.addEventListener('DOMContentLoaded', function() {var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"4aea161135","url":"https:\/\/blog.alphorm.com\/installation-utilisation-jquery","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}});</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Ajoutez le chemin des deux fichiers du répertoire JavaScript, jQuery et script :
<script src="js/jquery.js" data-rocket-defer defer></script>
<script src="js/script.js" data-rocket-defer defer></script>
À ce stade, la bibliothèque jQuery est désormais chargée sur votre site et vous avez un accès complet à l’API jQuery.
Principes de la bibliothèque jQuery
Considérez la syntaxe jQuery comme un ensemble de règles que vous devez maîtriser pour créer des scripts jQuery efficaces. La syntaxe définit la façon dont vous devez inclure, manipuler et interagir avec les éléments de votre page Web dans le but de créer une expérience utilisateur dynamique et interactive.
Jetons un coup d’œil complet à la syntaxe de jQuery. La syntaxe de base de jQuery peut être résumée comme suit :
$(selecteur).methode();
Ici, le « $ » signe les fonctions permettant de définir ou d’accéder à jQuery, suivi d’un sélecteur qui est utilisé pour interroger ou trouver des éléments HTML, et enfin d’une action(méthode) qui peut être chainée avec une autre méthode et qui est exécutée sur l’élément.
Exemple :
La couche la plus externe du DOM, la couche qui enveloppe tout le <html>nœud, est l’objet document. Pour commencer à manipuler la page avec jQuery, vous devez d’abord vous assurer que le document est « prêt ».
$(document).ready(function(){
// instructions jQuery
$(selecteur).methode().methode();
});
Tout le code jQuery que vous écrivez sera enveloppé dans le code ci-dessus. jQuery détectera cet état de préparation afin que le code inclus dans cette fonction ne s’exécute qu’une fois que le DOM sera prêt à exécuter le code JavaScript. Même si dans certains cas, JavaScript ne sera pas chargé tant que les éléments ne seront pas rendus, l’inclusion de ce bloc est considérée comme une bonne pratique.
Utiliser les principes de jQuery dans des projets pratiques
Fonctionnement de jQuery
Afin d’utiliser jQuery pour votre projet, il vous faut tout d’abord intégrer la bibliothèque, comme il a été dit précédemment. C’est la seule manière pour vous d’héberger des fichiers JavaScript sur votre espace Web personnel ou de placer un lien vers un espace externe.
Vous devez donc avoir un fichier « index.html » suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-ad1d5236-ea2a-4f76-a322-e51f6e10c13c: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-ad1d5236-ea2a-4f76-a322-e51f6e10c13c: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"ad1d5236-ea2a-4f76-a322-e51f6e10c13c","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<script src="js/jquery.js" data-rocket-defer defer></script>
<script src="js/script.js" data-rocket-defer defer></script>
<script>window.addEventListener('DOMContentLoaded', function() {var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"4aea161135","url":"https:\/\/blog.alphorm.com\/installation-utilisation-jquery","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}});</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
Sélecteurs jQuery efficaces
Les sélecteurs permettent d’indiquer à jQuery les éléments sur lesquels vous souhaitez travailler. La plupart des sélecteurs jQuery sont identiques à ceux que vous connaissez en CSS, avec quelques ajouts spécifiques à jQuery. Vous pouvez consulter la liste complète des sélecteurs jQuery sur leurs pages de documentation officielles.
Toujours donc dans votre fichier « index.html », vous allez créer un paragraphe afin de pouvoir le manipuler.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-ad1d5236-ea2a-4f76-a322-e51f6e10c13c: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-ad1d5236-ea2a-4f76-a322-e51f6e10c13c: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"ad1d5236-ea2a-4f76-a322-e51f6e10c13c","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi voluptates ex nesciunt iure assumenda a voluptatibus eveniet aliquam officiis delectus, sapiente non nihil iste doloremque hic. Porro accusamus eaque pariatur?</p>
<script src="js/jquery.js" data-rocket-defer defer></script>
<script src="js/script.js" data-rocket-defer defer></script>
<script>window.addEventListener('DOMContentLoaded', function() {var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"4aea161135","url":"https:\/\/blog.alphorm.com\/installation-utilisation-jquery","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}});</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
A l’instar de CSS, vous pourrez manipuler un sélecteur grâce à JQuery et cette fois dans un fichier JavaScript.
Avant le code JavaScript, vous aurez comme résultat suivant :
Une fois dans le fichier « script.js », vous serez à même de manipuler n’importe quel sélecteur en l’occurrence le sélecteur « p ».
Ajoutez ces lignes à votre fichier « scripts.js ».
$(document).ready(function(){
$('p').hide();
});
Une fois le fichier enregistré, vous pouvez ouvrir « index.html » dans votre navigateur. Si tout fonctionne correctement, vous verrez le résultat suivant :
NB : la méthode « hide » permet de cacher un élément.
Dans cet autre exemple, vous manipulerez le sélecteur « h1 ».
<body>
<h1>Titre du document</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi voluptates ex nesciunt iure assumenda a voluptatibus eveniet aliquam officiis delectus, sapiente non nihil iste doloremque hic. Porro accusamus eaque pariatur?</p>
<script src="js/jquery.js" data-rocket-defer defer></script>
<script src="js/script.js" data-rocket-defer defer></script>
<script>window.addEventListener('DOMContentLoaded', function() {var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"4aea161135","url":"https:\/\/blog.alphorm.com\/installation-utilisation-jquery","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}});</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
Avant la manipulation du sélecteur « h1 », vous aurez comme résultat :
Dans le fichier « script.js », passez le sélecteur « h1 » à la méthode « hide ».
$(document).ready(function(){
$('h1').hide();
});
Après manipulation du sélecteur « h1 », vous aurez comme résultat :
Vous remarquez la réapparition du paragraphe, tout simplement parce que le sélecteur passé à la méthode « hide » n’est plus « p » mais cette fois « h1 ».
Sélecteur | Description |
|---|---|
$(« * ») : Caractère générique | Ceci sélectionne chaque élément de la page. |
$(this) : Actuel | Ceci sélectionne l’élément actuel sur lequel l’opération est effectuée dans une fonction. |
$(« p ») : Balise | Ceci sélectionne chaque instance de la balise . |
$(« .exemple ») : Classe | Ceci sélectionne chaque élément auquel la classe exemple est appliquée. |
$(« #exemple ») Id | Ceci sélectionne une seule instance de l’identifiant exemple unique. |
$(« [type=’text’] ») : Attribut | Ceci sélectionne n’importe quel élément text appliqué à l’attribut type. |
Généralement, les classes et les identifiants sont ce que vous rencontrerez le plus : les classes lorsque vous souhaitez sélectionner plusieurs éléments et les identifiants lorsque vous souhaitez en sélectionner un seul.
En résumé, Les codes jQuery permettent d‘accéder aux éléments HTML de votre projet Web. Vous pouvez sélectionner ces éléments via un sélecteur qui est basé de manière syntaxique sur des sélecteurs CSS. La suite logique est le déclenchement d’une action qui décrit la manière dont l’élément sélectionné doit être modifié. Un signe de dollar ($) est placé devant à la fois le sélecteur et l’action dans le but de caractériser le code en tant que fonction jQuery. Ce procédé sert à éviter toute confusion dans l’utilisation des différentes bibliothèques. $() sert de raccourci pour la fonction JQuery ().
Maîtriser le fonctionnement des méthodes d’événements jQuery
Un événement se produit à chaque fois que l’utilisateur interagit avec le navigateur. Cela se fait généralement avec la souris ou le clavier.
Voici à quoi peut ressembler le code d’utilisation d’une méthode d’événement :
$(document).ready(function(){
$(selecteur).methodeEvenement(function(){
// instructions
});
});
Ici donc, le « $ » signe les fonctions permettant de définir ou d’accéder à jQuery, suivi d’un sélecteur qui est utilisé pour interroger ou trouver des éléments HTML, et enfin d’une action(méthode d’événement) qui est exécutée sur l’élément.
À partir de la documentation officielle de jQuery, vous pouvez consulter une liste complète des méthodes d’événement jQuery . Vous trouverez ci-dessous un bref aperçu de certaines des méthodes événementielles les plus couramment utilisées.
Méthodes | Description |
|---|---|
click() | Cela s’exécute sur un simple clic de souris. |
hover() | Ceci s’exécute lorsque la souris passe sur un élément. |
mouseenter()et mouseleave() | S’appliquent uniquement à la souris entrant ou sortant d’un élément, respectivement. |
submit() | Ceci s’exécute lorsqu’un formulaire est soumis. |
scroll() | Cela s’exécute lorsque l’écran défile. |
keydown() Keydown | Ceci s’exécute lorsque vous appuyez sur une touche du clavier. |
La compréhension des événements est essentielle pour créer du contenu de site Web dynamique avec jQuery.
Événements avec jQuery
Faire bouger les éléments sur une page lorsqu’un utilisateur interagit avec est l’une des choses les plus satisfaisantes à faire en jQuery. L’utilisateur clique sur un élément ? Boom ! La page change de couleur. L’utilisateur déplace la souris ? Bim ! Tout disparaît, sauf une citation. Les combinaisons sont infinies. Voyons comment utiliser les événements en jQuery pour faire des choses impressionnantes en l’occurrence les déplacements de souris avec vos éléments et les méthodes qui les accompagnent.
$(document).ready(function(){
$('h1').mouseover(function(){
$('p').hide();
});
$('h1').mouseout(function(){
$('p').show();
});
});
Ici, lorsque la souris passe sur le titre, le paragraphe sera caché et dès qu’il est retiré, le paragraphe réapparaîtra.
Voyons ça concrètement. Sans survoler le titre, vous aurez comme résultat :
Au survol du titre, vous aurez comme résultat :
Pratique : Histoire de voir les manipulations jQuery de façon instantanée, cliquez sur l’image de Codepen suivante :
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment installer jQuery dans un projet web ?
Quels sont les prérequis pour utiliser jQuery ?
Comment utiliser les sélecteurs jQuery ?
Comment manipuler les événements avec jQuery ?
Comment intégrer jQuery dans un fichier HTML ?
Conclusion
En maîtrisant jQuery, vous pouvez enrichir vos projets web avec des fonctionnalités dynamiques et une meilleure interactivité. Comment allez-vous intégrer jQuery dans votre prochain projet ?
