Easy-Micro [ JAVASCRIPT - Sélection JQuery ] - Formations informatiques pour entreprises

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

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')

Source : Tous ces exemples proviennent de l'excellent site openclassrooms.com

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

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

Source : openclassrooms.com

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

< >