jQuery Academy · Leçon

Création de pseudo-sélecteurs personnalisés

Apprenez à enregistrer vos propres pseudo-sélecteurs avec jQuery.expr[':'] afin de simplifier la logique de sélection d’éléments complexes et d’améliorer la lisibilité du code.

Leçon 1 sur 312 étapes

Création de pseudo-sélecteurs personnalisés est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 3 leçons au total.

Pourquoi utiliser des sélecteurs personnalisés ?

Les sélecteurs intégrés de jQuery sont extrêmement puissants, mais vous pouvez parfois rencontrer des besoins de filtrage précis, complexes ou répétitifs.

C'est là que les pseudo-sélecteurs personnalisés sont utiles ! Ils vous permettent de définir vos propres filtres spécialisés, de simplifier une logique de sélection complexe et de rendre votre code plus propre et plus lisible.

Quand les sélecteurs par défaut ne suffisent plus

Imaginez que vous deviez souvent sélectionner tous les éléments <div> qui possèdent non seulement une classe précise, mais aussi un attribut data-status défini sur 'active'.

Vous pouvez combiner des sélecteurs standard, mais cela peut devenir long et moins intuitif si la logique est plus complexe, ou si vous devez l'appliquer fréquemment dans votre application.

Découvrez jQuery.expr[':']

jQuery.expr[':'] est l'objet dans lequel vous enregistrez vos pseudo-sélecteurs personnalisés. Voyez-le comme une extension du moteur de sélection principal de jQuery.

Lorsque jQuery rencontre un sélecteur tel que :myCustomSelector, il recherche myCustomSelector dans cet objet. Vous affectez une fonction à une clé (le nom de votre sélecteur), puis jQuery l'exécute pour chaque élément qu'il teste.

Définir `:has-tooltip`

Définissons un sélecteur personnalisé simple, :has-tooltip, qui identifie les éléments possédant un attribut title. Voici comment l'ajouter à jQuery.expr[':'].

La fonction que vous fournissez reçoit l'élément DOM elem actuellement testé. Elle doit renvoyer true si l'élément correspond à vos critères et false dans le cas contraire.

jQuery.expr[':'].hasTooltip = function(elem) {
  // Check if the element has a 'title' attribute
  return !!$(elem).attr('title');
};

Utiliser votre sélecteur personnalisé

Maintenant que notre sélecteur :has-tooltip est défini, nous pouvons l'utiliser comme n'importe quel autre pseudo-sélecteur jQuery ! Essayez d'exécuter l'exemple ci-dessous.

Il mettra en évidence tous les éléments qui possèdent un attribut title, illustrant ainsi la puissance de votre nouveau filtre personnalisé.

<!DOCTYPE html>
<html>
<head>
<title>Custom Selector Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .highlight {
    border: 2px solid green;
    background-color: #e0ffe0;
  }
</style>
</head>
<body>
  <p title="This is a tooltip">Paragraph with tooltip</p>
  <div id="no-tooltip">Just a div</div>
  <span title="Another tooltip here">Span with tooltip</span>

  <script>
    jQuery.expr[':'].hasTooltip = function(elem) {
      return !!$(elem).attr('title');
    };

    $(document).ready(function() {
      $('p:has-tooltip, span:has-tooltip').addClass('highlight');
    });
  </script>
</body>
</html>

Les arguments `elem`, `i` et `match`

Lorsque la fonction de votre sélecteur personnalisé s'exécute, elle reçoit trois arguments importants :

elem : l'élément DOM actuellement testé.
i : l'index de elem dans l'ensemble des éléments sur lesquels jQuery effectue actuellement une itération.
match : un tableau contenant les résultats de l'expression régulière utilisée pour analyser le sélecteur. Cet argument est essentiel pour les sélecteurs qui acceptent des arguments.

Pour les sélecteurs simples, vous utiliserez principalement l'argument elem.

Sélecteur fondé sur des attributs de données

Créons un sélecteur :data-status(active) pour trouver les éléments dont l'attribut data-status est égal à 'active'. Cela montre comment utiliser l'argument match.

