jQuery
Sélecteurs

Introduction

Syntaxe

• Tag: Aucun marqueur, utilisez le tag directement
• Id: #id
• Classe: .className
• Attribut: [attributeName]
• Attribut avec valeur: [attributeName ='value']
• L'attribut commence par la valeur ^= : [attributeName ^= 'value']
• L'attribut se termine par la valeur $= : [attributeName $='value']
• L'attribut contient la valeur *= : [attributeName *= 'value']
• Pseudo-sélecteur :pseudo-selector
• Tout descendant: espace entre les sélecteurs
• Direct enfants: > entre les sélecteurs
• Frère adjacent après le premier: +
• Frère non adjacent après le premier: ~
• Ou: , (virgule) entre sélecteur

Remarques

<span id="temp.foobar"><span>

$('#temp\\.foobar')

Types de sélecteurs

Dans jQuery, vous pouvez sélectionner des éléments dans une page en utilisant différentes propriétés de l'élément, notamment:

• Type
• Classe
• ID
• Possession d'attribut
• Valeur d'attribut
• Sélecteur indexé
• Pseudo-état

Si vous connaissez les sélecteurs CSS, vous remarquerez que les sélecteurs dans jQuery sont les mêmes (à quelques exceptions près).

Prenez le code HTML suivant, par exemple:

<a href="index.html"></a>                  <!-- 1 -->
<a id="second-link"></a>                   <!-- 2 -->
<a class="example"></a>                    <!-- 3 -->
<a class="example" href="about.html"></a>  <!-- 4 -->
<span class="example"></span>              <!-- 5 -->

Sélection par type:

Le sélecteur jQuery suivant sélectionnera tous les éléments <a> , y compris 1, 2, 3 et 4.

$("a")

Sélection par classe

Le sélecteur jQuery suivant sélectionnera tous les éléments de l' example de classe (y compris les éléments non-a), à savoir 3, 4 et 5.

$(".example")

Sélection par ID

Le sélecteur jQuery suivant sélectionnera l'élément avec l'ID donné, qui est 2.

$("#second-link")

Sélection par possession d'attribut

Le sélecteur jQuery suivant sélectionne tous les éléments avec un attribut href défini, y compris 1 et 4.

$("[href]")

Sélection par valeur d'attribut

Le sélecteur jQuery suivant sélectionne tous les éléments pour lesquels l'attribut href existe avec la valeur index.html , qui est juste 1.

$("[href='index.html']")

Sélection par position indexée ( sélecteur indexé )

Le sélecteur jQuery suivant sélectionnera seulement 1, le second <a> ie. le second-link parce que l'index fourni est 1 comme eq(1) (notez que l'index commence à 0 donc le second a été sélectionné ici!).

$("a:eq(1)")

Sélection avec exclusion indexée

Pour exclure un élément en utilisant son index :not(:eq())

Ce qui suit sélectionne les éléments <a> , sauf celui avec l' example classe, qui est 1

$("a").not(":eq(0)")

Sélection avec exclusion

Pour exclure un élément d'une sélection, utilisez :not()

Ce qui suit sélectionne les éléments <a> , sauf ceux avec l’ example classe, qui sont 1 et 2.

$("a:not(.example)")

Sélection par pseudo-état

Vous pouvez également sélectionner dans jQuery en utilisant des pseudo-états, y compris :first-child :last-child :first-of-type :last-of-type , etc.

Le sélecteur jQuery suivant sélectionne uniquement le premier élément <a> : numéro 1.

$("a:first-of-type")

Combiner les sélecteurs jQuery

Vous pouvez également augmenter votre spécificité en combinant plusieurs sélecteurs jQuery; vous pouvez en combiner n'importe quel nombre ou les combiner tous. Vous pouvez également sélectionner plusieurs classes, attributs et états en même temps.

$("a.class1.class2.class3#someID[attr1][attr2='something'][attr3='something']:first-of-type:first-child")

Cela sélectionnerait un élément <a> qui:

