Sélecteurs jQuery

Le symbole "$" représente un objet jQuery.

Sélection par ID

Pour sélectionner un élément via son identifiant, utilisez la syntaxe $('#identifiant'). Cela encapsule le nœud DOM dans un objet jQuery. Si aucun élément ne correspond, un tableau vide est retourné au lieu de null ou undefined.

// Sélectionne l'élément avec l'id "abc"
var divElement = $('#abc');

Sélection par classe

Pour récupérer tous les éléments possédant une classe spécifique :

var elementsRouges = $('.red'); 
// Récupère tous les éléments ayant la classe "red"

Sélection par balise (tag)

var paragraphes = $('p'); // Tous les éléments <p>
console.log(paragraphes.length); // Nombre total de paragraphes

Sélection par attribut

var champEmail = $('[name=email]');
var champsPassword = $('[type=password]');
var itemSpecial = $('[items="A B"]'); // Attributs contenant des espaces

Sélection avec préfixe/suffixe d'attribut

var icones = $('[name^=icon]'); // Noms commençant par "icon"
var terminaisons = $('[name$=with]'); // Noms se terminant par "with"

Sélecteurs combinés

var inputEmail = $('input[name=email]'); // Uniquement les inputs avec name="email"

Sélecteurs multiples

$('p, div'); // Sélectionne à la fois les <p> et les <div>
$('p.red, p.green'); // Sélectionne les paragraphes avec les classes red ou green

Notez que les résultats sont ordonnés selon leur position dans le document HTML et sans doublons.

Sélecteurs hiérarchiqeus

$('form[name=upload] input'); // Inputs enfants directs ou indirects du formulaire
$('form.test p input');       // Inputs situés sous un <p> dans un formulaire

Sélecteur enfant direct

<!-- Structure HTML -->
<div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
</div>

$('ul.lang > li.lang-javascript'); // Élément JavaScript uniquement
$('div.testing > li.lang-javascript'); // Tableau vide - relation non parent-enfant

Filtres

$('ul.lang li');                    // Tous les langages
$('ul.lang li:first-child');        // Premier élément (JavaScript)
$('ul.lang li:last-child');         // Dernier élément (Lua)
$('ul.lang li:nth-child(2)');       // Deuxième élément (Python)
$('ul.lang li:nth-child(even)');    // Éléments pairs
$('ul.lang li:nth-child(odd)');     // Éléments impairs

Méthodes de navigation

<!-- Structure HTML -->
<ul class="lang">
    <li class="js dy">JavaScript</li>
    <li class="dy">Python</li>
    <li id="swift">Swift</li>
    <li class="dy">Scheme</li>
    <li name="haskell">Haskell</li>
</ul>

// Recherche descendante
var listeLangages = $('ul.lang');
var elementsDynamiques = listeLangages.find('.dy');
var elementSwift = listeLangages.find('#swift');
var elementHaskell = listeLangages.find('[name=haskell]');

// Recherche ascendante
var swiftItem = $('#swift');
var parentListe = swiftItem.parent();
var parentFiltre = swiftItem.parent('.red'); // Retourne [] si filtre échoue

// Navigation entre frères
swiftItem.next();                          // Élément suivant (Scheme)
swiftItem.next('[name=haskell]');          // Retourne [] car condition non remplie
swiftItem.prev();                          // Précédent (Python)
swiftItem.prev('.dy');                     // Précédent avec filtre (Python)

Filtrage avancé

// Filtrage avec filter()
var tousLesElements = $('ul.lang li');
var elementsDyn = tousLesElements.filter('.dy');

tousLesElements.filter(function() {
    return this.innerHTML.indexOf('S') === 0; // Commence par S
});

// Transformation avec map()
var valeursTextuelles = tousLesElements.map(function() {
    return this.innerHTML;
}).get(); // ['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

// Extraction partielle
var premier = tousLesElements.first();      // JavaScript
var dernier = tousLesElements.last();       // Haskell
var sousEnsemble = tousLesElements.slice(2, 4); // Swift, Scheme

Résumé des différences entre DOM et jQuery

// Objet jQuery vs élément DOM
$("#monId")[0].value;     // Accès direct à la propriété value
$("#monId").val();        // Méthode jQuery équivalente

// Assignation
$("#monId")[0].value = "nouvelle valeur";
$("#monId").val("nouvelle valeur");