Médiaforma

jQuery – Sélecteur d’attributs évolués

Print Friendly

Il est possible d’agir plus finement sur la valeur d’un attribut. Par exemple pour trouver les attributs dont la valeur commence par, se termine par ou contient une chaîne donnée. Voici les sélecteurs utilisables :

Sélecteur Éléments sélectionnés
[nom*="valeur"]
Éléments qui possèdent un attribut nom qui contient (partiellement ou totalement) la valeur spécifiée.
[nom~="valeur"]
Éléments qui possèdent un attribut nom qui contient la valeur spécifiée, délimité par des espaces.
[nom$="valeur"]
Éléments qui possèdent un attribut nom qui se termine par la valeur spécifiée.
[nom!="valeur"]
Éléments qui ne possèdent pas l’attribut nom, ou qui possèdent un attribut nom différent de la valeur spécifiée.
[nom^="valeur"]
Éléments qui possèdent un attribut nom qui commence par la valeur spécifiée.

 

Pour illustrer ces sélecteurs, saisissez ce code et sauvegardez-le sous le nom selections2.htm.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <img src="montagne.jpg" title="paysage montagne" border="4px">
    <img src="desert.jpg" title="paysage desert" border="4px">
    <img src="mer.jpg" title="paysage mer enfants plage" border="4px">
    <img src="glace.jpg" title="glace"  border="4px">

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Le code jQuery sera inséré ici
      });
    </script>
  </body>
</html>

 

Pour affecter la couleur rouge à la bordure d’une image, vous utiliserez l’instruction suivante :

css('border-color',"red');

 

Par exemple, pour afficher une bordure rouge autour des images dont l’attribut title commence par la lettre « p« , vous utiliserez cette instruction :

$('[title^="p"]').css('border-color','red');

 

Exercice

Affichez une bordure bleue autour des images dont l’attribut title contient le mot paysage

Solution

$('[title~="paysage"]').css('border-color','blue');
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply