OUJOOD.COM
Définition et syntaxe du sélecteur jQuery [attribute]
jQuery — cours et tutoriel pratique
Le sélecteur jQuery [attribute] répond à une question simple : est-ce que cet attribut existe sur cet élément ? Pas besoin de connaître sa valeur. Si l'attribut est là, l'élément est sélectionné. C'est tout.
C'est justement ce qui le distingue de [attribute=value] — ce dernier exige une valeur précise. Ici, on cherche uniquement la présence de l'attribut, ce qui rend ce sélecteur très pratique pour des opérations globales : déboguer une page, appliquer un style à tous les champs d'un formulaire, repérer des liens avec un attribut hreflang, etc.
Syntaxe :
$("[attribute]") — sélectionne tous les éléments du DOM qui possèdent cet attribut, quelle que soit sa valeur.
| Paramètre | Description |
|---|---|
| attribute | Obligatoire. Nom de l'attribut HTML à rechercher (ex. : id, href, type, hreflang, disabled). |
Notez que ce sélecteur ne distingue pas les valeurs vides des valeurs renseignées : un élément avec alt="" est quand même sélectionné par $("[alt]"), puisque l'attribut est présent dans le code HTML.
Exemples pratiques commentés
Exemple 1 : mettre en évidence tous les éléments possédant un attribut id
Le sélecteur $("[id]") cible tous les éléments du DOM qui possèdent un attribut id, quelle que soit sa valeur. C'est une technique utile pour déboguer la structure d'une page ou vérifier rapidement quels blocs sont identifiés. Aucune classe CSS supplémentaire n'est nécessaire.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery — sélectionner tous les éléments avec un id</title>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
$(document).ready(function(){
// [id] sélectionne TOUS les éléments ayant un attribut id, peu importe sa valeur
$("[id]").css("background-color","#22dd55");
// On affiche dans la console la liste des id trouvés — utile pour le débogage
$("[id]").each(function(){
console.log("Élément avec id : " + $(this).attr("id"));
});
});
</script>
</head>
<body>
<h1>Bienvenue</h1>
<p class="intro">Paragraphe sans id — non sélectionné</p>
<p id="para-intro">Paragraphe avec id="para-intro" — sélectionné et coloré</p>
<p>Autre paragraphe sans id — non sélectionné</p>
<div>Liste ordonnée avec id :
<ol id="liste-principale">
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ol>
</div>
</body>
</html>
Résultat : Le paragraphe avec id="para-intro" et la liste id="liste-principale" reçoivent un fond vert. Le reste de la page n'est pas touché.
Exemple 2 : sélectionner des champs de formulaire par leur attribut type
Quand on veut appliquer des styles différents à chaque type de champ dans un formulaire, [type] est plus direct que d'ajouter des classes CSS à la main. L'exemple ci-dessous cible tous les éléments <input> qui ont un attribut type et leur applique un style selon leur rôle.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery — repérer tous les champs avec un attribut type</title>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
$(document).ready(function(){
// Sélectionne tous les input qui ont un attribut type (donc tous ici)
$("input[type]").css("border", "2px solid #0077cc");
// On affiche le type de chaque champ dans la console
$("input[type]").each(function(){
console.log("Champ trouvé — type : " + $(this).attr("type"));
});
});
</script>
</head>
<body>
<form>
<label>Nom : <input type="text" name="nom"></label><br>
<label>Email : <input type="email" name="email"></label><br>
<label>Âge : <input type="number" name="age"></label><br>
<input type="submit" value="Envoyer">
</form>
</body>
</html>
Résultat : Tous les champs du formulaire reçoivent une bordure bleue, et la console liste leurs types respectifs : text, email, number, submit.
Exemple 3 : repérer les images sans attribut alt
Un cas d'usage fréquent en audit d'accessibilité : détecter les images qui n'ont pas d'attribut alt. Le sélecteur $("img:not([alt])") combine [attribute] avec :not() pour isoler exactement les éléments problématiques.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery — détecter les images sans attribut alt</title>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
$(document).ready(function(){
// Sélectionne les images QUI ONT un attribut alt
$("img[alt]").css("border","3px solid green");
// Sélectionne les images SANS attribut alt — problème d'accessibilité
$("img:not([alt])").css("border","3px solid red");
$("img:not([alt])").after("<span style='color:red'> ⚠ alt manquant</span>");
});
</script>
</head>
<body>
<img src="chat.jpg" alt="Un chat roux sur un canapé">
<img src="logo.png">
<img src="banniere.jpg" alt="">
</body>
</html>
Résultat : chat.jpg (alt renseigné) et banniere.jpg (alt vide mais présent) reçoivent une bordure verte. logo.png, sans attribut alt, reçoit une bordure rouge et un avertissement visible.
Conseil de performance
Pour de meilleures performances, combinez toujours le sélecteur d'attribut avec un nom de balise HTML. Par exemple, $("a[hreflang]") est plus rapide que $("[hreflang]") car jQuery limite la recherche aux seules balises <a> au lieu de parcourir tout le DOM. Sur des pages avec beaucoup d'éléments, la différence se ressent.
Ce sélecteur est compatible avec tous les navigateurs modernes (Chrome, Firefox, Edge, Safari) et fonctionne avec jQuery 4.0.0 (version stable en 2026). Pour aller plus loin sur le filtrage par valeur précise, consultez la page jQuery sélecteur [attribute=value].
Par carabde | Mis à jour le 22 mai 2026