JavaScriptSélection JQuery
La sélection d'objet avec JQuery
Sélecteur CSS
On utilise la syntaxe $(sélection) où sélection représente un sélecteur CSS. Exemple sur le sélecteur CSS div ul.droiteL'instruction $('div ul.droite').length retourne le nombre de balise ul de la classe droite qui sont dans des divOn utilise donc la syntaxe : $(sélection).méthode
Quatre exemples de sélection en JQuery
<ol>
<li id="premier">First item</li>
<li>Second item</li>
<li>third item</li>
<ul>
<li>Premier du troisième</li>
</ul>
</ol>Espace : Sélectionner tous les li au sein d'un ol
$('ol li').css('color', 'red')> : Sélectionne tous les enfants descendants immédiats d'un parent
$('ol > li').css('color', 'yellow')~ : Sélectionne tous les frères du premier élément (jumeaux)
$("li#premier ~ li").css('color', 'blue')+ : Sélectionne le premier frère
$("li#premier + li").css('color', 'green')Chaînage de méthodes
Étant donné que les méthodes jQuery retournent un objet jQuery, il est possible de les "chaîner", c'est-à-dire de les exécuter les unes à la suite des autres. À titre d'exemple, les deux premières instructions sont équivalentes à la troisième :$('.rouge').css('background','red');
$('.rouge').css('color','yellow');
$('.rouge').css('background','red').css('color','yellow');Mise en pratique 1
<body>
<img src="images/img1.jpg" alt="img1" style="border: 1px solid black;">
<img src="images/img2.jpg" alt="img2" style="border: 2px solid black;">
<img src="images/img3.jpg" alt="img3" style="border: 3px solid black;">
<img src="images/img4.jpg" alt="mon img4" style="border: 4px solid black;">
<img src="images/img5.jpg" alt="img5" style="border: 5px solid black;">
<script src="js/jquery.js"></script>
<script>
$(function() {
// Le code jQuery a adapter avec le tableau ci contre
$('selecteur').css('border-color','red');
});
</script>
</body>Critère - Sélecteur -> N° d'image modifiée
- Image dont l'attribut style contient partiellement ou totalement la valeur 1 : $('[style*="1"]') -> 1
- Image dont l'attribut alt contient le mot "mon" délimité par une espace : $('[alt~="mon"]') -> 4
- Image dont l'attribut src se termine par "3.jpg" : $('[src$="3.jpg"]') -> 3
- Image dont l'attribut src commence par "ima" : $('[src^="ima"]') -> 1, 2, 3, 4, 5
- Image qui ne possède pas un attribut alt égal à img3 : $('[alt!="img3"]') -> 1, 2, 4, 5
Mise en pratique 2
<body>
<div id="listes">
<ul id="ul1">
<li>Elément de liste 1
<ul id="ul2">
<li>Enfant 1</li>
<li>Enfant 2</li>
</ul>
</li>
<li>Elément de liste 2</li>
<li>Elément de liste 3</li>
<li>Elément de liste 4</li>
</ul>
</div>
<script src="jquery.js"></script>
<script>
$(function() {
// Le code jQuery a adapter avec le tableau ci contre
$('selecteur').css('background-color','red');
});
</script>
</body>Critère - Sélecteur -> N° d'élément modifié
- Éléments ul directement descendants d'éléments li : $('li > ul') -> 2, 3
- Éléments li directement précédés d'un élément li : $('li + li') -> 3, 4, 5, 6
- Premiers éléments li enfant : $('li:first-child') -> 1, 2, 3
- Premiers éléments li : $('li:first') -> 1, 2, 3
- Derniers éléments li : $('li:last') -> 6
- Derniers éléments li enfant : $('li:last-child') -> 3, 6
- Éléments li enfants uniques de leur parent : $('li:only-child') -> aucune
- Deuxième(s) enfant(s) li : $('li:nth-child(2)') -> 3, 4
Exemple : liste à puce avec couleur un sur deux
Est utilisé ci dessous l'instruction nth-child(2n) pour les li pairs et nth-child(2n+1) pour les li impairs$('li:nth-child(2n)').css('background-color', 'grey'); // li pairs
$('li:nth-child(2n+1)').css('background-color', 'moccasin'); // li impairs
$('li').css('margin-top', '10px');Version un peut plus courte avec les sélecteurs even (pair) et odd (impair)
$('li:nth-child(even)').css('background-color', 'grey'); // li pairs
$('li:nth-child(odd)').css('background-color', 'moccasin'); // li impairs
$('li').css('margin-top', '10px');Conversion d'une variable JavaScript en un objet jQuery
jQuery et JavaScript font bon ménage ensemble, et il est fréquent d'entremêler des instructions jQuery et des instructions JavaScript. Fatalement, un jour ou l'autre, vous voudrez convertir une variable JavaScript en un objet jQuery pour pouvoir lui appliquer les puissantes méthodes de ce langage. Eh bien, il n'y a rien de plus simple :
let variableJS = 'un simple texte';
let variableJQ = $(variableJS);
La première ligne crée une variable JavaScript en lui affectant un simple texte. La deuxième la convertit en un objet jQuery en "l'enveloppant" avec l'alias$().
