Les sélecteurs jQuery constituent le fondement de la manipulation du DOM. Cette référence technique détaille l'ensemble des sélecteurs disponibles, accompagnés d'exemples restructurés pour illustrer leur utilisation optimale dans des applications modernes.

1. Sélecteurs de Base

Les sélecteurs de base permettent de cibler des éléments via leur identifiant, leur classe, leur balise ou une combinaison de ceux-ci.

1.1 Sélecteur d'ID

Cible un élément unique par son attribut id.

$(document).ready(function() {
    $('#dashboardPanel').addClass('active-theme');
});

1.2 Sélecteur de Classe

Cible tous les éléments possédant une classe CSS spécifique.

$(document).ready(function() {
    $('.highlight-box').toggleClass('visible');
});

1.3 Sélecteur de Balise

Cible tous les éléments d'un type HTML donné.

$(document).ready(function() {
    $('article').css('line-height', '1.6');
});

1.4 Sélecteur Universel et Groupement

Le sélecteur universel (*) cible tous les éléments. Le groupement permet de combiner plusieurs sélecteurs.

$(document).ready(function() {
    // Cible tous les descendants de .wrapper
    $('.wrapper *').css('box-sizing', 'border-box');

    // Cible à la fois les éléments header et footer
    $('header, footer').css('padding', '20px');
});

2. Sélecteurs Hiérarchiques

Ces sélecteurs ciblent des éléments en fonction de leur position dans l'arbre DOM.

2.1 Enfant Direct (>)

Sélectionne uniquement les enfants directs d'un élément parent.

$(document).ready(function() {
    // Seuls les boutons directs de .toolbar sont désactivés
    $('.toolbar > button').prop('disabled', true);
});

2.2 Frère Adjacent (+)

Sélectionne l'élément frère suivant immédiatement.

$(document).ready(function() {
    // Cible le .panel qui suit immédiatement .trigger
    $('.trigger + .panel').slideDown();
});

2.3 Frères Suivants (~)

Sélectionne tous les éléments frères suivants.

$(document).ready(function() {
    // Cible tous les li frères après .active
    $('.active ~ li').fadeOut();
});

2.4 Descendant (Espace)

Sélectionne tous les descendants, quel que soit leur niveau de profondeur.

$(document).ready(function() {
    // Cible tous les inputs dans .form-group
    $('.form-group input').css('border', '1px solid #ccc');
});

3. Sélecteurs de Filtrage

Les filtres permettent d'affiner les résultats d'un sélecteur en fonction de propriétés spécifiques.

3.1 Filtres de Base

• :first et :last : Ciblent le premier et le dernier élément de la collection.
• :not(selector) : Exclut les éléments correspondant au sélecteur donné.
• :even et :odd : Ciblent les éléments d'index pair ou impair (base 0).
• :eq(index), :gt(index), :lt(index) : Ciblent par index exact, supérieur ou inférieur.
• :header : Cible toutes les balises de titre (h1 à h6).

$(document).ready(function() {
    $('.list-item:first').addClass('top-priority');
    $('.data-row:even').css('background-color', '#f9f9f9');
    $('.tab:eq(1)').trigger('click');
    $(':header').css('font-family', 'Arial');
});

3.2 Filtres de Contenu

• :contains(text) : Cible les éléments contenant le texte spécifié.
• :empty : Cible les éléments sans enfants (y compris les nœuds texte).
• :has(selector) : Cible les éléments contenant au moins un élément correspondant au sélecteur.
• :parent : Cible les éléments qui sont parents d'autres éléments ou de texte.

$(document).ready(function() {
    $('.log-entry:contains("ERROR")').css('color', 'red');
    $('.notification:empty').text('Aucune alerte');
    $('.menu:has(.dropdown)').addClass('has-submenu');
});

3.3 Filtres de Visibilité

Il est crucial de comprendre que :hidden cible les éléments avec display: none, les inputs de type hidden, ou les éléments dont la largeur/hauteur est nulle. Il ne cible pas visibility: hidden ou opacity: 0.

$(document).ready(function() {
    $('.alert-modal:hidden').fadeIn(300);
    $('.sidebar:visible').css('width', '250px');
});

3.4 Filtres d'Attributs

Permettent de filtrer selon la présence ou la valeur des attributs HTML.

• [attr] : Possède l'attribut.
• [attr=value] : Valeur exacte.
• [attr!=value] : Valeur différente.
• [attr^=value] : Commence par.
• [attr$=value] : Se termine par.
• [attr*=value] : Contient.

$(document).ready(function() {
    $('a[title]').css('cursor', 'help');
    $('input[type="email"]').css('border-color', 'blue');
    $('a[href^="https"]').addClass('secure-link');
    $('img[src$=".png"]').css('opacity', '0.8');
});

3.5 Filtres de Formulaire et d'État

Spécifiques aux éléments de formulaire et à leur état interactif.

• :input, :text, :password, :radio, :checkbox, :submit, :button, :file.
• :enabled, :disabled : État d'activation.
• :checked, :selected : État de sélection.

$(document).ready(function() {
    $('form :input').css('margin-bottom', '10px');
    $('input:disabled').css('background', '#eee');
    $('select option:selected').css('font-weight', 'bold');
    $(':checkbox:checked').parent().addClass('chosen');
});

4. Sélecteurs d'Enfants CSS

Contrairement aux filtres jQuery, ces sélecteurs s'apuient sur les spécifications CSS et s'appliquent à chaque parent dans le DOM.

• :first-child, :last-child : Premier ou dernier enfant de son parent.
• :nth-child(n) : Enfant à l'index n (supporte les formules comme 2n ou 3n+1).
• :only-child : Seul enfant de son parent.

$(document).ready(function() {
    $('.grid > li:nth-child(2n)').css('background', '#f0f0f0');
    $('.panel > h2:first-child').css('margin-top', '0');
    $('.wrapper > div:only-child').css('width', '100%');
});