Introduction à jQuery

Parmi les joies de jQuery, il y a l'extrême simplicité de la façon dont on sélectionne des éléments dans une page. Voyez la sélection d'un élément comme le fait de l'identifier. Vous aurez peut-être besoin d'identifier un élément individuel, de multiples éléments, des éléments qui satisfont certains critères, etc, pour le ou les modifier. jQuery vous permet d'identifier et de sélectionner des éléments en utilisant un concept que vous connaissez peut-être déjà si vous avez construit des pages web auparavant : les sélecteurs CSS.

Pour résumer les sélecteurs CSS, voici quelques façons élémentaires de sélectionner des éléments en CSS. Une fois que vous avez sélectionné des éléments, vous pouvez leur appliquer des règles de style, définir leur taille de police, leur couleur, etc :

Sélectionner par type d'élément :h1,h2,p,img, etc.
Sélectionner par classe :.starred,.featured, etc.
Sélectionner par ID:#about,#contact, etc.

La bonne nouvelle, c'est que vous pouvez sélectionner des éléments en jQuery de la même façon que vous sélectionnez des éléments en CSS, notamment par type, classe et ID. Mais la liste est bien plus étendue que ça. Voyons cela plus en détail.

Sélectionner en jQuery

En CSS, on sélectionne les éléments simplement en les écrivant, comme lorsqu'on veut appliquer un style à tous les éléments h1 :

h1 {
/* Règles CSS ici */
}

Avec jQuery, il faut passer par une étape supplémentaire. Entrer le fameux signe dollar de jQuery ! $()  est un raccourci vers une fonction appeléejQuery() qui trouve un élément dans une page et crée des objets jQuery qui référencent les éléments trouvés.

$('p') : sélectionne tous les éléments p (paragraphe)
jQuery('p') : Même chose, mais c'est plus long à écrire. Utilisez le signe dollar !

jQuery ne peut pas être utilisé sur les éléments tant que ceux-ci ne sont pas des objets jQuery, ce qui leur donne accès à l'ensemble du monde jQuery. Les envelopper dans la méthode$() les transforme en objets jQuery, sur lequels vous pouvez appeler des méthodes jQuery. Avant cela, ils sont simplement des éléments du DOM et ne vont pas répondre aux méthodes jQuery.

Dans les explications qui vont suivre, nous allons voir des façons spécifiques de sélectionner des éléments, mais vous n'aurez pas besoin de vous souvenir de tout ça. Quand vous aurez besoin de modifier des éléments avec jQuery, vous n'aurez qu'à vous référer à la documentation jQuery pour savoir comment faire pour les sélectionner. Ce sera plus simple à trouver grâce aux connaissances de base que nous venons d'acquérir sur cette sélection.

Sélection par relation

Les éléments qui sont "liés" sont souvent désignés par du vocabulaire familial. Vous avez des éléments parent, enfant, et frères dans votre structure de balises, et déterminer quel élément est quel membre de la famille revient à déterminer la structure tout entière. On utilise souvent cela pour sélectionner les éléments en fonction de leur relation à d'autres éléments, à la fois en CSS et en jQuery ; voyons ensemble comment faire (ou dépoussiérons nos connaissances, si vous avez déjà vu ça).

Les descendants

$("ancêtre descendant") : sélectionne tous les éléments qui sont au sein d'un élément ancêtre (exemple : http://codepen.io/eclairereese/pen/EKbORj)

Exemple : sélectionner tous lesli au sein d'unol dans la structure de balises.

jQuery:

$("ol li")

HTML:

<ol>
    <li>Premier élément</li> <!-- sélectionné -->
    <li>Second élément</li> <!-- sélectionné -->
    <ul>
        <li>Élément sans ordre</li> <!-- sélectionné -->
    </ul>
</ol>

Parents et enfants

