Qu'est-ce que jQuery et comment pouvez-vous l'utiliser ?

Introduction

Si vous êtes familier avec le monde de la programmation, vous savez à quel point les langages de programmation sont importants. Certains des plus essentiels et fréquemment utilisés incluent HTML, CSS, et JavaScript. Alors que HTML et CSS vous aident à concevoir et à structurer votre site web, JavaScript vous permet de le rendre interactif. Il existe de nombreuses bibliothèques JavaScript que vous pouvez utiliser pour ajouter des fonctionnalités uniques à votre projet web. Parmi elles se trouve la bibliothèque jQuery.

jQuery en soi n'est pas un langage de programmation. C'est un outil que vous pouvez utiliser pour faciliter le développement web en JavaScript. Cela permet de rendre les tâches plus simples et directes. Il est célèbre pour être basé sur le concept « Écrire moins, faire plus ». En plus de faciliter le développement web, jQuery vous offre également l'avantage supplémentaire de la compatibilité multi-navigateur. Cela signifie que le code peut s'afficher correctement quel que soit le navigateur utilisé pour le rendu.

Pour mieux visualiser comment jQuery rend les choses plus concises, prenons un exemple. Supposons que nous écrivions le programme « Hello, World! ». Voici comment il apparaîtrait respectivement en JavaScript et en jQuery :

Ces deux lignes de code donneront le même résultat. Cependant, comme vous pouvez le voir, jQuery rend l'écriture plus concise et directe.

Dans ce tutoriel, vous apprendrez tout sur les bases de jQuery. Vous pouvez télécharger l'outil par vous-même depuis ce site web. Nous procéderons comme si vous étiez un débutant complet sans aucune connaissance de jQuery. Ce tutoriel vous apprendra comment installer jQuery et certains des concepts fondamentaux qui y sont associés. Nous explorerons certains des sélecteurs, événements et effets courants dans jQuery. Ensuite, vous apprendrez à tester des concepts de développement tels que l'API, le DOM et le CDN à travers des exemples utiles. Lisez la suite pour vous familiariser avec le monde de jQuery.

Avant de commencer

Certaines choses joueront en votre faveur si vous les connaissez à l'avance. Par exemple, avoir une compréhension de base du fonctionnement de HTML et CSS vous aidera grandement. Nous ne couvrirons pas cela dans ce tutoriel. Nous travaillerons en partant du principe que vous savez au moins comment configurer un site web simple. Vous devriez également avoir une compréhension de base du fonctionnement de la programmation en général. Cela ne signifie pas nécessairement que vous devez être un expert en JavaScript pour continuer. Il suffit d'avoir une certaine familiarité avec des concepts comme la logique, les variables et les types de données en programmation.

Comment configurer jQuery sur votre système

Tout d'abord, voyons comment vous pouvez configurer jQuery sur votre système. jQuery est disponible sous forme de fichier JavaScript puisqu'il s'agit d'une bibliothèque JavaScript. Vous devez lier ce fichier dans le code HTML de notre site web. Il y a deux façons de procéder. Comme je l'ai mentionné précédemment, une façon de faire est de le télécharger depuis ici. En dehors du site officiel, vous pouvez également trouver jQuery dans les bibliothèques hébergées par Google juste ici.

Une autre méthode consiste à utiliser le réseau de diffusion de contenu (Content Delivery Network) ou CDN pour lier le fichier. Un CDN comprend un ensemble de serveurs qui aident à diffuser le contenu web localement. L'hébergement d'un fichier jQuery via un CDN permet au contenu d'arriver beaucoup plus rapidement à l'utilisateur. C'est pourquoi nous utiliserons le réseau de diffusion de contenu à partir de maintenant dans ce tutoriel.

Dans notre premier exemple, nous allons réaliser un projet web. Ce petit projet contient style.css dans le répertoire css/. script.js est situé dans le répertoire js/. Enfin, un index.html est présent à la racine du projet web :

