Les filtres d'attribut en jQuery

1. Introduction aux Filtres d'Attribut

En jQuery, la sélection d'éléments ne se limite pas aux balises, aux classes ou aux identifiants. Les filtres d'attribut vous permettent de cibler des éléments HTML en vous basant spécifiquement sur la présence de certains attributs (comme href, src, title, name) ou sur la valeur exacte (ou partielle) de ces attributs.

Cette fonctionnalité est extrêmement puissante, par exemple pour sélectionner tous les liens qui pointent vers un site externe, ou toutes les images dont le nom de fichier se termine par ".png".

2. Syntaxe de base et tableau récapitulatif

Les filtres d'attribut s'écrivent toujours entre crochets [ ]. Ils s'inspirent des sélecteurs CSS mais jQuery offre une flexibilité supplémentaire.

3. Exemples Pratiques et Détaillés

A. Le filtre de présence d'attribut : [attribut]

Imaginons que nous voulons mettre en évidence toutes les images de notre page qui possèdent un texte alternatif (attribut alt).

// Ajoute une bordure verte à toutes les images possédant un attribut 'alt'
$("img[alt]").css("border", "3px solid green");

B. L'égalité stricte et la différence : = et !=

Très utile dans les formulaires, ce filtre permet de séparer rapidement les différents types d'éléments d'entrée (input).

// Sélectionne uniquement les cases à cocher et modifie leur comportement
$("input[type='checkbox']").prop("checked", true);

// Cache tous les inputs qui ne sont pas des boutons de soumission
$("input[type!='submit']").hide();

C. Les filtres de chaîne de caractères : ^= (Commence), $= (Finit) et *= (Contient)

C'est ici que la magie de jQuery opère vraiment. Ces sélecteurs agissent comme des expressions régulières simplifiées.

// 1. Commence par (^) : Cibler les liens externes et les ouvrir dans un nouvel onglet
$("a[href^='http://']").attr("target", "_blank");

// 2. Finit par ($) : Trouver tous les fichiers Excel dans une liste de téléchargement
$("a[href$='.xlsx']").css("color", "green");

// 3. Contient (*) : Sélectionner tous les éléments dont l'ID contient le mot "menu" (ex: "menuTop", "leftMenu")
$("div[id*='menu']").addClass("highlight");

4. Combinaison de plusieurs filtres d'attributs

jQuery permet de cumuler plusieurs filtres d'attributs pour cibler un élément avec une précision chirurgicale. Il suffit de coller les crochets les uns à la suite des autres. L'élément ciblé devra répondre à toutes les conditions (équivalent d'un opérateur logique ET).

Exemple : Sélectionner un champ input qui est à la fois de type "text" ET dont le nom contient "user".

$("input[type='text'][name*='user']").css("background-color", "#e0f7fa");

5. Cas pratique récapitulatif

Voici un petit script complet qui analyse une liste de documents et applique des icônes ou des couleurs différentes selon l'attribut href de chaque lien.

$(document).ready(function() {
    // 1. Tous les liens vers des PDF en rouge
    $("a[href$='.pdf']").css("color", "red");

    // 2. Tous les liens sécurisés vers l'extérieur avec une police grasse
    $("a[href^='https']").css("font-weight", "bold");

    // 3. Les liens qui n'ont pas d'attribut 'title' reçoivent un titre par défaut
    $("a[href][title='']").attr("title", "Cliquez pour ouvrir le lien");
});

Rédigé et structuré par : Med Khalil Kribi