logo oujood
🔍

jQuery sélecteur [attribute=value] : filtrer des éléments par la valeur d'un attribut

Le sélecteur jQuery [attribute=value] cible les éléments dont un attribut correspond à une valeur précise. Découvrez aussi ses variantes avancées pour des filtrages encore plus fins.

OUJOOD.COM

Définition et syntaxe du sélecteur jQuery [attribute=value]

jQuery — cours et tutoriel pratique

Là où [attribute] vérifie simplement si un attribut existe, [attribute=value] va plus loin : il vérifie que cet attribut a exactement la valeur que vous cherchez. Pas une valeur approchante, pas une valeur partielle — la valeur exacte, caractère par caractère.

C'est le sélecteur à utiliser quand on veut cibler des champs de formulaire d'un type précis (type="email"), des liens vers un domaine spécifique, ou tout élément dont la valeur d'un attribut doit correspondre à un critère strict.

Syntaxe :

$("[attribute='value']") — sélectionne tous les éléments dont l'attribut est exactement égal à la valeur spécifiée.

Paramètre Description
attribute Obligatoire. Nom de l'attribut HTML à cibler (ex. : type, href, hreflang, name).
value Obligatoire. Valeur exacte que doit avoir l'attribut. La comparaison est sensible à la casse.

Variantes avancées pour des filtrages plus précis

jQuery propose six variantes du sélecteur d'attribut. Chacune répond à un besoin différent — de la correspondance exacte à la recherche dans une liste de mots. Toutes sont compatibles avec les navigateurs modernes en 2026.

Sélecteur Comportement
[attr='val'] Attribut exactement égal à val
[attr^='val'] Attribut commençant par val
[attr$='val'] Attribut se terminant par val
[attr*='val'] Attribut contenant val (n'importe où)
[attr|='val'] Attribut égal à val ou commençant par val- (utile pour les codes de langue)
[attr~='val'] Attribut contenant val comme mot entier dans une liste séparée par des espaces

Exemples pratiques commentés

Exemple 1 : sélectionner des champs de formulaire par type exact

Le cas d'usage le plus courant de [attribute=value] en développement web quotidien : appliquer des styles différents à chaque type de champ dans un formulaire. Plus besoin d'ajouter des classes CSS à la main — jQuery fait le tri directement depuis le HTML.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>jQuery — sélecteur [type=value] sur formulaire</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
  $(document).ready(function(){
    // Fond jaune pour les champs texte uniquement
    $("input[type='text']").css("background-color","#ffffcc");
    // Fond bleu clair pour les champs email uniquement
    $("input[type='email']").css("background-color","#cce5ff");
    // Opacité réduite sur le bouton d'envoi
    $("input[type='submit']").css("opacity","0.6");
  });
  </script>
</head>
<body>
  <form>
    <label>Nom : <input type="text" name="nom"></label><br>
    <label>Email : <input type="email" name="email"></label><br>
    <input type="submit" value="Envoyer">
  </form>
</body>
</html>

Résultat : Chaque type de champ reçoit son propre style visuel, sans toucher au CSS ni ajouter la moindre classe dans le HTML.

Exemple 2 : filtrer des liens par langue avec [hreflang|='val']

Le sélecteur |= est particulièrement utile pour la gestion multilingue. Il sélectionne les éléments dont l'attribut est exactement égal à la valeur ou commence par cette valeur suivie d'un tiret — ce qui correspond exactement au format des codes de langue (en, en-US, en-GB).

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>jQuery — filtrer des liens par hreflang</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
  $(document).ready(function(){
    // Bordure bleue pour les liens français (fr ou fr-BE, fr-CA...)
    $('a[hreflang|="fr"]').css('border','2px solid #0000ff');
    // Bordure verte pour les liens anglais (en, en-US, en-GB...)
    $('a[hreflang|="en"]').css('border','2px solid green');
    // Fond doré pour les liens avec hreflang="english" (valeur non standard, égalité exacte)
    $('a[hreflang="english"]').css("background-color","#ddaa00");
  });
  </script>
  <style>
    a { display: inline-block; margin: 5px; padding: 5px; }
  </style>
</head>
<body>
  <a href="page-fr.html" hreflang="fr">Lien en français</a>
  <a href="page-en.html" hreflang="en">Link in English</a>
  <a href="page-en-us.html" hreflang="en-US">Link US English</a>
  <a href="page-en-gb.html" hreflang="en-GB">Link British English</a>
  <a href="page-other.html" hreflang="english">Lien hreflang non standard</a>
</body>
</html>

Résultat : Les liens fr reçoivent une bordure bleue, les liens en, en-US et en-GB une bordure verte. Le lien avec hreflang="english" (valeur non standard) reçoit un fond doré via l'égalité exacte.

Exemple 3 : variantes ^=, $= et *= sur des liens

Ces trois variantes sont très pratiques pour filtrer des URLs sans connaître leur chemin complet. On peut cibler les liens externes, les fichiers PDF, ou tout lien contenant un mot-clé dans son adresse.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>jQuery — variantes ^= $= *= sur les liens</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
  $(document).ready(function(){
    // ^= : liens dont href COMMENCE par "https" (liens externes)
    $("a[href^='https']").css("color","#0077cc");
    // $= : liens dont href SE TERMINE par ".pdf" (documents PDF)
    $("a[href$='.pdf']").css("font-weight","bold").append(" 📄");
    // *= : liens dont href CONTIENT "oujood" (liens internes au site)
    $("a[href*='oujood']").css("background-color","#eaffea");
  });
  </script>
</head>
<body>
  <a href="https://www.oujood.com/jquery/">Tutoriels jQuery — oujood.com</a><br>
  <a href="https://jquery.com">Site officiel jQuery</a><br>
  <a href="guide-jquery.pdf">Télécharger le guide jQuery</a><br>
  <a href="jquery-selecteur-attribute.php">Sélecteur [attribute]</a>
</body>
</html>

Résultat : Les liens https passent en bleu, le lien PDF apparaît en gras avec une icône, et le lien contenant oujood reçoit un fond vert clair.

Bonnes pratiques et compatibilité en 2026

Pour de meilleures performances, combinez toujours le sélecteur d'attribut avec un nom de balise HTML. Par exemple, $("input[type='text']") est plus rapide que $("[type='text']") car jQuery limite la recherche aux seules balises <input>.

Ces sélecteurs fonctionnent avec jQuery 4.0.0 (version stable en 2026) et sont compatibles avec tous les navigateurs modernes. Pour cibler des éléments par la simple présence d'un attribut sans se soucier de sa valeur, consultez la page jQuery sélecteur [attribute].

jQuery — références des sélecteurs

Par carabde | Mis à jour le 22 mai 2026