Easy-Micro


LANGAGE JavaScript
Sé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 length

On 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");
});
});

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é.

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>
CritèreSélecteurImage 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èreSélecteurElé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
Source : openclassrooms.com


  • 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$().


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Samedi 23 février 2019 - Semaine 08 - Saint Lazare (Demain: Saint Modeste)
Aujourd'hui, c'est l'anniversaire de Louis Bertignac (1954-65 ans), musicien français (guitariste du groupe de rock français Téléphone). Autre 23 février: 1468 - Mort de Gutenberg, inventeur de l'imprimerie.
Haut de page Easy-Micro