Que sont les sélecteurs jquery ? Introduction aux sélecteurs communs dans jquery-js tutoriel-php.cn

Le sélecteur jquery est utilisé pour rechercher des nœuds d'éléments. L'une des fonctions les plus puissantes et les plus couramment utilisées de la fonction $() dans jQuery est d'utiliser le sélecteur pour sélectionner les éléments DOM. Par conséquent, l'article suivant vous le présentera. . Jetons un coup d'œil aux sélecteurs couramment utilisés dans jquery. Les amis dans le besoin peuvent y jeter un œil.

Sans plus tard, passons directement au texte~

Il existe quatre grandes catégories de sélecteurs jquery, à savoir les sélecteurs de base, les sélecteurs hiérarchiques, les sélecteurs de filtres et les sélecteurs de formulaire. ces quatre sélecteurs jquery séparément.

1. Le sélecteur de base de jquery

Le sélecteur de base est le sélecteur le plus couramment utilisé dans JQuery et est également le sélecteur le plus simple. Il utilise l'identifiant de l'élément, la classe et le nom de la balise. pour trouver des éléments DOM.

$("#myELement")	选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一元素
$("div")	选择所有的div标签元素，返回div元素数组
$(".myClass")	选择使用myClass类的css的所有元素
$("*")	选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")

$("#myELement ")

Sélectionnez l'élément dont la valeur id est égale à myElement. La valeur id ne peut pas être répété dans le document. Il peut y avoir une valeur id de myElement, donc ce que vous obtenez est le seul élément

$ ("div")

Sélectionnez tous les éléments de balise div et retournez un tableau d'éléments div

$(".myClass") td>

Sélectionner tous les éléments en utilisant le CSS de la classe myClass

$("*")

Sélectionner le document Tous les éléments peuvent être sélectionnés conjointement en utilisant diverses méthodes de sélection : par exemple $("#myELement,div,.myclass")

Remarque : l'ID ne peut être utilisé qu'une seule fois dans la page Web, c'est-à-dire que l'ID est unique, mais la classe peut être utilisée à plusieurs reprises.

2. sélecteur hiérarchique jquery

Le sélecteur hiérarchique obtient des éléments via la relation hiérarchique entre les éléments du DOM. Les principales relations hiérarchiques incluent parent-enfant, descendant, adjacent, fraternel. relation.

$("form input")	选择所有的form元素中的input元素
$("#main > *")	选择id值为main的所有的子元素
$("label + input")	选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div")	同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

Remarque : les opérations en chaîne ne peuvent être effectuées que si cette méthode renvoie un objet JQuery.

3. Sélecteur de filtre jquery

Le sélecteur de filtre filtre principalement les éléments DOM requis via des règles de filtrage spécifiques. Les règles de filtrage sont les mêmes que les pseudo-règles en CSS. . La syntaxe des sélecteurs de classe est la même, c'est-à-dire que les sélecteurs commencent tous par deux points (:) (pour plus d'informations sur les sélecteurs de pseudo-classe CSS, veuillez vous référer au Manuel d'apprentissage CSS). Selon différentes règles de filtrage, les sélecteurs de filtres peuvent être divisés en filtrage de base, filtrage de contenu, filtrage de visibilité, filtrage d'attributs, filtrage de sous-éléments et filtrage de formulaire. Il existe six types de sélecteurs pour les sélecteurs de filtrage d'attributs d'objet. Jetons un bref coup d'œil aux six sélecteurs de filtre jquery

(1) sélecteur de filtre de base jquery

Le sélecteur de filtre est basé sur un certain type de règle de filtrage La correspondance des éléments commence par (:) lorsqu'ils sont écrits ; le sélecteur de filtre simple est le type de sélecteur de filtre le plus utilisé.

$("tr:first") : Sélectionnez le premier de tous les éléments tr

$("tr:last") : Sélectionnez le dernier de tous les éléments tr

$("input:not(:checked) + span") : Filtre tous les éléments d'entrée du sélecteur coché

$("tr:even") : Sélectionnez tous les tr éléments 0 , 2, 4... éléments (remarque : les éléments sélectionnés étant des tableaux, les numéros de séquence commencent à 0)

$("tr:odd") : sélectionnez Le 1er, le 3e, le 5e... élément de tous les éléments tr

$("td:eq(2)") : sélectionnez l'élément td de numéro de série 2 parmi tous les éléments td

$("td:gt( 4)") : Sélectionnez tous les éléments td avec des numéros de séquence supérieurs à 4 dans l'élément td

$("td:ll(4)") : Sélectionnez les éléments td Tous les éléments td avec des numéros de série inférieurs à 4

$(":header") : correspond aux éléments d'en-tête tels que h1, h2, h3 Ceci est spécialement utilisé pour obtenir l'élément de titre

$("div:. animé") : correspond à tous les éléments qui exécutent des effets d'animation

(2) sélecteur de filtre de contenu jquery

Les règles de filtrage du sélecteur de filtrage de contenu se reflètent principalement dans le les sous-éléments et le contenu textuel qu'il contient.