• A les classes suivantes: class1, class2, and class3
• A l'identifiant suivant: someID
• A l'attribut suivant: attr1
• A les attributs et valeurs suivants: attr2 avec valeur something , attr3 avec valeur something
• A les états suivants: first-child et first-of-type

Vous pouvez également séparer différents sélecteurs par une virgule:

$("a, .class1, #someID")  

Cela sélectionnerait:

• Tous les <a> éléments
• Tous les éléments qui ont la classe class1
• Un élément avec l'id #someID

Sélection des enfants et des frères et sœurs

Les sélecteurs jQuery sont généralement conformes aux mêmes conventions que CSS, ce qui vous permet de sélectionner les enfants et les frères et sœurs de la même manière.

• Pour sélectionner un enfant non direct, utilisez un espace
• Pour sélectionner un enfant direct, utilisez un >
• Pour sélectionner un frère adjacent après le premier, utilisez un +
• Pour sélectionner un frère non adjacent après le premier, utilisez un ~

Sélection de caractères génériques

Il peut y avoir des cas où nous voulons sélectionner tous les éléments mais il n’ya pas de propriété commune à sélectionner (classe, attribut, etc.). Dans ce cas, nous pouvons utiliser le sélecteur * qui sélectionne simplement tous les éléments:

$('#wrapper *')    // Select all elements inside #wrapper element

Combinaison de sélecteurs

Envisagez de suivre la structure DOM

<ul class="parentUl">
    <li> Level 1
        <ul class="childUl">
            <li>Level 1-1 <span> Item - 1 </span></li>
            <li>Level 1-1 <span> Item - 2 </span></li>
        </ul>
    </li>
    <li> Level 2
        <ul class="childUl">
            <li>Level 2-1 <span> Item - 1 </span></li>
            <li>Level 2-1 <span> Item - 1 </span></li>
        </ul>
    </li>
</ul>

Sélecteurs descendants et enfants

Étant donné un parent <ul> - parentUl trouve ses descendants ( <li> ),

1. Simple $('parent child')

   >> $('ul.parentUl li')

   Cela obtient tous les descendants de l'ancêtre correspondant indiqué vers le bas tous les niveaux.

2. > - $('parent > child')

   >> $('ul.parentUl > li')

   Cela trouve tous les enfants correspondants ( seulement le 1er niveau inférieur ).

3. Sélecteur basé sur le contexte - $('child','parent')

   >> $('li','ul.parentUl')

   Cela fonctionne comme 1. ci-dessus.

4. find() - $('parent').find('child')

   >> $('ul.parentUl').find('li')

   Cela fonctionne comme 1. ci-dessus.

5. children() - $('parent').find('child')

   >> $('ul.parentUl').children('li')

   Cela fonctionne comme 2. ci-dessus.

Autres combinateurs

Sélecteur de groupe: ","

Sélectionnez tous les éléments <ul> ET tous les éléments <li> ET tous les éléments <span> :

$('ul, li, span')

Sélecteur multiple: "" (aucun caractère)

Sélectionnez tous les éléments <ul> avec la classe parentUl :

$('ul.parentUl')

Sélecteur de frères et sœurs adjacents: "+"

Sélectionnez tous les éléments <li> placés immédiatement après un autre élément <li> :

$('li + li')

Sélecteur général de frères et sœurs: "~"

Sélectionnez tous les éléments <li> qui sont des frères et soeurs d’autres éléments <li> :

$('li ~ li')

Vue d'ensemble

Les éléments peuvent être sélectionnés par jQuery à l'aide de jQuery Selectors . La fonction renvoie un élément ou une liste d'éléments.

Sélecteurs de base

$("*")                       // All elements
$("div")                     // All <div> elements
$(".blue")                   // All elements with class=blue
$(".blue.red")               // All elements with class=blue AND class=red
$(".blue,.red")              // All elements with class=blue OR class=red
$("#headline")               // The (first) element with id=headline
$("[href]")                  // All elements with an href attribute
$("[href='example.com']")    // All elements with href=example.com

