Les sélecteurs en jQuery
Sommaire
- 1- Objectifs
- 2- Les selecteurs
- 3- jQuery sélecteurs d'élément
- 4- jQuery sélecteurs d'attribut
- 5- jQuery sélecteurs CSS
- 5.1- La Méthode jQuery addClass()
- 5.2- La Méthode jQuery css()
- 6- Exemples de sélecteur JQUERY
- 7- Applications
- 7.1- Exercice
- 7.2- Enoncé 01
- 7.3- Solution
- 7.4- Exercice
- 7.5- Enoncé
- 7.6- Correction
- 7.6.1- Sommaire du cours jQuery
Les sélecteurs en jQuery
-
Objectifs
-
Les selecteurs
- Les sélecteurs sont l’un des aspects les plus importants de la librairie JQuery.Ils permettent de sélectionner des éléments HTML (ou groupes d’éléments) par le nom de l’élément, le nom d’attribut ou par le contenu
- Les sélecteurs jQuery vous permettent de sélectionner et de manipuler un ou plusieurs éléments HTML.
- Les sélecteurs jQuery sont utilisés pour « trouver » (ou sélectionner) des éléments
HTMLen fonction de leurnom,id,classes,types,attributs,valeurs d'attributset bien plus encore. - Les sélecteurs sont l’un des aspects le plus important de jQuery. Ceux-ci utilisent une syntaxe qui n’est pas celle des feuilles de style CSS.
- Ils permettent aux concepteurs d’identifier rapidement et aisément n’importe quel élément de la page et d’y appliquer les méthodes spécifiques à jQuery.
- La bonne compréhension de ces sélecteurs jQuery est un élément clé pour la bonne compréhension et utilisation de jQuery.
-
jQuery sélecteurs d’élément
- Pour commencer, les sélecteurs jQuery.Sélectionner un élément dans la DOM avec jQuery comparativement à avec Javascript traditionnel.
- Pour sélectionner les éléments avec l’ID "apc"
- Avec Javascript, on devait écrire :
document.getElementById("apc"). - Avec jQuery on écrirait :
$("#apc"). - Pour sélectionner les éléments avec la classe "apc", on écrit :
$(".apc"). - Pour sélectionner les paragraphes on écrit seulement :
$("p"). $("p#apc")sélectionne tous les éléments<p>avec l’id ="apc".-
jQuery sélecteurs d’attribut
- jQuery utilise les expressions XPath pour sélectionner les éléments ayant des attributs donnés.
$("[href]")sélectionner tous les éléments avec un attribut href.$("[href='#']")sélectionner tous les éléments avec une valeur de href égale à "#".$("[href!='#']")sélectionner que tous les éléments avec un attribut href différent de "#".$("[href$='.jpg']")sélectionner tous les éléments avec un attribut href qui se termine par « .jpg ».-
jQuery sélecteurs CSS
- Les sélecteurs CSS jQuery permet de modifier les propriétés CSS pour les éléments HTML.
-
La Méthode jQuery addClass()
- La méthode
addClass()ajoute un ou plusieurs noms de classe aux éléments sélectionnés. - Cette méthode ne supprime pas les attributs de classe existants, elle ajoute uniquement un ou plusieurs noms de classe à l’attribut de classe.
- pour ajouter plusieurs classes, séparez les noms de classe par des espaces
$(selector).addClass(classname,function(index,currentclass))- L’exemple suivant montre comment ajouter une classe à la dernière élément avec un script jquery
-
La Méthode jQuery css()
- La méthode
css()définit ou renvoie une ou plusieurs propriétés de style pour les éléments sélectionnés. css (propertyName)-
Exemples de sélecteur JQUERY
-
Applications
-
Exercice
-
Enoncé 01
- Pour comprendre le fonctionnement de jQuery avec les sélecteurs CSS, nous nous appuierons sur une structure souvent employée pour la navigation : la liste imbriquée non ordonnée.
- soit la liste suivante:
- Vous remarquerez que l’identifiant de la première balise <ul> est cours-jquery, mais qu’aucune classe n’est associée aux balises <li>. Lorsque aucun style n’est appliqué, la liste est affichée verticalement
- Maintenant nous voulions que les éléments de premier niveau, et uniquement ceux là, soient organisés à l’horizontale.
- Pour le faire
- Définir une classe css horizontal qui sert présenter les éléments
- Créer une fonction Jquery qui vous permet d’appliquer le style proposé
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice
-
Enoncé
- Dans la page HTML suivante:(Télécharger le fichier) modifier la couleur d’arrière-plan de tous les éléments
pau jaune et la couleur d’arrière-plan de tous les élémentsh2en rouge -
Correction
-
Connaitre les sélecteurs en JQuery.
| Syntaxe | Description |
|---|---|
| $(this) | Élément HTML actuel |
| $(‘*’) | Tous les éléments |
| $("p") | Tous les éléments <p> |
| $("p.apc") | Tous les éléments <p> de classe = "apc" |
| $("p#apc") | Le premier élément <p> avec l’id = "apc" |
| $("p#apc:First") | Le premier élément <p> avec l’id = "apc" |
| $(".apc") | Tous les éléments ayant la classe = "apc" |
| $("#apc") | L’élément ayant id = "apc" |
| $("#apc, .menu") | Les élément ayant id = "apc" ou class="menu" |
| $(".apc:first") | Le premier élément ayant la class="apc" |
| $(".apc").first() | Le premier élément ayant la class="apc" |
| $(".apc:eq(0)") | Le premier élément ayant class="apc" |
| $(".apc:eq(1)") | Le deuxième élément ayant class="apc" |
| $(".apc:gt(1)") | Les éléments ayant class="apc" à partir du deuxième |
| $(".apc:lt(4)") | Les éléments ayant class="apc" entre 0 et 3 |
| $(".apc:even") | Les éléments paires ayant class="apc" |
| $(".apc:odd") | Les éléments impaires ayant class="apc" |
| $(".apc:Last") | Le dernier élément ayant la class="apc" |
| $(".apc").last() | Le dernier élément ayant la class="apc" |
| $("footer").prev() | Sélectionne l’élément juste avant l’élément footer |
| $("footer").prevAll() | Sélectionne tous les éléments juste avant l’élément footer |
| $("footer").next() | Sélectionne l’élément juste après l’élément footer |
| $("footer").nextAll() | Sélectionne tous les éléments juste après l’élément footer |
| $(".apc:visible’) | Les éléments visibles ayant class="apc" |
| $(".apc:hidden’) | Les éléments cachés ayant class="apc" |
| $(".apc < div") | Les éléments div directement enfant de class="apc" |
| $("ul li:first") | Le premier élément <li> de chaque liste <ul> |
| $("[href$=’.jpg’]") | Tous les éléments avec un attribut href qui se termine par ".jpg" |
| $("div #apc .head") | Tous les éléments de classe = "head" à l’intérieur d’un élément <div> dont l’id = "apc " |
| $("a[href]") | Les éléments <a> ayant l’attribut href |
| $("a[href=’#’]") | Les éléments <a> ayant l’attribut href et la valeur # |
| $("a[href!=’#’]") | Les éléments <a> n’ayant pas valeur # dans l’attribut href |
| $("a[href^=’#’]") | Les éléments <a> ayant une valeur qui commence par # |
| $("a[href$=’#’]") | Les éléments <a> ayant une valeur qui se termine par # |
| $("a[href*=’#’]") | Les éléments <a> ayant une valeur qui contient # |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#buttonPar").click(function(){
$("p").css("background-color","#FFFF00")
})
$("#buttonTit").click(function(){
$("h2").css("background-color","#F11F00")
})
})
</script>