Pour ce projet, nous allons créer un squelette HTML. Par la suite, nous l'enregistrerons sous le nom index.html:

C'est ici que nous lierons le fichier jQuery. Comme je l'ai déjà dit, nous le lierons via un CDN. Vous saisirez le lien jQuery avant la balise </body> . Après cela, vous pouvez ajouter votre fichier JavaScript personnalisé qui était script.js dans notre exemple. N'oubliez pas de toujours placer le fichier JavaScript sous la bibliothèque jQuery, comme ceci :

Que feriez-vous si vous aviez plutôt téléchargé une copie locale de la bibliothèque jQuery ? Dans ce cas, vous devez enregistrer le fichier jQuery dans le dossier js/ . Vous pouvez ensuite le lier comme js/jquery.min.js.

jQuery : Les fondamentaux

Avant de plonger dans les détails, passons en revue certains des fondamentaux de jQuery. Le rôle principal de jQuery est d'utiliser le DOM pour connecter les éléments HTML dans le navigateur. DOM signifie Document Object Model. C'est la méthode qui permet à JavaScript d'interagir avec le HTML dans un navigateur. Vous pouvez visualiser le DOM en faisant un clic droit sur votre page web et en sélectionnant Inspecter. Le HTML qui apparaît dans les outils de développement est le DOM.

Un nœud est un élément HTML individuel dans le DOM. JavaScript peut modifier tous ces objets ou éléments. Vous pouvez imaginer la disposition de ces objets comme une structure en arbre. <html> se trouve à la racine tandis que les éléments se ramifient plus loin.

Un clic droit et la sélection de Afficher le code source de la page vous montreront le HTML brut du site web. Rappelez-vous que ce n'est pas la même chose que le DOM. Alors que le DOM peut être modifié, la source HTML est complètement statique. Les modifications que vous apportez en JavaScript n'auront aucun impact sur ce fichier HTML. L'ensemble du nœud <html> est enveloppé dans une couche externe appelée l'objet document.

Ensuite, nous verrons comment vous pouvez manipuler votre page web et ses fonctionnalités à l'aide de jQuery. Avant de faire cela, cependant, vous devez vous assurer que la page est prête.

Saisissez ce qui suit après avoir créé le fichier script.js dans le dossier js/ :

Désormais, tout code que vous écrivez sera enveloppé dans ce code. jQuery détectera si le code est prêt. Le code à l'intérieur de cette fonction ne sera exécuté que lorsque le DOM sera prêt.

Nous allons revenir sur le script « Hello, World ! » dont nous avons parlé au début du tutoriel. Supposons que nous voulions lancer ce script. Pour utiliser jQuery afin d'afficher ce texte dans le navigateur, nous devons appliquer l'ID demo à un paragraphe vide de type bloc comme ceci :

Pour appeler jQuery, nous devons utiliser le symbole $ . Vous pouvez appliquer la syntaxe et les méthodes CSS pour accéder au DOM avec jQuery. En voici un exemple simple :

C'est le format que vous utiliserez avec jQuery. Nous savons déjà que le symbole # représente l'ID en CSS. Par conséquent, vous pouvez accéder à l'ID demo en utilisant le sélecteur #demo.html() . Cette méthode vous permettra de modifier le HTML présent dans un élément.

Le code suivant montre comment placer le programme « Hello, World » dans le jQuery du fichier script.js’ ready() wrapper :

Vous devez ajouter cette ligne de code au fichier script.js . Enregistrez ce fichier. Après cela, vous pouvez ouvrir le fichier index.html dans le navigateur. Vous devriez pouvoir voir la sortie Hello, World!. C'est également un bon moment pour vérifier le DOM pour votre compréhension. Faites un clic droit sur le texte « Hello, World! ». Sélectionnez Inspecter l'élément. Le DOM affichera <p id="demo">Hello, World!</p>. En revanche, cliquer sur Afficher le code source de la page n'affichera que le HTML brut. Dans ce cas, ce serait <p id="demo"></p>.

