jQuery Selectors : sélectionner des éléments DOM ciblés

Les jQuery Selectors représentent un composant important dans la bibliothèque jQuery ; ils facilitent la manipulation et l’interaction avec des éléments HTML. Découvrez avec nous les sélecteurs les plus fréquemment utilisés, à l’aide d’exemples pratiques.

Sélecteurs jQuery : de quoi s’agit-il ?

Les sélecteurs jQuery permettent de sélectionner des éléments en fonction de leurs attributs, de leurs classes, de leurs ID, de leurs types ou de leurs positions dans le DOM. Vous pouvez aussi choisir de combiner plusieurs conditions de manière à créer des sélecteurs complexes. Une fois les objets sélectionnés, vous pouvez réaliser des actions, par exemple ajouter des gestionnaires d’évènements avec la méthode jQuery.on(), modifier des styles CSS ou lire le contenu de certains éléments. L’utilisation des sélecteurs peut également s’avérer utile dans un système de gestion de contenu (ou CMS, pour Content Management System) tel que WordPress : En faisant appel à jQuery pour WordPress, vous pouvez sélectionner et modifier des éléments de façon aussi rapide qu’efficace.

Conseil

Avec l’hébergement Web proposé par IONOS, profitez d’un espace de stockage dédié pour vos projets Web. Les applications de type « Click & Build » vous permettent de créer un site Web qui répond à vos besoins à la suite d’une installation en un seul clic.

Comment utiliser des sélecteurs dans jQuery ?

De manière générale, la syntaxe pour l’utilisation des sélecteurs jQuery se présente de la manière suivante :

$(selector)
jQuery

Dans ce cas, selector correspond au critère selon lequel vous pouvez sélectionner des éléments présents sur votre site. En associant des sélecteurs à des fonctions telles que jQuery.ajax() ou jQuery.each(), vous pouvez en outre accéder aux éléments DOM sélectionnés, récupérer des données de façon asynchrone et exécuter des opérations en boucle sur les éléments concernés. Ainsi, il est facile de faire apparaître des contenus dynamiques sur votre site Web et de les mettre à jour.

Conseil

L’intégration de l’API IONOS à vos projets hébergés peut elle aussi vous permettre de gérer de façon sûre et efficace vos processus de travail. La documentation sur les API proposée par IONOS contient des informations complètes et peut vous aider à exploiter pleinement le potentiel de cette API particulière.

Liste des principaux jQuery Selectors

Vous trouverez ci-dessous quelques exemples des sélecteurs les plus souvent utilisés dans jQuery :

Sélecteurs d’éléments :

// Sélectionne tous les éléments <p> de la page
$("p")
jQuery

Sélecteurs de classes :

// Sélectionne tous les éléments avec la classe "classname
$(".classname")
jQuery

Sélecteurs d’ID :

// Sélectionne l'élément avec l'ID "elementID"
$("#elementID")
jQuery

Sélecteurs d’attributs :

// Sélectionne tous les éléments <input> dont l'attribut "type" est "text"
$("input[type=’text’]")
jQuery

Sélecteurs hiérarchiques :

// Sélectionne tous les éléments <li> qui sont des enfants directs des éléments <ul>
$("ul > li")
jQuery

Sélecteurs de filtres :

// Sélectionne le premier élément <p> de la page
$("p:first")
jQuery

Dans notre tutoriel jQuery, vous pouvez apprendre comment intégrer jQuery à votre projet et découvrir notre présentation concise sur les sélecteurs et leur syntaxe.

Exemple d’application de jQuery Selectors

Dans l’exemple ci-dessous, nous allons utiliser les sélecteurs jQuery, pour sélectionner l’ensemble des éléments <p>d’un site Web et modifier le contenu textuel de ceux-ci :

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("p").text("Un nouveau texte pour tous les paragraphes.");
            });
        </script>
    </head>
    <body>
        <p>Premier paragraphe</p>
        <p>Deuxième paragraphe</p>
        <p>Troisième paragraphe</p>
    </body>
</html>
html

La fonction $(document).ready() permet de s’assurer que le code jQuery ne soit pas exécuté tant que le DOM n’est pas entièrement chargé. Le sélecteur $("p") sert quant à lui à sélectionner l’ensemble des éléments <p> du site. Pour finir, la méthode text() modifie le contenu du texte pour l’ensemble des éléments <p> sélectionnés ; ici, le nouveau texte correspond à « Un nouveau texte pour tous les paragraphes. ».

Conseil

Deploy Now est une solution IONOS simple d’utilisation qui vous permet de déployer vos sites Web de façon automatisée, en passant par GitHub. Vous pouvez modifier le flux de travail de vos actions dans les fichiers YAML en fonction de vos besoins. Retrouvez également des informations sur l’évolution du nombre de visiteurs, la durée des sessions et l’historique des visites dans le tableau de bord gratuit prévu à cet effet.

Cet article vous a-t-il été utile ?