Il serait difficile d’exagérer l’impact de jQuery sur le développement web après la publication de la bibliothèque JavaScript open source il y a plus de 15 ans. Une boîte à outils qui a créé un nouveau raccourci pour la programmation JavaScript autrement complexe, jQuery continue de respecter la devise de ses développeurs : « Écrire moins, faire plus »
Aujourd’hui encore, jQuery est populaire parmi les développeurs professionnels, tandis que d’autres personnes ayant peu ou pas d’expérience en programmation peuvent utiliser la bibliothèque pour ajouter des fonctionnalités avancées à leurs sites web. Voici ce qui se cache derrière l’une des plus grandes réussites du développement web.
Quelle est la popularité de jQuery ?
L’enquête 2022 de StackOverflow sur les technologies web utilisées par les développeurs professionnels a révélé qu’un peu plus de 29 % des plus de 45.000 répondants travaillaient avec jQuery. Parmi les bibliothèques JavaScript, jQuery se classait juste derrière React.js, la bibliothèque développée pour la première fois chez Facebook (aujourd’hui Meta) en 2011 et qui est désormais adoptée par plus de 44 % de ces développeurs.
Mais les projets actuels des développeurs web ne racontent pas toute l’histoire. D’après les tendances technologiques Internet de BuiltWith, jQuery sera présent sur plus de 80 millions de sites web en 2022. C’est une énorme avance sur les près de 11 millions de sites web utilisant React.
La bibliothèque jQuery est fournie avec le noyau de WordPress depuis plus de dix ans, ce qui la rend disponible dès le départ pour des centaines de thèmes qui s’appuient sur ses fonctionnalités pour créer des sites web dynamiques. Drupal est un autre système de gestion de contenu populaire qui a inclus jQuery parmi ses composants de base. Quelles que soient les technologies actuellement privilégiées par les développeurs, jQuery reste la bibliothèque JavaScript la plus utilisée sur le web.
Une brève histoire de jQuery
La bataille des navigateurs fait rage depuis les débuts du web, et les développeurs en ont toujours été les victimes. En 2006, lorsque le développeur web John Resig a dévoilé jQuery, le navigateur Internet Explorer de Microsoft était le leader incontesté du marché – un renversement de l’avantage de Netscape moins d’une décennie plus tôt.
À l’époque, le nouveau Firefox de Mozilla détenait une part de marché de 10 % (contre 84 % pour Microsoft) et Safari d’Apple venait d’apparaître sur la scène. Chrome de Google, le leader actuel du marché, n’existait pas. Les programmeurs JavaScript comme Resig se battaient régulièrement pour écrire du code qui fonctionnerait dans tous les navigateurs.
Sa nouvelle bibliothèque jQuery a été conçue pour tenir compte des différences dans la façon dont JavaScript était implémenté par ces navigateurs et aider les développeurs à écrire moins de code tout en accomplissant des tâches comme celles-ci :
- Manipuler les éléments HTML d’une page web
- Modifier dynamiquement les CSS
- Réagir aux événements tels que les clics de souris et les pressions de touches
- Traiter les requêtes Ajax pour mettre à jour le contenu d’une page sans la recharger
Suite à la publication de la bibliothèque par Resig, d’autres développeurs ont créé des applications sur jQuery, partageant souvent leur travail sous forme d’extensions afin de mettre les nouvelles fonctionnalités à la disposition de tous.
Qu’est-ce que jQuery UI ?
jQuery UI est une collection populaire d’extensions conçues pour améliorer les interfaces utilisateur. Elle est considérée comme un compagnon « officiel » de la bibliothèque de base jQuery et ajoute une foule d’effets spéciaux et de widgets tels que des sélecteurs de date, des barres de progression, des diaporamas, des tourniquets et des panneaux à onglets ou pliables.
Quelle est la différence entre jQuery et JavaScript ?
Il est important de savoir que jQuery est du JavaScript. Lorsque vous utilisez jQuery, vous travaillez avec des instances d’objets JavaScript qui reflètent les conventions de dénomination des méthodes (fonctions) et des propriétés de jQuery. Jetons un coup d’œil à la vanilla JavaScript et jQuery, s’attaquant à la même tâche.
Voici un extrait de HTML quelque part sur une page web :
<p id="target">Old text</p>Un code vanilla JavaScript capable de trouver l’élément <p> avec la « target » id – puis de remplacer le texte entre les balises – pourrait ressembler à ceci :
const content = document.getElementById( "target" );
content.textContent = "New text";La méthode getElementById() de JavaScript renvoie un objet qui comprend le HTML et le contenu textuel du paragraphe avec la « target » id. L’objet est affecté à la référence constante content, puis sa propriété textContent est modifiée en « New text ».
JavaScript vous permet de chaîner des méthodes, ce qui permet de réaliser ce qui précède avec une seule déclaration :
document.getElementById( "target" ).textContent = "New text"; Il n’est donc pas surprenant que vous puissiez également enchaîner des actions jQuery. Pour remplacer « Old text » par « Nex text » à l’aide de jQuery, vous pouvez procéder comme suit :
$( "#target" ).text( "New text" );Le signe dollar ($) est un alias court pour jQuery, et ( "#target" ) est un exemple de sélecteur jQuery. Dans ce cas, le sélecteur recherche un élément HTML avec le id de notre paragraphe cible. La méthode jQuery text() est enchaînée pour faire de « New text » le contenu du paragraphe.
Comment utiliser jQuery sur votre site web
Ajoutez jQuery à votre site web en liant le code de la bibliothèque à partir des pages du site. La bibliothèque jQuery peut se trouver sur votre serveur web ou sur un réseau de diffusion de contenu (Content Delivery Network ou CDN) accessible au public. Le site officiel de jQuery peut vous mettre en relation avec les dernières versions de la bibliothèque.
La bibliothèque jQuery est disponible en JavaScript minifié (compressé) pour un chargement rapide en production ou non compressé pour la lisibilité et le débogage.
Vous écrirez également au moins un peu de JavaScript pour invoquer jQuery et effectuer des tâches spécifiques à votre application web. Dans le HTML des pages de votre site web, vous pouvez lier la bibliothèque jQuery et le fichier contenant votre code comme ceci :
<script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>Dans cet exemple, la version 3.6.0 de jQuery et votre code spécifique au site dans un fichier appelé my_script.js sont situés dans le répertoire/js/ du site web. La bibliothèque jQuery est généralement incluse dans la section <head> d’une page web. Il est courant que les développeurs placent certains liens vers des fichiers JavaScript, y compris le code qui repose sur la bibliothèque jQuery, vers le bas d’une page, généralement juste avant la fermeture de la balise <body>. Vous voudrez toujours que tout code spécifique au site qui invoque jQuery apparaisse après le lien vers la bibliothèque elle-même.
Lien vers jQuery sur un CDN
La bibliothèque jQuery se télécharge souvent plus rapidement lorsqu’elle est fournie par un CDN robuste. jQuery est tellement omniprésent sur le web qu’il y a de fortes chances qu’un visiteur de votre site ait déjà mis la bibliothèque en cache dans son navigateur pour plusieurs CDN. Nous pouvons modifier l’extrait HTML ci-dessus pour utiliser le réseau de diffusion de contenu JavaScript de Cloudflare comme ceci :
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>Appel de jQuery dans votre application
Lorsque vous écrivez votre application jQuery, une bonne pratique consiste à confirmer que la page web a fini de se charger avant que votre code ne commence à s’exécuter. Vous pouvez tester cela en utilisant la méthode ready(), qui laisse votre code s’exécuter lorsque le document est chargé, comme ceci :
$(document).ready(function() {
// Your jQuery application will go here
});Ce début pour une application jQuery est si courant que les développeurs de la bibliothèque ont conçu une syntaxe encore plus brève :
$(function() {
// Your jQuery application will go here
});Sélection d’éléments dans le DOM avec jQuery
La base de la plupart des applications jQuery est la capacité de traverser la structure d’une page web en tant qu’objet (le modèle d’objet de document, ou DOM) et de cibler divers éléments dans le HTML. La sélection d’un élément (ou d’un groupe d’éléments) est l’étape avant de faire quelque chose avec cet élément, comme changer son apparence ou mettre à jour le contenu à proximité. Les sélecteurs jQuery ciblent les propriétés DOM de différentes manières. Les plus courants incluent :
- Par nom d’élément HTML (balise)
- Par les propriétés CSS (y compris les ID et les noms de classe)
- Par la position relative d’un élément dans le DOM
- Par la valeur du contenu des champs de formulaire
- Par l’état actuel d’un élément
Voici quelques exemples :
// Select all HTML paragraph tags in a document
$( "p" );
// Select the element with the ID "myID"
$( "#myID" );
// Select all elements with the CSS class name "myClass"
$( ".myClass" );
// Select all input, textarea, select, and button elements in a form
$( ":input" );
// Select the children of some other element
// (In this case, the entries in an unordered list)
$( "ul > li" );
// Select all anchors with the rel attribute “nofollow”
$( "a[rel='nofollow']" );
// Select all checkboxes in a “checked” state
$( "input:checked" )Vous pouvez combiner les sélecteurs jQuery pour un ciblage plus spécifique. Exemples :
// HTML paragraph tags with the CSS class “myClass”
$( "p.myClass" );
// HTML paragraphs with the text “Kinsta” anywhere within them
$( "p:contains('Kinsta')" );
// HTML div tags that have at least one paragraph tag as a descendent
$( "div:has(p)" );
// The first entry in any unordered list with the CSS class “myList”
$( "ul.myList li:first" ); Manipulation du DOM avec jQuery
Maintenant que vous savez comment sélectionner divers éléments dans une page web, vous pouvez les modifier à l’aide des méthodes jQuery. Comme mentionné précédemment, vous pouvez souvent enchaîner ces actions pour obtenir beaucoup de résultats avec peu de code. Quelques exemples :
// Select the element with the ID “alert” and add a red background
$( "#alert" ).css( "background-color", "red" );
// Select the element with the ID “alert” and add the class “urgent” to its markup
$( "#alert" ).addClass( "urgent" );
// Find any paragraph with the class “myName” and make its content “Kinsta”
$( "p.myName" ).text( "Kinsta" );
// Like the statement above, but with support for HTML markup
$( "p.myName" ).html( "<strong>Kinsta</strong>" );
// Add the attribute/value rel=”nofollow” to every anchor
$( "a" ).attr( "rel", "nofollow" );
// Hide the element with the ID “myDiv” (but keep it in the DOM)
$( "#myDiv" ).hide();
// Make the element hidden above visible again
$( "#myDiv" ).show();
// Remove from the DOM everything INSIDE the element with the ID “myDiv”
$( "#myDiv" ).empty();
// Remove from the DOM the entire element with the ID “myDiv”
$( "#myDiv" ).remove();Gérer les événements avec jQuery
Le type de manipulation du DOM décrit ci-dessus passerait inaperçu aux yeux des visiteurs du web si tout se passait dès le chargement d’une page. C’est pourquoi votre application jQuery peut détecter et répondre à des événements tels que les clics de souris, les mouvements de la souris, les frappes au clavier, et plus encore, afin de créer une expérience véritablement réactive.
Détection des clics de souris avec jQuery
Répondre au clic de la souris (ou au toucher d’un écran tactile) est une tâche courante pour les applications web. Nous avons combiné un peu de jQuery et de HTML dans un exemple qui tire également parti de l’objet intégré event de jQuery, qui contiendra des informations utiles sur notre « événement de clic » :
<script>
// Invoke jQuery
$(document).ready(function () {
// Assign “click” method to all button elements
// Our function passes the built-in object with event details
$( "button" ).click(function ( event ) {
// Make sure all button backgrounds are white
$( "button" ).css( "background-color", "white" );
// Change our H2 text to report the ID of the clicked button
$( "#buttonReport" ).text("You clicked " + event.target.id);
// Set the background color of the clicked button to red
$( "#" + event.target.id ).css("background-color", "red");
});
});
</script>
<h2 id="buttonReport">Click a button!</h2>
<button id="Button1">Button 1</button>
<button id="Button2">Button 2</button>
<button id="Button3">Button 3</button> Le résultat :
Détection du mouvement de la souris avec jQuery
Connaître l’emplacement actuel du pointeur de la souris sur une page web est utile dans de nombreuses applications web réactives. Voici un exemple de l’aide que peut apporter jQuery :
<script>
$(document).ready(function () {
// Detect when the mouse is over a div with the mouseover() method
$( "div" ).mouseover(function ( event ) {
// Make the div under the mouse grey and taller
$( "#" + event.target.id ).css({
"background-color" : "lightgrey",
"height" : "8em"
});
});
// Detect when the mouse moves away with the mouseout() method
$( "div" ).mouseout(function ( event ) {
// Return the size and color of the div to its original state
$( "#" + event.target.id ).css({
"background-color" : "white",
"height" : "4em"
});
});
});
</script>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>L’exemple ci-dessus montre également comment la méthode css() de jQuery peut être utilisée pour définir plusieurs propriétés CSS à la fois. Voici le résultat :
Gestion des requêtes Ajax avec jQuery
Une grande partie de la popularité de jQuery réside dans sa capacité à simplifier les requêtes Ajax que les applications web peuvent utiliser pour échanger des données avec les serveurs sans recharger les pages. La bibliothèque dispose de nombreux outils pour gérer les demandes Ajax de données aux formats texte brut, HTML, XML et JSON. L’approche de jQuery consiste à proposer des options raccourcies pour les tâches les plus courantes. L’une des plus simples de la boîte à outils Ajax est la méthode load():
<div id="myContent">Replace Me</div>
<button>Load Content</button>
<script>
// Request the file content.php from the server after a button is clicked.
// Place the results in the HTML element with the ID “myContent”
$( "button" ).click( function (){
$( "#myContent" ).load( "content.php" );
});
</script>Il s’y passe beaucoup de choses avec seulement trois lignes de JavaScript et deux éléments HTML. Le résultat ressemblerait à quelque chose comme ceci :
Comment utiliser jQuery UI
Ajoutez les extensions jQuery UI à vos projets, et vous aurez accès à de nombreux effets spéciaux et widgets construits sur la bibliothèque jQuery de base. Voici un exemple d’utilisation de jQuery UI pour ajouter un calendrier en popup comme sélecteur de date dans un formulaire web.
Tout d’abord, ajoutez la bibliothèque jQuery UI et ses CSS de soutien à vos pages web. Dans cet exemple, nous établissons un lien vers les bibliothèques sur le CDN JavaScript de Cloudflare avec la bibliothèque jQuery principale :
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />Ensuite, ajoutez un champ de formulaire input dans votre HTML et, via JavaScript, attachez la méthode datepicker() de jQuery UI à l’aide d’un sélecteur :
<label for="myDate">Date:</label>
<input type="text" id="myDate" name="myDate">
<script>
$( function() {
$( "#myDate" ).datepicker();
} );
</script> Un clic dans le champ de formulaire input lancera maintenant le sélecteur de date :
Comment utiliser jQuery dans WordPress
La bibliothèque jQuery est fournie avec WordPress et constitue un élément clé de nombreux thèmes WordPress. Même si votre thème actuel n’utilise pas encore jQuery, vous pouvez profiter de l’enregistrement des dépendances JavaScript dans WordPress pour mettre en place votre code jQuery.
Pour cela, vous devez modifier le fichier functions.php qui fait partie de votre thème. Une mise à jour du thème peut écraser ce fichier, c’est pourquoi il est recommandé de protéger vos modifications en créant d’abord un thème enfant et en modifiant le fichier functions.php. Au minimum, créez une sauvegarde manuelle de WordPress avant de poursuivre.
Enregistrement de votre JavaScript jQuery dans functions.php
Vous pouvez utiliser un client FTP ou SFTP pour transférer le fichier functions.php entre votre bureau et le serveur web afin de le modifier. Les administrateurs de WordPress peuvent également modifier functions.php au sein du CMS :
Depuis le tableau de bord, sélectionnez Apparence > Éditeur de fichiers de thème.
Cliquez sur Fonctions du thème dans le menu de gauche.
Le contenu de votre fichier functions.php dépendra du thème actuellement actif. Ci-dessus se trouvent les fonctions du thème Twenty Twenty-One. Vous pouvez ajouter votre propre script jQuery à la configuration de votre site en utilisant la fonction utilitaire de WordPress wp_enqueue_script(). Voici le modèle pour cette fonction :
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );Et voici ce que tout cela signifie :
- $handle : Le nom convivial lié à ce script. (La bibliothèque centrale jQuery est déjà enregistrée dans WordPress avec le handle jquery.)
- $src : Le chemin et le nom de fichier ou l’URL pointant vers le code source JavaScript.
- $deps : Les handles de toute autre source JavaScript dont ce script a besoin pour fonctionner correctement.
- $ver : Tout numéro de version que vous avez attribué à votre code source JavaScript.
- $in_footer : S’il a la valeur true, le script sera ajouté près du bas de la page. Sinon, les scripts seront placés dans le bloc
<head>.
Une fois qu’un script est mis en file d’attente, il est ajouté à une page avec la fonction add_action(). Voyez tout cela en action en ajoutant un bloc comme celui-ci au bas de votre fichier functions.php:
// 'my_custom_scripts' is a function name of your choice
function my_custom_scripts() {
wp_enqueue_script(
'my_script'
get_template_directory_uri() . '/assets/js/my_script.js',
array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
'1.0',
true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );Ci-dessus, le nouveau script jQuery reçoit le handle my_script, et la fonction utilitaire de WordPress get_template_directory_uri() aide à construire une URL pour le fichier JavaScript dans les répertoires du thème.
Un tableau d’autres handles indique à WordPress que my_script dépend de jQuery core, jQuery-UI core et du plugin jQuery-UI datepicker Enfin, nous avons attribué au script le numéro de version 1.0 et demandé qu’il soit placé près du bas de la page.
Comment charger jQuery depuis un CDN dans WordPress
Nous savons que jQuery peut être servi à partir de plusieurs réseaux de diffusion de contenu. Nous savons également que, dès le départ, WordPress veut charger jQuery et de nombreuses extensions jQuery à partir du système de fichiers du serveur web local.
Vous pouvez modifier ce comportement en éliminant les informations de configuration enregistrées avec le handle jquery existant et en les réécrivant. Pour ce faire, ajoutez un bloc de code dans functions.php en commençant par la fonction wp_deregister_script():
// 'my_custom_scripts' is a function name of your choice
function my_custom_scripts() {
wp_deregister_script('jquery');
wp_register_script(
'jquery',
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
null,
'3.6.0',
False
);
wp_enqueue_script(
'my_script'
get_template_directory_uri() . '/assets/js/my_script.js',
array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
'1.0',
true
);
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );Le handle jquery a été attribué à la bibliothèque jQuery sur le CDN Cloudflare et il reste une dépendance pour le my_script local. Vous pouvez utiliser la même approche pour tirer d’autres composants jQuery – comme jQuery-UI – d’un CDN.
Pour en savoir plus sur jQuery et WordPress, nous avons un guide de dépannage des problèmes de configuration qui peuvent entraîner des erreurs telles que « jQuery Is Not Defined ».
Résumé
Depuis plus de 15 ans, la bibliothèque open source jQuery aide les développeurs à créer des applications web riches et dynamiques en codant le moins possible. Aujourd’hui, jQuery est utilisé sur plus de sites web que toute autre bibliothèque JavaScript.
Elle est également intégrée à certains systèmes de gestion de contenu populaires, dont WordPress. De plus, un solide écosystème d’extensions jQuery créées par d’autres programmeurs JavaScript aide les développeurs de différents niveaux d’expérience à ajouter des fonctionnalités avancées à leurs sites web.
Et si vous souhaitez créer des sites web et des applications fonctionnant avec jQuery, jetez un coup d’œil aux plans d’hébergement WordPress infogérés de Kinsta et aux solutions d’hébergement d’applications et de bases de données.