Que sont les sélecteurs ?

Nous allons maintenant passer à certaines des fonctionnalités critiques de jQuery. Parmi celles-ci figurent les sélecteurs. Les sélecteurs jQuery indiquent au programme avec quels éléments vous souhaitez travailler ou « sélectionner ». Ils sont très similaires aux sélecteurs que vous pouvez utiliser en CSS. Voici le format de base pour accéder à un sélecteur dans jQuery :

Vous pouvez utiliser des chaînes entre guillemets simples ou doubles, bien que le guide de style jQuery préfère cette dernière option. Si vous le souhaitez, vous pouvez consulter la liste complète des sélecteurs jQuery sur cette page officielle. Pour votre information, voici quelques-uns des sélecteurs les plus fréquemment utilisés :

• $("*")

Il s'agit du sélecteur générique (Wildcard). Il sélectionnera tous les éléments de votre page.

• $(this)

Il s'agit du sélecteur actuel (Current). Il sélectionne l'élément sur lequel vous opérez actuellement avec une fonction.

• $("p")

Il s'agit du sélecteur de balise (Tag). Il sélectionne chaque instance de la balise <p>.

• $(".example")

Il s'agit du sélecteur de classe (Class). Il sélectionnera chaque élément auquel la classe example est appliquée.

• $("#example")

Il s'agit du sélecteur d'identifiant (Id). Il ne sélectionne qu'une seule instance de l'identifiant example.

• $("[type='text']")

Il s'agit du sélecteur d'attribut (Attribute). Il sélectionnera tout élément donné avec text appliqué à l'attribut type.

• $("p:first-of-type")

Il s'agit du sélecteur de pseudo-élément (Pseudo Element). Il vous aide à sélectionner le premier <p>.

Que sont les événements ?

Certaines fonctionnalités de la page web se chargent dès que la page est chargée. Prenons l'exemple « Hello, World ». Dans ce cas, nous pourrions ajouter le code directement dans le HTML source. Mais que se passe-t-il lorsque le chargement d'une fonctionnalité nécessite une interaction de l'utilisateur ? C'est là que jQuery devient utile.

Disons que nous voulons qu'un texte apparaisse après que l'utilisateur a cliqué sur un bouton. Pour ajouter cette fonctionnalité, vous devez ajouter un élément <button> au fichier index.html . Ce bouton écoutera l'« événement » de clic :

Chaque fois que l'utilisateur interagit avec le navigateur, cela est considéré comme un événement. L'interaction peut se faire via le pointeur de la souris ou le clavier. Dans l'exemple ci-dessus, le clic sur un bouton est notre événement. C'est pourquoi on l'appelle un événement de clic.

Ensuite, nous devons appeler une fonction qui contient le code « Hello, World ». Pour ce faire, nous utiliserons la méthode click() :

Comme vous pouvez le voir, l'ID de notre élément <button> est nommé trigger. Nous pouvons le sélectionner en utilisant $(“#trigger"). Le but de l'ajout de la méthode click() est de faire en sorte que le programme écoute l'événement de clic. Ensuite, nous placerons la fonction avec le code texte à l'intérieur de la méthode :

Notre code ressemblera à ceci à la fin :

Maintenant, vous pouvez enregistrer le fichier script.js . Actualisez le fichier index.html dans le navigateur pour appliquer les modifications. Après avoir cliqué sur le bouton, le résultat du test “Hello, World!” apparaîtra.

Il existe également d'autres types d'événements jQuery que le clic. Vous pouvez consulter la liste complète de ces méthodes d'événement sur ce document officiel. Voici quelques-uns des plus fréquemment utilisés que vous pourriez rencontrer à l'occasion :

• click()

L'événement click exécute le code lors d'un simple clic de souris.

• hover()