La valeur 'active' (l'argument entre parenthèses) se trouve dans match[3]. Votre sélecteur peut ainsi être dynamique !

<!DOCTYPE html>
<html>
<head>
<title>Data Status Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .active-item {
    background-color: lightgreen;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div data-status="active">Item 1 (Active)</div>
  <div data-status="inactive">Item 2 (Inactive)</div>
  <p data-status="active">Item 3 (Active)</p>
  <span>Item 4 (No Status)</span>

  <script>
    jQuery.expr[':'].dataStatus = function(elem, i, match) {
      const expectedStatus = match[3]; // e.g., 'active' from :data-status(active)
      const actualStatus = $(elem).data('status');
      return actualStatus === expectedStatus;
    };

    $(document).ready(function() {
      $(':data-status(active)').addClass('active-item');
    });
  </script>
</body>
</html>

Comprendre `match[3]`

Le tableau match est le résultat de l'analyse par l'expression régulière interne de jQuery de votre chaîne de sélecteur. Pour un sélecteur tel que :yourSelector(argument), la partie argument est généralement capturée dans match[3].

Ce mécanisme est essentiel pour créer des pseudo-sélecteurs personnalisés dynamiques et flexibles qui acceptent des paramètres, ce qui les rend plus réutilisables et plus puissants dans divers scénarios de filtrage.

Logique avancée : `:containsExact`

Construisons un sélecteur plus avancé : :containsExact(text). Contrairement au sélecteur par défaut :contains() de jQuery, celui-ci ne correspondra qu'aux éléments dont l'intégralité du contenu textuel (à l'exclusion des éléments enfants) est exactement le texte fourni.

Cela implique souvent de comparer soigneusement $(elem).text().trim() afin de garantir une correspondance exacte.

<!DOCTYPE html>
<html>
<head>
<title>Contains Exact Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .exact-match {
    font-weight: bold;
    color: blue;
    background-color: #e0f0ff;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div>Hello World</div>
  <div>Hello there!</div>
  <p>Hello</p>
  <span>World</span>

  <script>
    jQuery.expr[':'].containsExact = function(elem, i, match) {
      const searchText = match[3]; // The text inside the parentheses
      const elementText = $(elem).text().trim();
      return elementText === searchText;
    };

    $(document).ready(function() {
      $(':containsExact(Hello World)').addClass('exact-match');
    });
  </script>
</body>
</html>

Conseils pour les sélecteurs personnalisés

Gardez ces bonnes pratiques à l'esprit lorsque vous créez vos sélecteurs personnalisés :

Performances : Une logique complexe peut nuire aux performances, en particulier avec de grands DOM. Optimisez vos fonctions de sélecteur.
Clarté : Nommez clairement vos sélecteurs afin que leur objectif soit immédiatement évident pour toute personne lisant votre code.
Réutilisabilité : Concevez-les de manière suffisamment générique pour être utiles dans divers contextes, et pas seulement dans un scénario précis.
Éviter les conflits : Choisissez des noms uniques afin d'éviter les collisions avec de futurs sélecteurs jQuery ou avec d'autres extensions que vous pourriez utiliser.

Défi : sélecteur personnalisé

Vous souhaitez créer un sélecteur personnalisé :is-empty qui sélectionne les éléments dépourvus de contenu textuel et d'éléments enfants. Cela ressemble au sélecteur intégré :empty de jQuery.

Lesquels des extraits de code suivants définissent correctement ce pseudo-sélecteur personnalisé ?

Réponds-y dans la leçon interactive

Récapitulatif : sélecteurs personnalisés

Dans cette leçon, vous avez appris à étendre les puissantes capacités de sélection de jQuery en créant vos propres pseudo-sélecteurs personnalisés à l'aide de jQuery.expr[':'].

Vous avez découvert comment définir des sélecteurs simples, leur transmettre des arguments via le tableau match et les utiliser pour simplifier une logique de filtrage complexe, rendant ainsi votre code jQuery plus lisible, plus facile à maintenir et plus efficace.

Gratuit pour commencer

Apprends JavaScript avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 22
Leçons: 48

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Création de pseudo-sélecteurs personnalisés » est-elle gratuite ?

Oui — le texte complet de « Création de pseudo-sélecteurs personnalisés » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Création de pseudo-sélecteurs personnalisés » ?

Apprenez à enregistrer vos propres pseudo-sélecteurs avec jQuery.expr[':'] afin de simplifier la logique de sélection d’éléments complexes et d’améliorer la lisibilité du code. Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer jQuery Academy ?

Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 3.

Combien de temps prend la leçon « Création de pseudo-sélecteurs personnalisés » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?

Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Création de pseudo-sélecteurs personnalisés
Filtrage avancé avec .filter()
Exclusion d’éléments avec .not()

← Retour à jQuery Academy