Les jQuery Selectors re­pré­sen­tent un composant important dans la bi­blio­thèque jQuery ; ils fa­ci­li­tent la ma­ni­pu­la­tion et l’in­te­rac­tion avec des éléments HTML. Découvrez avec nous les sé­lec­teurs les plus fré­quem­ment utilisés, à l’aide d’exemples pratiques.

Sé­lec­teurs jQuery : de quoi s’agit-il ?

Les sé­lec­teurs jQuery per­met­tent de sé­lec­tion­ner 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 con­di­tions de manière à créer des sé­lec­teurs complexes. Une fois les objets sé­lec­tion­nés, vous pouvez réaliser des actions, par exemple ajouter des ges­tion­naires d’évè­ne­ments avec la méthode jQuery.on(), modifier des styles CSS ou lire le contenu de certains éléments. L’uti­li­sa­tion des sé­lec­teurs peut également s’avérer utile dans un système de gestion de contenu (ou CMS, pour Content Ma­na­ge­ment System) tel que WordPress : En faisant appel à jQuery pour WordPress, vous pouvez sé­lec­tion­ner et modifier des éléments de façon aussi rapide qu’efficace.

Conseil

Avec l’hé­ber­ge­ment Web proposé par IONOS, profitez d’un espace de stockage dédié pour vos projets Web. Les ap­pli­ca­tions de type « Click & Build » vous per­met­tent de créer un site Web qui répond à vos besoins à la suite d’une ins­tal­la­tion en un seul clic.

Comment utiliser des sé­lec­teurs dans jQuery ?

De manière générale, la syntaxe pour l’uti­li­sa­tion des sé­lec­teurs jQuery se présente de la manière suivante :

$(selector)
jQuery

Dans ce cas, selector cor­res­pond au critère selon lequel vous pouvez sé­lec­tion­ner des éléments présents sur votre site. En associant des sé­lec­teurs à des fonctions telles que jQuery.ajax() ou jQuery.each(), vous pouvez en outre accéder aux éléments DOM sé­lec­tion­nés, récupérer des données de façon asyn­chrone et exécuter des opé­ra­tions en boucle sur les éléments concernés. Ainsi, il est facile de faire ap­pa­raître des contenus dy­na­miques sur votre site Web et de les mettre à jour.

Conseil

L’in­té­gra­tion 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 do­cu­men­ta­tion sur les API proposée par IONOS contient des in­for­ma­tions complètes et peut vous aider à exploiter plei­ne­ment le potentiel de cette API par­ti­cu­lière.

Liste des prin­ci­paux jQuery Selectors

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

Sé­lec­teurs d’éléments :

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

Sé­lec­teurs de classes :

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

Sé­lec­teurs d’ID :

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

Sé­lec­teurs d’attributs :

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

Sé­lec­teurs hié­rar­chiques :

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

Sé­lec­teurs 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é­sen­ta­tion concise sur les sé­lec­teurs et leur syntaxe.

Exemple d’ap­pli­ca­tion de jQuery Selectors

Dans l’exemple ci-dessous, nous allons utiliser les sé­lec­teurs jQuery, pour sé­lec­tion­ner 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 en­tiè­re­ment chargé. Le sélecteur $("p") sert quant à lui à sé­lec­tion­ner 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é­lec­tion­nés ; ici, le nouveau texte cor­res­pond à « Un nouveau texte pour tous les pa­ra­graphes. ».

Conseil

Deploy Now est une solution IONOS simple d’uti­li­sa­tion qui vous permet de déployer vos sites Web de façon au­to­ma­ti­sé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 in­for­ma­tions sur l’évolution du nombre de visiteurs, la durée des sessions et l’his­to­rique des visites dans le tableau de bord gratuit prévu à cet effet.

Aller au menu principal