L'événement hover exécute le code lorsque le pointeur de la souris survole un élément. Vous pouvez également spécifier si le code est déclenché par l'entrée ou la sortie de la souris avec mouseenter() et mouseleave() respectivement.

• submit()

La soumission d'un formulaire déclenche le code.

• scroll()

Le défilement de l'écran sera l'événement qui exécutera le code.

• keydown()

Appuyer sur la touche Bas du clavier exécutera le code.

Que sont les effets ?

Les effets jQuery fonctionnent de pair avec les événements jQuery. Le but principal des effets, comme le terme l'indique, est d'ajouter des animations à la page. Ils vous permettent de manipuler les éléments pour appliquer différents types d'effets. Ces effets peuvent être déclenchés par certains événements.

Pour mieux comprendre, nous allons prendre un exemple. Disons que nous voulons ouvrir et fermer une superposition de pop-up (popup overlay). Une façon de faire serait d'utiliser deux identifiants (ID) différents. L'un ouvrirait la superposition et l'autre la fermerait. L'autre façon de faire est d'utiliser une classe. L'avantage d'utiliser une classe est que la même fonction est capable d'ouvrir et de fermer la superposition.

Ouvrez votre fichier index.html. Ensuite, supprimez les balises <button> et <p> du body. Ajoutez maintenant les lignes de code suivantes au HTML :

Examinons ensuite notre fichier style.css. Ici, notre objectif est d'utiliser un minimum de CSS pour masquer la superposition. Pour cela, nous utiliserons display: none et la centrerons comme ceci :

Ensuite, nous utiliserons la méthode toggle(). Cette méthode nous permettra de basculer la propriété display entre none et block. Par conséquent, la superposition sera masquée et affichée à chaque clic. Ajoutez ce code au fichier script.js :

Enfin, actualisez index.html pour appliquer les modifications. Vous pourrez maintenant basculer la visibilité de la boîte modale. Tout ce que vous avez à faire est de cliquer sur les boutons. Il existe d'autres effets jQuery que vous pouvez utiliser en combinaison avec cela. Par exemple, vous pouvez remplacer le simple toggle() par slideToggle() ou fadeToggle().

Voici quelques-unes des méthodes d'effets les plus couramment utilisées dans jQuery :

• toggle()

Cette méthode vous permet de modifier la visibilité de l'élément. Les effets unidirectionnels qui lui sont associés sont show() et hide().

• fadeToggle()

Cette méthode vous permettra de basculer la visibilité et l'opacité de l'élément via une animation. Les effets unidirectionnels dans ce cas sont fadeIn() et fadeOut().

• slideToggle()

Cette méthode vous permettra d'utiliser des effets de glissement pour basculer la visibilité de l'élément. Les effets unidirectionnels dans ce cas sont slideUp() et slideDown().

• animate()

Cette méthode d'effet vous permet de réaliser des effets d'animation personnalisés. Elle utilise la propriété CSS de l'élément donné.

Conclusion

Espérons que ce tutoriel s'est avéré utile pour donner une introduction approfondie à jQuery. C'est un outil incroyablement utile qui contribue grandement à faciliter le développement web et l'écriture de code. C'est particulièrement vrai si vous êtes relativement nouveau dans le monde de la programmation.

Nous avons exploré les différents éléments qui constituent les bases de jQuery. Nous avons également appris comment sélectionner et modifier ces éléments, et comment mettre à profit les événements et les effets. La maîtrise d'outils comme jQuery peut vous aider à créer des sites web remplis de fonctionnalités interactives qui garantissent une expérience utilisateur engageante.

Consultez quelques ressources de notre blog qui vous aideront lorsque vous travaillez avec JavaScript :

• Un guide sur l'ajout de JavaScript au HTML
• Travailler avec JavaScript : comment fonctionnent les classes 
• Travailler avec JavaScript : comment fonctionnent les prototypes et les héritages

Bonne programmation !