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.droite
L'instruction $('div ul.droite').length retourne le nombre de balise ul de la classe droite qui sont dans des div
Est utilisé ici la méthode lengthOn utilise donc la syntaxe : $(sélection).méthode
Fonction callback
Une fonction callback (ou fonction de rappel en français) est une fonction exécutée lorsqu'une autre fonction a terminé de s'exécuter.
$(function() {
$(".monimg").fadeOut("slow",function(){
$(this).fadeIn("slow");
});
});
$(".monimg").fadeOut("slow",function(){
$(this).fadeIn("slow");
});
});
Ce code fait disparaître puis réapparaître progressivement les images de classe monimg.
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');
Est utilisé ci-dessus la méthode CSS() qui admet deux paramètres. Le premier est une propriété CSS et le deuxième, la valeur à affecter à cette propriété.$('.rouge').css('color','yellow');
$('.rouge').css('background','red').css('color','yellow');
Source : Tous ces exemples proviennent de l'excellent site openclassrooms.com
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>
<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 | 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>
<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 | Elé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') | aucun |
| Deuxième(s) enfant(s) li | $('li:nth-child(2)') | 3, 4 |
Pseudo-sélecteurs
- :even - Éléments pairs : $('p:even')
- :odd - Éléments impairs : $('p:odd')
- :eq() - Élément dont l'index est spécifié
- :gt() - Éléments dont l'index est supérieur à (greater than) l'index spécifié
- :lt() - Éléments dont l'index est inférieur à (lower than) l'index spécifié
Autre sélecteurs
- :header - Tous les titres <h1> à <h6>
- :hidden - Éléments cachés
- :visible - Éléments visibles
- :not() - Éléments qui ne correspondent pas au sélecteur spécifié
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 :
var variableJS = 'un simple texte';
var 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$().