Opérateurs relationnels

$("div span")          // All <span>s that are descendants of a <div>
$("div > span")        // All <span>s that are a direct child of a <div>
$("a ~ span")          // All <span>s that are siblings following an <a>
$("a + span")          // All <span>s that are immediately after an <a>

Sélecteurs de mise en cache

Chaque fois que vous utilisez un sélecteur dans jQuery, le DOM est recherché pour les éléments correspondant à votre requête. Faire cela trop souvent ou à plusieurs reprises diminuera les performances. Si vous faites référence à un sélecteur spécifique plusieurs fois, vous devez l’ajouter au cache en l’affectant à une variable:

var nav = $('#navigation');
nav.show();

Cela remplacerait:

$('#navigation').show();

La mise en cache de ce sélecteur peut s’avérer utile si votre site Web doit souvent afficher / masquer cet élément. S'il y a plusieurs éléments avec le même sélecteur, la variable deviendra un tableau de ces éléments:

<div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
</div>

<script>
    var children = $('.child');
    var firstChildText = children[0].text();
    console.log(firstChildText); 
    
    // output: "Child 1"
</script>

REMARQUE: L'élément doit exister dans le DOM au moment de son affectation à une variable. S'il n'y a pas d'élément dans le DOM avec une classe appelée child vous stockerez un tableau vide dans cette variable.

<div class="parent"></div>

<script>
    var parent   = $('.parent');
    var children = $('.child');
    console.log(children);

    // output: []

    parent.append('<div class="child">Child 1</div>');
    children = $('.child');
    console.log(children[0].text());

    // output: "Child 1"
</script>

N'oubliez pas de réaffecter le sélecteur à la variable après avoir ajouté / supprimé des éléments dans le DOM avec ce sélecteur.

Note : Lors de la mise en cache des sélecteurs, de nombreux développeurs démarreront le nom de la variable avec un $ pour indiquer que la variable est un objet jQuery comme ceci:

var $nav = $('#navigation');
$nav.show();

Eléments DOM comme sélecteurs

jQuery accepte une grande variété de paramètres, dont l'un est un élément DOM réel. Si vous passez un élément DOM à jQuery, la structure de type jQuery sous-jacente sous forme de tableau contiendra cet élément.

jQuery détectera que l'argument est un élément DOM en inspectant son nodeType.

L'utilisation la plus courante d'un élément DOM est dans les rappels, où l'élément actuel est transmis au constructeur jQuery afin d'accéder à l'API jQuery.

Comme dans each rappel (note: chacun est une fonction d'itérateur).

$(".elements").each(function(){
    //the current element is bound to `this` internally by jQuery when using each
    var currentElement = this;

    //at this point, currentElement (or this) has access to the Native API
    
    //construct a jQuery object with the currentElement(this)
    var $currentElement = $(this);

    //now $currentElement has access to the jQuery API
});

Chaînes HTML en tant que sélecteurs

jQuery accepte une grande variété de paramètres en tant que "sélecteurs", et l'un d'entre eux est une chaîne HTML. Si vous transmettez une chaîne HTML à jQuery, la structure sous-jacente de l' objet jQuery ressemblera à celle du HTML généré.

jQuery utilise regex pour déterminer si la chaîne transmise au constructeur est une chaîne HTML et également qu'elle doit commencer par < . Cette regex est définie comme étant rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/ ( explication sur regex101.com ).

L'utilisation la plus courante d'une chaîne HTML en tant que sélecteur se produit lorsque des ensembles d'éléments DOM doivent être créés dans du code uniquement, ce qui est souvent utilisé par les bibliothèques pour des éléments tels que les fenêtres pop-up modales.

Par exemple, une fonction qui a renvoyé une balise d'ancrage dans un div en tant que modèle

function template(href,text){
    return $("<div><a href='" + href + "'>" + text + "</a></div>");
}

Renverrait un objet jQuery contenant

<div>
    <a href="google.com">Google</a>
</div>

si appelé comme template("google.com","Google") .