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 :
All posts tagged sélecteurs
28
Fév23
FévjQuery – Sélecteur d’attributs évolués
Categories: 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');
02
FévPour 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 |
09
SepLe 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]
Téléchargez gratuitement ce mini-dossier PDF dans votre boîte mail.
Mediaforma est une marque déposée - Copyright © 2020 Mediaforma
38 visiteurs connectés sur Mediaforma !