Médiaforma

All posts tagged sélecteurs

Rendez-vous sur la page http://www.w3schools.com/cssref/css_selectors.asp pour avoir un aperçu général des sélecteurs utilisables en jQuery :

 


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');

Pour terminer cette formation sur le langage jQuery, voici un bref résumé des sélecteurs et méthodes que vous pourrez utiliser dans ce langage :

Expression Effet
$(‘#id’) Sélection de l’élément d’identifiant id
$(‘img’) Sélection des éléments img
$(‘c’) Sélection des éléments de classe c
$(‘div ul’) Sélection des éléments ul enfants d’un élément div
$(‘textarea’,input[type=”text”]’) Sélection des éléments textarea et des éléments input dont l’attribut type vaut text
$(‘a’).length Nombre de liens de la page
$(‘ul.bleu’).length Nombre d’éléments ul de classe bleu
$(‘a’)[0] Premier lien de la page
$(‘li:last’) Dernier li
$(‘li:odd’) Eléments li impairs
$(‘li:eq(3)’) Quatrième élément li
$(‘:not(h1)’) Tout sauf les éléments h1
$(‘td:gt(0):lt(5)’) Tous les éléments td d’index compris entre 1 et 6
$(‘tr:not(tr:last)’) Tous les éléments tr sauf le dernier
$(‘:radio’) Sélectionne les boutons radio
.text() Texte contenu dans un élément p
.val() Obtient le contenu d’un textarea ou d’un input type=”text”
.val(‘valeur’) Modifie le contenu d’un textarea, d’un input type=”text”, d’un select, d’un bouton radio, etc.
.prop(‘checked’,’false’) Initialise l’attribut checked à false
.html(‘texte’) Modifie le contenu d’un élément span
.append(‘texte’) Ajoute du texte à la fin de la sélection
.attr(‘src’,’logo.gif’) Affecte la valeur logo.gif à l’attribut src
.attr({src:’logo.gif’,alt:’le logo’}); Affecte la valeur logo.gif à l’attribut src et la valeur le logo à l’attribut alt
.css(‘background’,’red’) Affecte la couleur rouge à l’arrière-plan
.css(‘opacity’,’0.5′) Affecte l’opacité 0,5 à la sélection
$(‘sélecteur’).each(function(){ … }); Parcourt les éléments sélectionnés
var couleur = $(‘sélecteur’).css(‘color’); Enregistre dans la variable couleur la couleur de l’élément sélectionné
$(‘sélecteur’).on(‘événement’,function(){ //traitement}); Met en place un gestionnaire d’événements
$(‘sélecteur’).off(‘événement’,function(){ //traitement}); Supprime un gestionnaire d’événements

Le code CSS peut s’appliquer à un élément :

element {p1: v1; p2: v2; …}

Mais aussi à un ensemble d’éléments, en utilisant un sélecteur :

Selecteur {p1: v1; p2: v2; …}

Le tableau suivant dresse la liste des sélecteurs les plus fréquents :

Sélecteur Eléments sélectionnés
* Tous les éléments HTML
.classe Les éléments dont l’attribut classe est spécifié
element.classe Les éléments element dont l’attribut classe est spécifié
element Les éléments spécifiés
#identifiant Les éléments dont l’attribut id est spécifié
[attr] Les éléments qui possèdent un attribut attr spécifié

 

Quelques exemples de sélecteurs :

  • p.intro
  • #maj
  • p#maj
  • div.grand
  • [ent]
  • [ent=petit]