Chapitre 4 – Sélecteurs jQuery

Les sélecteurs sont la base de jQuery : on “vise” des éléments HTML, puis on agit dessus. Dans ce chapitre, tu vas apprendre à sélectionner proprement (sans te tromper), à filtrer des éléments, et à adopter des réflexes pro pour éviter les bugs.

1) Rappel : jQuery s’appuie sur les sélecteurs CSS

jQuery utilise la même logique que CSS pour cibler des éléments : id, classe, balise, attribut, etc.

Règle simple : si un sélecteur fonctionne en CSS, il fonctionne généralement en jQuery.

Exemples rapides

$('#header');      // sélection par id (unique)
$('.item');        // sélection par classe (souvent plusieurs)
$('button');       // sélection par balise
$('nav a');        // sélection descendant (tous les liens dans nav)

2) Sélection par ID, classe, balise

#id (ID)

Un id est censé être unique dans une page. C’est souvent la sélection la plus “directe”.

$('#loginBtn').on('click', function () {
  alert('Connexion');
});

.class (classe)

Une classe peut apparaître sur plusieurs éléments. jQuery renvoie donc une collection.

$('.card').addClass('highlight');

tag (balise)

Une sélection par balise cible tous les éléments du type donné. Elle peut vite devenir large : il faut l’utiliser intelligemment.

$('input').addClass('input-ready');

Piège classique : $('#btn') et $('.btn') ne ciblent pas la même chose. Un # cible un id, un . cible une classe.

3) Sélecteurs “combinés” (descendants, enfants, multiples)

Descendant

$('.menu a'); // tous les liens dans .menu

Enfant direct

$('.menu > a'); // uniquement les liens enfants directs de .menu

Plusieurs sélecteurs à la fois

$('#save, #cancel'); // les deux IDs
$('.btn.primary, .btn.danger');

Astuce : quand un sélecteur “ramasse trop large”, ajoute un contexte : $('.container .item').

4) Sélecteurs d’attributs (très utile en formulaires)

Tu peux sélectionner des éléments en fonction de leurs attributs HTML : type, name, data-*, etc.

$('input[type="email"]');
$('input[name="user_email"]');
$('a[target="_blank"]');

Commence par / contient / finit par

$('[name^="user_"]');  // commence par user_
$('[name*="mail"]');   // contient mail
$('[name$="_id"]');    // finit par _id

Très pratique pour viser un groupe d’inputs sans multiplier les classes.

5) Filtres jQuery : cibler “le bon” élément

Un sélecteur peut renvoyer plusieurs éléments. Les filtres servent à affiner : premier, dernier, index, visible, checked, etc.

eq(), first(), last()

$('.item').first().addClass('active'); // premier
$('.item').last().addClass('active');  // dernier
$('.item').eq(2).addClass('active');   // 3e (index 2)

Attention : eq(2) cible le 3e élément car l’index commence à 0.

:checked / :selected

$('input:checked');          // cases cochées
$('select option:selected');  // option sélectionnée

:visible / :hidden

$('.panel:visible');
$('.panel:hidden');

6) Vérifier qu’un sélecteur “trouve” quelque chose

Quand un sélecteur ne trouve rien, jQuery ne plante pas forcément… mais ton code ne fait rien, ce qui peut être très frustrant.

Le réflexe pro : vérifier la taille de la sélection :

const $btn = $('#btn');

console.log($btn.length); // 0 = rien trouvé, 1 = trouvé, etc.

if ($btn.length === 0) {
  console.warn('Le bouton #btn est introuvable dans le DOM.');
}

Bonne pratique : stocker tes sélections jQuery dans des variables préfixées par $.

7) Sélecteurs CSS vs méthodes de parcours (première approche)

En jQuery, tu as deux manières de “viser” un élément :

Par sélecteur direct : $('.card .btn')
Par parcours : $(this).closest('.card').find('.btn')

Plus tu pars d’un élément connu (ex : this), plus tu évites de sélectionner trop large.

On verra ces notions plus en détail dans le Chapitre 10 – Parcours du DOM.

Erreurs fréquentes (et corrections)

Erreur 1 : confusion id / classe

// Tu as mis une classe dans le HTML : class="btn"
// Donc tu dois sélectionner avec .btn (pas #btn)
$('.btn').on('click', function(){ ... });

Erreur 2 : élément non présent au moment de la sélection

$(function(){
  // DOM prêt (chapitre 3)
  $('#btn').on('click', function(){ ... });
});

Erreur 3 : sélecteur trop large

// Trop large : tous les boutons de la page
$('button').addClass('active');

// Plus précis :
$('.toolbar button').addClass('active');

Exercice (progressif) – Maîtriser les sélecteurs

Objectif : sélectionner, vérifier, puis modifier.

Crée une liste <ul id="list"> avec 5 <li class="item">.
Avec jQuery, ajoute la classe active au 3e élément.
Affiche dans la console le nombre d’éléments .item.
Bonus : sélectionne uniquement les éléments dont le texte contient “A” (indice : :contains).

Correction

<ul id="list">
  <li class="item">A</li>
  <li class="item">B</li>
  <li class="item">C</li>
  <li class="item">D</li>
  <li class="item">EA</li>
</ul>

<style>
  .active{ font-weight:bold; }
</style>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $(function(){
    console.log($('.item').length);      // 5
    $('.item').eq(2).addClass('active'); // 3e élément
    console.log($('.item:contains("A")').length); // bonus
  });
</script>

:contains() est spécifique à jQuery (pas un sélecteur CSS standard). À utiliser surtout pour des outils internes ou des petites démos.

Résumé du chapitre

jQuery utilise les sélecteurs CSS : #id, .class, balises, attributs…
Filtrer une collection : first(), last(), eq(), :checked…
Réflexe pro : vérifier .length si “ça ne marche pas”.
Un sélecteur trop large crée des effets de bord : être précis.