Tutoriel de base jQuery

Effets jQuery

Les sélecteurs jQuery vous permettent de sélectionner et de manipuler les éléments HTML.

Cette section contient la liste complète des sélecteurs appartenant à la bibliothèque JavaScript jQuery la plus récente.

Tous les sélecteurs sont divisés en plusieurs catégories.

Sélecteur	Exemple	Explication
*	$("*")	Sélection de tous les éléments (sélecteur universel)
#identifiant	$("#demo")	Sélection d'un élément avec l'identifiant "demo"
.classe	$(".demo")	Sélection de tous les éléments avec la classe "demo"
élément	$("p")	Sélection de tous les éléments "<p>"
sélecteur1, sélecteur2	$("p, div")	Sélection de tous les éléments "<p>" et tous les éléments "<div>"

Sélecteur	Exemple	Explication
ascendant descendant	$("div p")	Sélection de tous les éléments "<p>" situés à l'intérieur de l'élément "<div>"
parent > enfant	$("div > p")	Sélection de tous les éléments "<p>" dont l'élément parent est un "<div>"
précédent + suivant	$("div" + p")	Sélection de tous les éléments "<p>" qui suivent immédiatement l'élément "<div>"
précédent ~ frères	$("div ~ p")	Sélection de tous les éléments "<p>" qui sont égaux aux éléments frères de l'élément "<div>"

Sélecteur	Exemple	Explication
[attribute]	$("[target]")	Sélection de tous les éléments avec l'attribut "target"
[attribute=value]	$("a[href=\u0026quot;]39;CSS3'])	Sélection de tous les éléments "a" avec la valeur de l'attribut "href" égale à " CSS"3" de l'élément <a>
[attribute!=value]	$("a[href!=\u0026quot;]39;CSS3'])	Sélectionnez tous les éléments whose valeur de l'attribut href n'est pas égale à " CSS3" de l'élément <a>
[attribut~=value]	$('[alt~=Parrot]')	Sélectionnez tous les éléments qui ont l'attribut alt et contiennent le mot "Parrot"
[attribut\|=value]	$('[lang\|=en]')	Sélectionnez tous les éléments whose valeur de l'attribut lang commence par " en"
[attribut^=value]	$('a[href^=https]')	Sélectionnez tous les éléments whose valeur de l'attribut href commence par " https"
[attribut$=value]	$('a[href$='.org'])	Sélectionnez chaque élément <a> dont la valeur de l'attribut href se termine par " .org"
[attribut*=value]	$('a[href*=example])	Sélectionnez chaque élément <a> dont la valeur de l'attribut href contient la sous-chaine "example"

Sélecteur	Exemple	Explication
:first	$('p:first')	Sélectionnez le premier élément <p>
:last	$('p:last')	Sélectionnez le dernier élément <p>
:even	$('tr:even')	Sélectionnez tous les éléments <tr> à l'index zéro qui sont des nombres pairs
:odd	$('tr:odd')	Sélectionnez tous les éléments <tr> à l'index zéro qui sont des nombres impairs
:not()	$('p:not(.demo)')	Sélectionnez tous les éléments <p> sauf ceux qui ont la classe "demo"
:eq()	$('tr:eq('2)")	Sélectionnez le troisième élément <tr> à partir de l'index zéro dans l'ensemble correspondant
:lt()	$('tr:lt('5)")	Sélectionnez tous les éléments whose index number is less than5des éléments <tr>, à partir de l'index zéro
:gt()	$('tr:gt('5)")	Sélectionnez tous les éléments whose index number is greater than5des éléments <tr>, à partir de l'index zéro
:header	$(':header')	Sélectionnez tous les éléments en-tête, par exemple <h1>，《h2>，《h3>etc.
:lang()	$('div:lang(en)')	Sélectionnez tous les éléments <div> qui ont une valeur de langue "en", c'est-à-dire lang="en", lang="en-us"etc.
:root	$(':root')	Sélectionnez l'élément racine du document, qui est toujours l'élément <html> du document HTML
:animated	$(':animated')	Le sélecteur sélectionne tous les éléments animés lors de l'exécution du sélecteur

Sélecteur	Exemple	Explication
:first-child	$("p:first-child)	Sélectionnez tous les éléments <p> qui appartiennent au premier enfant du parent
:last-child	$("p:last-child)	Sélectionnez tous les éléments <p> qui appartiennent au dernier enfant du parent
:only-child	$("p:only-child)	Sélectionner tous les éléments <p> appartenant à l'unique enfant du parent
:first-of-type	$("p:first-of-type)	Sélectionner tous les éléments <p> appartenant à l'élément <p> premier du parent
:last-of-type	$("p:last-of-type)	Sélectionner tous les éléments <p> appartenant à l'élément <p> dernier du parent
:only-of-type	$("p:only-of-type)	Sélectionner tous les éléments <p> n'ayant pas d'éléments frères et ayant le même nom d'élément
:nth-child(n)	$("p:nth-child(3)")	Sélectionner tous les éléments <p> appartenant au troisième enfant du parent
:nth-last-child(n)	$("p:nth-last-child(4)")	Sélectionner tous les éléments <p> appartenant au parent et étant le quatrième enfant
:nth-of-type(n)	$("span:nth-of-type(3)")	Sélectionner tous les éléments <span> appartenant à l'élément <span> de rang trois
:nth-last-of-type(n)	$("span:nth-last-of-type(4)")	Sélectionner l'élément appartenant au parent de rang4Tous les éléments <span> d'un <span> donné, en comptant de l'élément dernier à l'élément premier

Sélecteur	Exemple	Explication
:contains()	$("p:contains('is')")	Sélectionner tous les éléments <p> contenant le texte "is"
:empty	$(":empty")	Sélectionner tous les éléments vides, c'est-à-dire sans éléments enfants (y compris le texte)
:has()	$("p:has(span)")	Sélectionner tous les éléments <p> contenant au moins un élément <span>
:parent	$(":parent")	Sélectionner tous les éléments qui ont au moins un noeud enfant (élément ou texte)

Sélecteur	Exemple	Explication
:input	$(":input")	Sélectionner tous les éléments d'entrée, les zones de texte, les sélecteurs et les boutons
:text	$(":text")	Sélectionner tous les éléments d'entrée de type "text"
:password	$(":password")	Sélectionner tous les éléments d'entrée de type "password"
:radio	$(":radio")	Sélectionner tous les éléments d'entrée de type "radio"
:checkbox	$(":checkbox")	Sélectionner tous les éléments d'entrée de type "checkbox"
:button	$(":button")	Sélectionner tous les éléments d'entrée et les boutons de type "button"
:submit	$(":submit")	Sélectionner tous les éléments d'entrée et les boutons de type "submit"
:reset	$(":reset")	Sélectionner tous les éléments d'entrée et boutons de type "reset"
:image	$(":image")	Sélectionner tous les éléments d'entrée de type "image"
:file	$(":file")	Sélectionner tous les éléments d'entrée de type "file"
:enabled	$(":enabled")	Sélectionner tous les éléments activés
:disabled	$(":disabled")	Sélectionner tous les éléments désactivés
:selected	$(":selected")	Sélectionner tous les éléments sélectionnés, applicable uniquement aux éléments <option>
:checked	$(":checked")	Sélectionner tous les éléments sélectionnés ou sélectionnés, applicable aux cases à cocher, boutons radio et éléments de sélection
:focus	$(":focus")	Sélectionner l'élément actuellement en état de focus

Sélecteur	Exemple	Explication
:hidden	$("p:hidden")	Sélectionner tous les éléments <p> cachés
:visible	$("p:visible")	Sélectionner tous les éléments <p> visibles