$("parent > enfant") : sélectionne tous les enfants qui sont descendants immédiats d'un élément parent (aussi appelé sélecteur combinateur d'enfant) (exemple : http://codepen.io/eclairereese/pen/QNOJxJ)

Exemple : sélectionner tous lesli qui descendent directement deol.

jQuery:

$("ol > li")

HTML:

<ol>
    <li>Premier élément</li> <!-- sélectionné -->
    <li>Second élément</li> <!-- sélectionné -->
    <ul>
        <li>Élément sans ordre</li>
    </ul>
</ol>

Les jumeaux

$(élément ~ frères): sélectionne tous les frères du premier élément spécifié.

Exemple : sélectionner les frères lidu premier li .

jQuery:

$("li#premier ~ li")

HTML:

<ul>
    <li id="premier">Un</li>
    <li id="deuxième">Deux</li> <!-- sélectionné -->
    <li id="troisième">Trois</li> <!-- sélectionné -->
</ul>

$(élément  + frère)  : sélectionne l'élément frère qui suit immédiatement l'élément spécifié.

Exemple : sélectionner le premier frère d'unli donné.

jQuery :

$("li#premier + li")

HTML:

<ul>
    <li id="premier">Un</li>
    <li id="deuxième">Deux</li> <!-- sélectionné -->
    <li id="troisième">Trois</li>
</ul>

exemples : http://codepen.io/eclairereese/pen/zqPMLx & http://codepen.io/eclairereese/pen/WwXYKa

Vous trouverez plus d'informations sur les sélecteurs hiérarchiques dans la documentation jQuery.

Les filtres

Les sélecteurs CSS c'est super, mais jQuery fournit même des sélecteurs supplémentaires ! Nous allons voir ce que sont les filtres. Il arrive que les relations entre les éléments ne vous intéressent pas ; tout ce qui compte, c'est ce qu'ils sont ou ne sont pas.

:first : sélectionne la première occurrence d'un élément (exemple : http://codepen.io/eclairereese/pen/MyOzBM)

jQuery

$("p:first")

HTML

<p>Premier texte</p> <!-- sélectionné -->
<p>Deuxième texte</p>
<p>Troisième texte</p>

:last : sélectionne la dernière occurrence d'un élément (exemple : http://codepen.io/eclairereese/pen/VarVGb)

jQuery

$("p:last")

HTML

<p>Premier texte</p>
<p>Deuxième texte</p>
<p>Troisième texte</p> <!-- sélectionné -->

:eq(indice) : sélectionne l'élément à un indice donné (c'est là que les tableaux deviennent bien pratiques !) (exemple : http://codepen.io/eclairereese/pen/bpYQxx)

jQuery

$("li:eq(1)")

HTML

<ul>
    <li>Premier (donc indice 0)</li>
    <li>Deuxième (donc indice 1)</li> <!-- sélectionné-->
    <li>Troisième (donc indice 2)</li>
</ul>

:gt(indice) : sélectionne le ou les élément(s) situé(s) à un indice supérieur au nombre spécifié.
jQuery (exemple : https://codepen.io/eclairereese/pen/XdzyxJ)

$("li:gt(0)")

HTML

<ul>
    <li>Premier (donc indice 0)</li>
    <li>Deuxième (donc indice 1)</li> <!-- sélectionné-->
    <li>Troisième (donc indice 2)</li> <!-- sélectionné-->
</ul>

:lt(indice) : même concept mais pour les éléments à un indice plus petit que le nombre spécifié.
jQuery (exemple : http://codepen.io/eclairereese/pen/pydQOB)

$("li:lt(2)")

HTML

<ul>
    <li>Premier (donc indice 0)</li> <!-- sélectionné-->
    <li>Deuxième (donc indice 1)</li> <!-- sélectionné-->
    <li>Troisième (donc indice 2)</li>
</ul>

:not(sélecteur) : sélectionne les éléments qui ne sont pas... eh bien, le sélecteur ! (exemple : http://codepen.io/eclairereese/pen/xVPQyV)

jQuery

 $("li:not('.legume')")

HTML

<ul id="courses">
    <li class="legume">Aubergine</li>
    <li class="legume">Carotte</li>
    <li class="fruit">Pomme</li> <!-- sélectionné -->
</ul>

Pour en apprendre davantage sur les filtres élémentaires, reportez-vous à la documentation jQuery.

Les filtres additionnels

Vous commencez à comprendre comment utiliser les filtres (deux points, nom du filtre, paramètres si nécessaire) ; sachez que la liste des possibilité est assez grande ! Il y a les filtres de visibilité, les filtres de contenu, les filtres d'attribut, et même des filtres de formulaires.

Voici quelques exemples couramment utilisés :

:hidden : sélectionne les éléments cachés (les éléments dont la valeur CSS display est none, qui sont detype="hidden", ont une hauteur et une largeur nulles, ou ont un ancêtre lui-même invisible)
:visible : sélectionne les éléments visibles
:contains("texte") : éléments qui contiennent le texte spécifié
:has("élément") : éléments qui contiennent l'élément spécifié
[attribut] : éléments qui ont l'attribut spécifié, par exemple $("[align]")
[attribut="valeur"] : éléments qui ont l'attribut et la valeur spécifiés, par exemple $("[align=center]")
[attribut!="valeur"] : Les éléments qui n'ont pas l'attribut et la valeur spécifiés, par exemple $("[align!=center]")

Il y a même un ensemble de sélecteurs pour les éléments de formulaires, ce qui est très utile lorsque vous utilisez jQuery pour valider des formulaires avant que les utilisateurs ne les envoient (c'est assez courant). Ces filtres sont des raccourcis pour $("type=XXXXXXX]"). Par exemple, $(":checkbox") est la même chose que $( "[type=checkbox]" ), mais le raccourci du filtre vous permet d'en écrire moins !

:input : sélectionne les éléments input
:password : sélectionne les zones de mot de passe
:text : sélectionne les zones de teste
:checkbox : sélectionne les cases à cocher
:radio : sélectionne les boutons d'option
:submit : sélectionne les boutons de validation

Voici la liste complète des sélecteurs de formulaire. 

Rappelez-vous qu'il n'est pas important de se souvenir de tous ces sélecteurs. Lorsque vous aurez besoin d'utiliser jQuery sur certains éléments, consultez la documentation jQuery pour trouver le meilleur moyen de les sélectionner, maintenant que vous comprenez globalement comment on fait pour sélectionner des éléments !