OUJOOD.COM
Qu'est-ce que le sélecteur d'élément jQuery et pourquoi l'utiliser ?
Quand vous développez une page web interactive, vous avez souvent besoin de cibler des éléments HTML précis pour les modifier, les animer ou leur ajouter un comportement. C'est exactement ce que fait le sélecteur d'élément jQuery : il vous permet de retrouver instantanément toutes les balises d'un même type dans votre page, qu'il s'agisse de paragraphes <p>, de titres <h1>, de listes <ul> ou de n'importe quelle autre balise HTML valide.
Ce sélecteur reprend exactement la syntaxe que vous connaissez déjà si vous avez pratiqué le CSS : nommer la balise suffit pour la sélectionner. Pas de syntaxe compliquée à mémoriser.
En 2026, jQuery est encore présent dans des millions de sites, de CMS (WordPress, Joomla…) et d'applications héritées. Même si querySelectorAll() en JavaScript natif offre des performances souvent supérieures, jQuery garde plusieurs avantages concrets :
- Une syntaxe plus concise et lisible pour enchaîner les actions
- Une compatibilité étendue avec les anciens navigateurs
- Une intégration facile dans des projets existants
- Un accès immédiat à un large écosystème de plugins
Maîtriser le sélecteur d'élément, c'est donc poser la première brique de toute manipulation du DOM avec jQuery.
Syntaxe générale :
$("tagname")
| Paramètre | Description |
|---|---|
| tagname | Obligatoire. Nom de la balise HTML à cibler (exemples : p, div, h2, span, ul, li…). La casse n'a pas d'importance. |
Comment fonctionne le sélecteur d'élément jQuery en pratique
Lorsque vous écrivez $("p"), jQuery parcourt l'ensemble du DOM — c'est-à-dire l'arbre de votre page HTML chargée en mémoire — et collecte toutes les balises <p> présentes, peu importe leur position ou leur classe. Le résultat est un objet jQuery sur lequel vous pouvez enchaîner des méthodes comme .css(), .hide(), .on(), etc.
Pensez-y comme un filet de pêche : vous le lancez sur toute la page, et il remonte automatiquement tous les éléments du type que vous avez demandé. Vous n'avez pas à les chercher un par un.
Exemple 1 : appliquer un style à tous les paragraphes de la page
Dans cet exemple, nous sélectionnons tous les éléments <p> présents dans le document et nous leur appliquons un style visuel dynamiquement via JavaScript. C'est une technique courante pour tester visuellement quels éléments sont ciblés, ou pour modifier l'apparence d'un groupe de contenus sans toucher au fichier CSS.
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Sélecteur d'élément jQuery — exemple 1</title> <!-- Chargement de jQuery depuis le CDN officiel (version stable 2026) --> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> $(document).ready(function(){ // $(document).ready() attend que tout le HTML soit chargé avant d'agir // $("p") sélectionne TOUS les paragraphes présents dans la page $("p").css({ border: "1px solid #e74c3c", width: "220px", marginLeft: "80px" }); // Chaque <p> reçoit une bordure rouge, une largeur et une marge gauche }); </script> </head> <body> <h1>Titre principal de la page</h1> <p class="intro">Premier paragraphe (avec classe "intro")</p> <p>Deuxième paragraphe sans classe</p> <p>Troisième paragraphe sans classe</p> </body> </html>
Ce qu'il faut retenir de cet exemple :
- $(document).ready() est indispensable : sans lui, jQuery risque de s'exécuter avant que les balises <p> soient créées dans le DOM.
- $("p") cible tous les paragraphes, quelle que soit leur classe ou leur position dans la page.
- .css() accepte un objet JavaScript avec plusieurs propriétés à appliquer en une seule fois.
⚠ Bonne pratique 2026 : si votre page contient un grand nombre de paragraphes mais que vous n'en ciblez qu'une partie, restreignez le contexte de recherche : $("#zone-principale p") est plus performant que $("p") sur une page volumineuse.
Sélectionner plusieurs types de balises en une seule instruction
jQuery vous permet de cibler différentes balises simultanément en les listant dans la même chaîne, séparées par des virgules. Cette syntaxe est identique à celle des sélecteurs CSS groupés, ce qui la rend très intuitive si vous avez déjà stylisé des pages web.
C'est particulièrement utile quand vous voulez appliquer un comportement commun à plusieurs types d'éléments sans dupliquer votre code.
Syntaxe :
$("h1, li, p")
Voici des cas d'usage concrets où cette technique simplifie votre code :
- Mettre en surbrillance plusieurs types de contenus lors d'une recherche
- Masquer ou afficher plusieurs zones en même temps
- Attacher un même gestionnaire d'événements à différentes balises
- Uniformiser un style temporaire pour du débogage visuel
Exemple 2 : cibler h1, p et li en une seule sélection jQuery
Ici, nous appliquons le même style visuel à trois types de balises différents — un titre, des paragraphes et des éléments de liste — avec une seule ligne de sélection jQuery.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Sélection multiple jQuery — exemple 2</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
// Sélection combinée : on cible h1, p ET li en une seule instruction
// Chaque balise listée est traitée comme un sélecteur CSS indépendant
$("h1, p, li").css({
border: "1px solid #2980b9",
width: "220px",
marginLeft: "80px"
});
// Résultat : tous les h1, p et li reçoivent exactement le même style
});
</script>
</head>
<body>
<h1>Titre principal</h1>
<p>Un paragraphe de démonstration</p>
<ul>
<li>Élément de liste numéro 1</li>
<li>Élément de liste numéro 2</li>
<li>Élément de liste numéro 3</li>
</ul>
</body>
</html>
Comprendre ce qui se passe en interne :
- jQuery analyse chaque sélecteur séparé par une virgule de façon indépendante.
- Il rassemble tous les nœuds correspondants dans un seul objet jQuery.
- La méthode .css() est ensuite appliquée à chaque nœud collecté, dans l'ordre d'apparition dans le DOM.
Optimiser ses sélections jQuery : mise en cache et bonnes pratiques
Une erreur fréquente chez les débutants est de répéter la même sélection jQuery plusieurs fois dans un script. À chaque appel de $("p"), jQuery relance une recherche complète dans le DOM — ce qui a un coût en performance, surtout sur des pages avec beaucoup d'éléments.
La solution : stocker la sélection dans une variable dès la première utilisation, puis réutiliser cette variable. On appelle ça la mise en cache d'une sélection jQuery. Par convention, les développeurs préfixent ces variables avec le symbole $ pour signaler qu'elles contiennent un objet jQuery.
Exemple 3 : mise en cache d'une sélection pour de meilleures performances
Voici comment éviter les recherches DOM répétées en conservant la sélection dans une variable réutilisable.
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
// On stocke la sélection une seule fois dans une variable
// Le préfixe $ indique que $paragraphes est un objet jQuery
var $paragraphes = $("p");
// Première utilisation : changer la couleur du texte
$paragraphes.css("color", "#2c3e50");
// Deuxième utilisation : ajouter une marge — sans relancer la recherche DOM
$paragraphes.css("margin-bottom", "12px");
// Troisième utilisation : masquer les paragraphes au clic sur un bouton
$("button").on("click", function(){
$paragraphes.hide(300);
});
});
</script>
Cette approche est recommandée dès que vous utilisez une même sélection plus d'une fois dans votre script. Elle améliore les performances et rend votre code plus lisible.
Tableau récapitulatif : sélecteur d'élément jQuery vs JavaScript natif
| Méthode | Syntaxe | Résultat retourné | Cas d'usage recommandé |
|---|---|---|---|
| jQuery | $("p") | Objet jQuery (itérable, chainable) | Projets jQuery existants, plugins, CMS |
| JS natif | document.querySelectorAll("p") | NodeList statique | Projets modernes sans dépendance jQuery |
Ce tutoriel vous a présenté le sélecteur d'élément jQuery de façon progressive : de la sélection simple d'une balise unique, à la sélection combinée de plusieurs types, jusqu'à l'optimisation par mise en cache. Ces bases sont indispensables pour manipuler le DOM avec jQuery efficacement et écrire un code front-end maintenable en 2026.
Par gerywa | Mis à jour le 29 mars 2026