$("div:contains('John')") : Sélectionnez tous les éléments contenant le texte de John dans tous les divs

$("td:empty") : Sélectionnez tous les éléments vides ( Tableau d'éléments td (sans compter les nœuds de texte)

$("div:has(p)") : Sélectionnez tous les éléments div contenant des balises p

$("td:parent" ) : Sélectionnez tous les tableaux d'éléments avec td comme nœud parent

(3) sélecteur de filtre de visibilité jquery

Le sélecteur de filtre de visibilité est basé sur la somme visible de l'élément Invisible state pour sélectionner l’élément correspondant.

$("div:hidden") : Sélectionnez tous les éléments div cachés

$("div:visible") : Sélectionnez tous les éléments div visibles

( 4) Sélecteur de filtre d'attribut jquery

La règle de filtrage du sélecteur de filtre d'attribut consiste à obtenir l'élément correspondant via l'attribut de l'élément.

$("div[id]") : Sélectionnez tous les éléments div contenant des attributs id

$("input[name='newsletter']") : Sélectionnez tous les éléments div dont l'attribut name est égal à l'élément d'entrée 'newsletter'

$("input[name!='newsletter']") : Sélectionnez tous les éléments d'entrée dont l'attribut name n'est pas égal à 'newsletter'

$ ("input [name^='news']") : Sélectionnez tous les éléments d'entrée dont l'attribut name commence par 'news'

$("input[name$='news']") : Sélectionnez tous les noms attributs Éléments d'entrée se terminant par 'news'

$("input[name*='man']") : Sélectionnez tous les éléments d'entrée dont l'attribut name contient 'news'

( 5) sélecteur de filtre d'élément enfant jquery

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$( "ul li:nth-child(3n + 1)") : correspond au Nième enfant ou à l'élément impair-pair sous son élément parent. Ce sélecteur est quelque peu similaire à l'eq() dans les filtres de base mentionnés précédemment, mais différent. La différence est que le le premier commence à 0 et le second à 1.

$("div span:first-child") : renvoie un tableau des premiers nœuds enfants de tous les éléments div

$("div span:last-child" ) : Renvoie un tableau du dernier nœud de tous les éléments div

$("div button:only-child") : Renvoie un tableau de tous les nœuds enfants qui n'ont qu'un seul nœud enfant dans tous les divs

(6) Sélecteur de filtre d'attribut d'objet de formulaire jquery

Ce sélecteur filtre principalement les éléments de formulaire sélectionnés.

$(":enabled") : Sélectionnez tous les éléments de formulaire utilisables

$(":disabled") : Sélectionnez tous les éléments de formulaire inutilisables

$(":checked" ) : Sélectionnez tous les éléments du formulaire cochés

$("select option:selected") : Sélectionnez tous les éléments sélectionnés dans les éléments enfants de select

$("input[@ name =S_03_22]" ).parent().prev().text() : Sélectionnez la valeur texte du td précédent d'une zone de texte d'entrée nommée "S_03_22"

$ ("input[@ name ^='S_'] ").not("[@ name $='_R']") : Le nom commence par "S_" et ne se termine pas par "_R"

$("input[@ name =radio_01][@checked]").val(); : La valeur sélectionnée d'une radio nommée radio_01

$(" A B" ) : Recherchez tous les nœuds enfants sous l'élément A, y compris les nœuds enfants indirects

$("A>B") : Recherchez les nœuds enfants directs sous l'élément A

$(" A+ B") : Recherchez les nœuds frères derrière l'élément A, y compris les nœuds enfants indirects

$("A~B") : Recherchez les nœuds frères derrière l'élément A, à l'exclusion des nœuds enfants indirects

4. Sélecteur de formulaire jquery

En utilisant le sélecteur de formulaire, nous pouvons obtenir un certain élément ou type d'élément du formulaire de manière extrêmement pratique.

Remarque : Remarque : La méthode pour sélectionner la valeur masquée dans l'entrée est celle utilisée dans l'exemple ci-dessus, mais si vous utilisez ":hidden" directement, elle correspondra à tous les éléments invisibles de la page, y compris ceux avec une largeur ou une hauteur de 0 .

$(":input") : Sélectionnez tous les éléments de saisie du formulaire, y compris l'entrée, la zone de texte, la sélection et le bouton

$(":text") : Sélectionnez tous les éléments de saisie de texte

$(":password") : Sélectionnez tous les éléments de saisie du mot de passe

$(":radio") : Sélectionnez tous les éléments de saisie radio

$(":checkbox ") : Sélectionnez tous les éléments d'entrée de case à cocher

$(":submit") : Sélectionnez tous les éléments d'entrée soumis

$(":image") : Sélectionnez tous les éléments d'entrée d'image

$( ":reset") : Sélectionnez tous les éléments d'entrée de réinitialisation

$(":button") : Sélectionnez tous les éléments d'entrée du bouton

$(":file ") : Sélectionnez tous les éléments d'entrée du fichier

🎜>

$(":hidden") : Sélectionnez tous les éléments de saisie de type cachés ou champs masqués du formulaire