Easy-Micro [ JAVASCRIPT - Filtres JQuery ] - Formations informatiques pour entreprises

JavaScript
Filtres JQuery
Les filtres JQuery : deux points, nom du filtre, paramètres si nécessaire

:first

Sélectionne la première occurrence d'un élément

<p>First text</p>
<p>Second text</p>
<p>Third text</p>
<script>
$('p:first').css('color', 'red');
</script>

:last

Sélectionne la dernière occurrence d'un élément

<p>First text</p>
<p>Second text</p>
<p>Third text</p>
<script>
$('p:last').css('color', 'red');
</script>

:eq(indice)

Sélectionne l'élément à un indice donné (attention : tableau)

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>
<script>
$('li:eq(1)').css('color', 'red');
</script>

:gt(indice)
Sélectionne le ou les élément(s) situé(s) à un indice supérieur au nombre spécifié - voir aussi :lt(indice)
```
<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>
<script>
$('li:gt(0)').css('color', 'red');
</script>
```

:not(sélecteur)

Sélectionne les éléments qui ne sont pas le sélecteur

<ul id="courses">
    <li class="legume">Aubergine</li>
    <li class="legume">Carotte</li>
    <li class="fruit">Pomme</li>
</ul>
<script>
$("li:not('.vegetable')").css('color', 'red');
</script>

Source : openclassrooms.com

Pseudo-sélecteurs

:even - Éléments pairs : $('p:even')
:odd - Éléments impairs : $('p:odd')
:eq() - Élément dont l'index est spécifié
:lt() - Éléments dont l'index est inférieur à (lower than) l'index spécifié
:contains("texte") : éléments qui contiennent le texte spécifié
:has("élément") : éléments qui contiennent l'élément spécifié

Autre sélecteurs

:header - Tous les titres <h1> à <h6>
:hidden - Éléments cachés
:visible - Éléments visibles
[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]")