0Pricing
jQuery Academy · Leçon

Sélecteurs d’attributs avancés

Découvrez des sélecteurs d’attributs complexes pour cibler les éléments selon la présence, la valeur ou les correspondances partielles de leurs attributs, et améliorez la précision de vos sélections.

Sélecteurs d’attributs avancé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.

Bonjour, sélecteurs d’attributs !

Bienvenue dans une méthode puissante pour sélectionner des éléments avec jQuery ! Nous allons découvrir les sélecteurs d’attributs, qui vous permettent de choisir des éléments en fonction de leurs attributs HTML.

Considérez les attributs comme des données supplémentaires associées à une balise HTML, telles que id, class, href, data-*, etc.

Sélection par présence d’attribut

Le sélecteur d’attribut le plus simple recherche les éléments qui possèdent un attribut donné, quelle que soit sa valeur. Il s’écrit [attributeName].

C’est très utile lorsque vous avez simplement besoin de vérifier si un attribut existe sur un élément. Par exemple, $('[title]') recherche tous les éléments possédant un attribut title.

Essayez : présence d’un attribut

Utilisons le sélecteur de présence pour trouver tous les éléments qui possèdent un attribut title et afficher leurs noms de balises.

<p title="Hello Tooltip">This paragraph has a title.</p>
<div>Another element</div>
<span title="Span Title">A span with a title.</span>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[title]').each(function(index, element) {
      $('#output').append('<p>Found: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; with title="' + $(element).attr('title') + '"</p>');
    });
  });
</script>

Correspondance exacte des valeurs d’attribut

Pour sélectionner les éléments dont un attribut possède une valeur exacte, utilisez [attributeName="value"].

Ce sélecteur est précis ! Il ne correspond que si la valeur de l’attribut est identique à celle que vous indiquez, en tenant compte de la casse (la comparaison des valeurs d’attributs jQuery est sensible à la casse).

Correspondance exacte en pratique

Trouvez les éléments possédant un attribut data-type dont la valeur est exactement "primary".

<button data-type="primary">Submit</button>
<button data-type="secondary">Cancel</button>
<a href="#" data-type="primary">Link</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[data-type="primary"]').each(function(index, element) {
      $('#output').append('<p>Exact match: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; (Type: ' + $(element).data('type') + ')</p>');
    });
  });
</script>

Valeurs d’attribut commençant par…

Le sélecteur [attributeName^="value"] trouve les éléments dont la valeur d’un attribut commence par une chaîne donnée.

  • Il est utile pour regrouper des éléments suivant des conventions de nommage similaires.
  • Il est idéal pour filtrer les liens, par exemple tous les liens commençant par /products.

Valeurs se terminant par… ou contenant…

Ces sélecteurs offrent davantage de souplesse pour les correspondances partielles :

  • [attributeName$="value"] : correspond si la valeur de l’attribut se termine par la chaîne indiquée.
  • [attributeName*="value"] : correspond si la valeur de l’attribut contient la chaîne indiquée, où que ce soit.

Démonstration en direct : correspondances partielles

Observez comment ^=, $= et *= ciblent différents éléments en fonction de valeurs partielles de leurs attributs href.

<a href="/products/item-1">Item 1</a>
<a href="/about/contact">Contact</a>
<a href="/products/item-2">Item 2</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('#output').append('<h3>Starts with "/products":</h3>');
    $('[href^="/products"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Ends with "contact":</h3>');
    $('[href$="contact"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Contains "item":</h3>');
    $('[href*="item"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });
  });
</script>

Sélecteurs de mots et de traits d’union

Deux autres sélecteurs spécialisés :

  • [attributeName~="value"] : correspond si la valeur de l’attribut contient un mot donné, délimité par des espaces. Il est souvent utilisé avec les attributs class.
  • [attributeName|="value"] : correspond si la valeur de l’attribut est exactement "value" ou commence par "value-", suivi d’un trait d’union. Il est couramment utilisé pour les codes de langue comme lang="en-US".

Vérification rapide : sélecteurs

Quel(s) sélecteur(s) jQuery identifierai(en)t correctement l’élément <div> ci-dessous ?

<div class="card active-item" data-role="admin-panel" lang="en-US">
  Admin Area
</div>

Récapitulatif : sélecteurs d’attributs

Excellent travail ! Vous maîtrisez maintenant les sélecteurs d’attributs avancés :

  • [attr] : vérifie la présence d’un attribut.
  • [attr="val"] : correspond aux valeurs exactes.
  • [attr^="val"] : correspond aux valeurs qui commencent par.
  • [attr$="val"] : correspond aux valeurs qui se terminent par.
  • [attr*="val"] : correspond aux valeurs qui contiennent.
  • [attr~="val"] : correspond aux valeurs contenant un mot séparé par des espaces.
  • [attr|="val"] : correspond aux valeurs exactes ou commençant par « val- ».

Utilisez-les pour écrire du code jQuery très précis et efficace !

Questions Fréquemment Posées

La leçon « Sélecteurs d’attributs avancés » est-elle gratuite ?

Oui — le texte complet de « Sélecteurs d’attributs avancé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 « Sélecteurs d’attributs avancés » ?

Découvrez des sélecteurs d’attributs complexes pour cibler les éléments selon la présence, la valeur ou les correspondances partielles de leurs attributs, et améliorez la précision de vos sélections. 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 « Sélecteurs d’attributs avancé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

  1. Sélecteurs d’attributs avancés
  2. Pseudo-classes et sélecteurs personnalisés
  3. Techniques efficaces de parcours du DOM
← Retour à jQuery Academy