Une introduction aux types de sélecteurs couramment utilisés par jquery et à leurs principes d'utilisation

sélecteur jquery, sélecteur css3, sélecteurs divers, en tant que sélecteur jquery très flexible, comment l'utiliser ?

1. Utilisation de base du sélecteur jQuery

Marquez le sélecteur CSS3 que jQuery prend en charge un sous-ensemble assez complet de la syntaxe du sélecteur définie dans le projet, et ajoute également quelques pseudo-classes non standard mais utiles. Remarque : Cette section concerne les sélecteurs jQuery. Beaucoup de ces sélecteurs (mais pas tous) peuvent être utilisés dans les feuilles de style CSS. La syntaxe du sélecteur a une structure à trois niveaux. Vous avez sans doute vu des sélecteurs dans leur forme la plus simple. "#te st" sélectionne l'élément avec l'attribut id "test". "blockquote" sélectionne tous les éléments

du document, tandis que "p.note" sélectionne tous les éléments

avec l'attribut de classe "note". Les sélecteurs simples peuvent être combinés en « sélecteurs combinés », tels que « p.note>p » et « blockquote i », à condition que les caractères de combinaison soient utilisés comme séparateurs. Les sélecteurs simples et combinés peuvent également être regroupés en listes séparées par des virgules. Ce type de groupe de sélecteurs est la forme de sélection la plus courante transmise à la fonction $(). Avant d'expliquer les sélecteurs combinés et les groupes de sélecteurs, nous devons d'abord comprendre la syntaxe des sélecteurs simples.

1. Utilisation simple du sélecteur

, un simple sélecteur peut commencer par "P". Si l'élément sélectionné n'a rien à voir avec le nom de la balise, vous pouvez utiliser le caractère générique "*" à la place. Si le sélecteur ne commence pas par un nom de balise ou un caractère générique, un caractère générique est implicitement inclus.

Le nom de la balise ou le caractère générique spécifie un ensemble initial d'éléments alternatifs du document. Dans un sélecteur simple, la partie après la déclaration du type de balise se compose de zéro ou plusieurs filtres. Les filtres sont appliqués de gauche à droite, dans l'ordre dans lequel ils sont écrits, et chacun d'eux restreint l'ensemble des éléments sélectionnés. Le tableau suivant répertorie les filtres pris en charge par jQuery.

Filtre de sélection jQuery

Filtre Signification

# id correspond aux éléments dont l'attribut id est id. Dans un document ITML valide, il n'y aura jamais plusieurs éléments avec le même ID, ce filtre est donc généralement utilisé comme sélecteur autonome

.class Correspond à la classe attribut (qui est une chaîne analysée dans une liste de mots séparés par des espaces) contenant tous les éléments avec le mot de classe

[attr] correspond à l'attribut attr ( All éléments

[attr=val] correspondent à tous les éléments

qui ont un attribut attr et une valeur val quelle que soit la valeur)

[attr!=val] Correspond à tous les éléments qui n'ont pas d'attribut attr, ou la valeur de l'attribut attr n'est pas val ((extension jQuery)

[ attr^=val] Faire correspondre les éléments dont la valeur de l'attribut attr commence par val

[attr$=val] Faire correspondre la valeur de l'attribut attr qui commence par val L'élément de fin

[attr*=val] correspond à l'élément dont la valeur de l'attribut attr contient val

[attr~ =val] Correspond aux éléments contenant le mot val lorsque leur attribut attr est interprété comme une liste de mots séparés par des espaces, donc le sélecteur "p.note" est le même que "p [class ~=note]". Identique à

[attr|=val] Correspond aux éléments dont la valeur de l'attribut attr commence par val et n'a aucun autre caractère après, ou les autres caractères commencent par un trait d'union

:animated correspond à l'élément animé, qui est généré par jQuery

:button Correspond aux éléments et (extension jQuery)

:checkbox correspond aux éléments (une extension de jQuery). Ce filtre est plus efficace lorsque la balise d'entrée est explicitement préfixée par "input:checkbox"

:checked correspond à l'élément d'entrée sélectionné

:contains(text) correspond contient Spécifiez le élément de texte (extension jQuery). Les parenthèses de ce filtre couvrent le texte : aucun guillemet n'est requis. Le texte de l'élément filtré est déterminé par l'attribut textContent ou innerText - il s'agit du texte original du document, sans balises ni commentaires

:disabled correspond à l'élément désactivé

:empty correspond aux éléments sans nœuds enfants et sans contenu texte

:enabled Correspondances éléments qui ne sont pas désactivés

:eq(n) Correspond au nième élément de la liste sélectionnée en fonction de l'ordre des documents et à partir de 0 (extension jQuery)

:even correspond aux éléments pairs de la liste. Puisque le numéro de séquence du premier élément est 0, les 1er, 3ème, 5ème, etc. éléments sont effectivement sélectionnés (extension jQuery)

:file Correspondances < ;input type="file"> elements (extension jQuery)

:first Correspond au premier élément de la liste. Identique à ":eq(0)" (extension jQuery)

:first-child L'élément correspondant est le premier élément enfant de son nœud parent. Remarque : Ceci est différent de ":first"

:gt(n) Correspond aux éléments supérieurs à n dans une liste sélectionnée en fonction de l'ordre des documents et en commençant à 0 (extension jQuery)

:has(sel) L'élément correspondant a un élément descendant qui correspond au sélecteur intégré sel

:header Correspond à tous les éléments d'en-tête :

,

,

,

,

ou

>

:hidden

Correspond à tous les éléments qui ne sont pas visibles à l'écran : De manière générale, les offsetWidth et offsetHeight de ces éléments peuvent être considérés comme égaux à 0

:image

correspond à l'élément Notez que ce filtre ne correspondra pas aux éléments (extension jQuery)

 : input

correspond aux éléments d'entrée de l'utilisateur : , et <button> (extension jQuery) <span class="Apple-tab-span" style="font-size: 12px; white-space: pre;"></span></button>

:last

correspond au dernier élément de la liste sélectionnée (( extension jQuery)

:last-child

correspond à l'élément qui est le dernier enfant de son nœud parent Remarque : ceci est différent de ":last" . 🎜>:lt(n)

Fait correspondre les éléments dont le numéro de séquence est inférieur à n dans la liste sélectionnée en fonction de l'ordre des documents et en commençant à 0 (extension jQuery)

:not(sel) L'élément correspondant ne correspond pas au sélecteur en ligne sel

:nth(n) Identique à ":eq(n)" (une extension de jQuery)

:nth-child(n) Correspond à un élément qui est le nième enfant de son élément parent. . Il peut s'agir d'une valeur numérique, du mot pair, du mot impair ou d'une formule de calcul. Utilisez ":nth-child(even)" pour sélectionner les éléments classés 2e ou 4e parmi les éléments enfants de leur nœud parent. Utilisez ":nth-child(odd)" pour sélectionner les éléments classés 1er, 3e, etc. parmi les éléments enfants de leur nœud parent.

La situation la plus courante est que n est une formule de calcul telle que xn ou x n+y, où x et y sont des nombres entiers et n est un n littéral. Par conséquent, vous pouvez utiliser nth-child(3n+1) pour sélectionner les 1er, 4e, 7e, etc.

Notez que le numéro de séquence de ce filtre commence à 1, donc si un élément est le premier élément enfant de son nœud parent, il sera considéré comme un élément impair et la correspondance sera 3n +1 au lieu de 3n. Pour le distinguer des filtres ":even" et ":odd", le numéro de séquence correspondant de ces derniers part de 0.

:odd dans le matching lister les éléments avec des nombres impairs (à partir de 0). Notez que les éléments portant les numéros 1 et 3 sont respectivement les 2ème et 4ème éléments correspondants (extension jQuery)

:only-child . Correspond aux éléments qui sont les seuls enfants de leur nœud parent

:parent Correspond aux éléments qui sont le nœud parent, ce qui est identique à ":empty " Au contraire (extension jQuery)

 : password correspond à l'élément (extension jQuery)

:radio Correspond à l'élément (extension de j Query)

:reset Correspond aux éléments et (extension jQuery)

 : sélectionné correspond à l'élément sélectionné. Utilisez ":checked" pour sélectionner les cases à cocher et les boutons radio sélectionnés (extension jQuery)

:submit match et éléments (extension jQuery)

:text correspond à input type="text"> ; élément (extension jQuery)

:visible correspond à tous les éléments actuellement visibles : de manière générale, les offsetWidth et offsetWidth de ces éléments peuvent être pris en compte. La valeur de offsetHeight est pas 0, ce qui est l'opposé de ":hidden"

Remarque : certains sélecteurs répertoriés dans le tableau acceptent les paramètres entre parenthèses. Par exemple, le sélecteur ci-dessous sélectionne les éléments classés 1er ou 2e. parmi les éléments enfants de leur nœud parent, tant qu'ils contiennent le mot "JavaScript", n'incluez pas les éléments

p:nth-child(3n+ 1): text (). JavaScript):not(:has(a))

De manière générale, spécifier le préfixe du type de balise peut rendre le filtre plus efficace. Par exemple, ne soyez pas simple. :radio" pour sélectionner les boutons radio, "input:radio" serait mieux. L'exception est le filtre ID, qui est plus efficace sans ajouter de préfixe de balise. Par exemple, le sélecteur "#adresse" est souvent plus efficace que le "formulaire#adresse", plus explicite.

2. Utilisation du sélecteur de combinaison

Utilisez des opérateurs spéciaux ou des « combinateurs » » Vous peut combiner des sélecteurs simples pour exprimer les relations entre les éléments de l'arborescence du document. Le tableau suivant répertorie les sélecteurs combinés pris en charge par jQuery. Ces sélecteurs de combinaison sont les mêmes que ceux pris en charge par CSS3.

Voici quelques exemples de sélecteurs combinés :

"Blockquote I" // bloc & lt; correspondant; dans l'élément & lt;

& lt; lt; de & gt; sous-élément direct

"#Output+*" // ID = élément "Sortie" derrière l'élément

"" "" "" " p.note > h1+p" //Suivez l'élément

de

, à l'intérieur de

Faites attention à la combinaison Les sélecteurs ne se limitent pas à combiner deux sélecteurs : la combinaison de trois sélecteurs ou plus est également autorisée. Les sélecteurs de combinaison sont traités de gauche à droite.

3. La combinaison de sélecteur

est transmise à la fonction $() (ou in Le sélecteur utilisé dans une feuille de style est un groupe de sélecteurs, qui est une liste séparée par des virgules d'un ou plusieurs sélecteurs simples ou sélecteurs combinés. Les éléments correspondant à un groupe de sélecteurs doivent uniquement correspondre à n'importe quel sélecteur du groupe de sélecteurs. Pour nous, un simple sélecteur peut également être considéré comme un groupe de sélecteurs. Voici quelques exemples de groupes de sélecteurs :

"h1, h2,h3" // Correspond aux éléments

,

>

"#p1, #p2, #p3" // Faites correspondre l'élément avec l'identifiant p1, p2 ou p3

"p.note, p.note " // Correspond aux éléments

et

de class="note"

"body>p,p.note>p" // 🎜>

de parenthèses

, mais ne permet pas l'utilisation de parenthèses pour des regroupements plus courants. Par exemple, vous ne pouvez pas mettre des groupes de sélecteurs ou des combinaisons de sélecteurs entre parenthèses et les traiter comme de simples sélecteurs :

(h1, h2, h3)+p //Illégal

h1+p, h2+p, h3+p //Façon correcte d'écrire

2. Comment sélectionner

En plus de la syntaxe de sélection prise en charge par la fonction $(), jQuery définit également certaines méthodes de sélection . La plupart des méthodes jQuery que nous avons vues dans ce chapitre effectuent une sorte d'opération sur l'élément sélectionné. Les méthodes de sélection sont différentes : elles modifient l'ensemble des éléments sélectionnés, extraient, développent ou servent simplement de point de départ à de nouvelles opérations de sélection.

Cette section décrit ces méthodes de sélection. Vous remarquerez que la plupart de ces méthodes de sélection offrent les mêmes fonctionnalités que la syntaxe du sélecteur.

Le moyen le plus simple d'extraire les éléments sélectionnés est de les extraire par position. L'objet jQuery renvoyé par first() contient uniquement le premier élément sélectionné et l'objet jQuery renvoyé par last() ne contient que le dernier élément. Plus généralement, l'objet Query renvoyé par la méthode eq() ne contient qu'un seul élément sélectionné avec le numéro de séquence spécifié. (Dans jQuery 1.4, les nombres négatifs sont également autorisés, à compter de la fin de la sélection.) Notez que l'objet jQuery renvoyé par ces méthodes ne contient qu'un seul élément. Ceci est différent du numéro de série commun du tableau. L'élément unique renvoyé par le numéro de série du tableau n'est pas empaqueté par jQuery :

var paras=$("p");

Paras.first () // Sélectionnez uniquement le premier élément & lt; p & gt;

paras.last () // Uniquement le dernier & lt; p & gt;

paras.eq(1)                                                                                                                                                                                                                             L'avant-dernier

paras[1]                                                                                                                                                                              

Une méthode plus générale pour extraire une sélection par position est slice()o. La méthode slice() de jQuery est similaire à la méthode Array.slice() : la première accepte les nombres de début et de fin (les nombres négatifs seront calculé à partir de la fin), l'objet jQuery renvoyé contient l'ensemble des éléments du début au numéro de séquence de fin (mais sans inclure le numéro de séquence de fin). Si le numéro de séquence de fin est omis, l'objet renvoyé contiendra tous les éléments du numéro de séquence de début :

$("p").slice(2,5) //Sélectionnez le 3ème, Les 4ème et 5ème éléments

$("p").slice(-3) //Sélectionnez les 3 derniers éléments

🎜>

filter() est une méthode de filtrage de sélection générale. Il existe 3 méthodes d'appel :

Passez la chaîne de sélection à filter() et elle renverra un jQuery. objet contenant uniquement les éléments sélectionnés qui correspondent également à ce sélecteur.

Passez un autre objet jQuery à filter(), qui renverra un nouvel objet jQuery contenant l'intersection de ces deux objets Query. Vous pouvez également transmettre un tableau d'éléments ou même un seul élément de document à filter().

Passez la fonction de jugement à filter() et la fonction sera appelée pour chaque élément correspondant. filter() renvoie un objet jQuery qui ne contient la fonction de jugement que si elle est vraie (ou). tout élément de valeur vraie). Lors de l'appel de la fonction de jugement, cette valeur est l'élément actuel et le paramètre est le numéro de l'élément.

$("p").filter(".note") //Identique à $("p.note")

$("p").filter($(".note")) //Identique à $("p.note")

$("p") .filter(function(idx){return idx%2 == 0}) //Identique à $("p:even")

la méthode not() est la même que filter () , sauf que la signification est opposée à filter(). Si vous transmettez une chaîne de sélecteur à not(), il renverra un nouvel objet jQuery contenant uniquement les éléments qui ne correspondent pas au sélecteur. Si vous transmettez un objet jQuery, un tableau d'éléments ou un seul élément à not(), il renverra tous les éléments sélectionnés sauf ceux explicitement exclus. Si vous transmettez une fonction de jugement à not(), la fonction de jugement est appelée comme dans filter(), sauf que l'objet jQuery renvoyé ne contient que les éléments qui amènent la fonction de jugement à renvoyer des valeurs fausses ou d'autres valeurs fausses :

$("p").not("#header, #footer"); //Tous les éléments sauf deux éléments spéciaux

dans jQuery 1.4 , une autre façon d’extraire une sélection est la méthode has(). Si un sélecteur est transmis, has() renverra un nouvel objet jQuery contenant uniquement les éléments sélectionnés dont les descendants correspondent au sélecteur. Si vous transmettez un élément de document à has(), il ajustera l'ensemble des éléments sélectionnés aux éléments sélectionnés qui sont des nœuds ancêtres de l'élément spécifié :

$("p") .has(" a[href]") // Paragraphes contenant des liens

La méthode add() élargira la sélection au lieu de la filtrer ou de l'extraire. Tous les paramètres (à l'exception des fonctions) passés à la fonction $() peuvent également être transmis à la méthode add(). La méthode add() renvoie les éléments sélectionnés d'origine, ainsi que les éléments sélectionnés (ou créés) par les paramètres passés à la fonction $(). add() supprimera les éléments en double et triera la sélection combinée afin que les éléments soient dans l'ordre dans le document :

//Sélectionner tout

Manière équivalente des éléments

$("p, p") //Utiliser le groupe de sélection

$("p") .add(p) //Passer le sélecteur à add()

$("p").add($("p")) / /Passer l'objet jQuery dans add()

var paras = document.getElementsByTagName("p"); //Objet de type tableau

$("p").add (paras); //Passez le tableau d'éléments à ajouter()

1. Restaurer l'ensemble d'éléments sélectionné précédentAfin de réaliser l'appel en chaîne des méthodes, de nombreuses méthodes d'objet jQuery finiront par renvoyer l'objet appelant. Cependant, les méthodes décrites dans cette section renvoient toutes de nouveaux objets jQuery. Vous pouvez continuer à appeler dans une chaîne, mais vous devez clairement comprendre que l'ensemble d'éléments opéré après l'appel de chaîne peut ne plus être l'ensemble d'éléments au début de l'appel de chaîne.

La situation réelle est plus compliquée. Lorsque les méthodes de sélection décrites ici créent ou renvoient un nouvel objet ejQuery, elles ajoutent une référence interne à l'ancien objet jQuery dont il est dérivé. Cela crée une liste chaînée ou une pile d'objets jQuery. La méthode end() est utilisée pour afficher la pile et renvoyer l'objet jQuery enregistré. L’appel de end() dans une chaîne d’appels restaurera l’ensemble des éléments correspondants à son état précédent. Considérez le code suivant :

//Trouvez tous les éléments

, puis recherchez les éléments

à l'intérieur d'eux

/ /High Mettez en surbrillance l'élément

, puis ajoutez une bordure à l'élément

//Tout d'abord, n'utilisez pas d'appels en chaîne

var ps = $("p");

var paras = p.find("p");

paras.addClass ("surligner");

ps.css("border", "solid black 1px");

//Ce qui suit montre comment utiliser les appels en chaîne pour implémenter

$("p").find("p").addClass("highlight"). end().css ("border", "solid black 1px");

//Vous pouvez également inverser l'ordre des opérations pour éviter d'appeler end()

$("p").css("border", "solid block 1px").find("p").addClass("highlight");

Si vous souhaitez le définir manuellement Pour sélectionner un ensemble d'éléments tout en conservant la compatibilité avec la méthode end(), vous pouvez transmettre le nouvel ensemble d'éléments à la méthode push5tack() en tant que tableau ou objet de type tableau. L'élément spécifié deviendra le nouvel élément sélectionné et l'ensemble d'éléments précédemment sélectionné sera poussé sur la pile. Ils pourront ensuite être restaurés à l'aide de la méthode end() :

var sel =. $("p");                                                                                                                                                   using using use with using using ’ sel 🎜>> Il existe une dernière méthode qui doit être expliquée dans la pile de sélection. andSelf() renvoie un nouvel objet jQuery contenant tous les éléments actuellement sélectionnés, ainsi que tous les éléments précédemment sélectionnés (les doublons seront supprimés). andSelf() est identique à la méthode add(), peut-être que "addPrev" est un nom plus descriptif. À titre d'exemple, considérons la variante suivante du code ci-dessus : mettre en surbrillance l'élément

et les éléments

dans son nœud parent, puis ajouter une bordure à ces éléments

>

$("p").find("p").andSelf().                                //Recherchez

dans

addclass ("highlight"). // Gao Liang

End (). // Branche la pile deux fois et renvoie $ ("p")

🎜>

css("border", "solid black 1px"); //Ajouter une bordure à ps

2. Sélectionnez l'élément L'ensemble est utilisé comme contexte

Les méthodes filter(), add() et not() décrit ci-dessus effectuera des opérations d'intersection, de définition et de différence. jQuery définit également d'autres méthodes de sélection qui peuvent utiliser l'ensemble d'éléments actuellement sélectionné comme contexte. Pour chaque élément sélectionné, ces méthodes utiliseront l'élément sélectionné comme contexte ou point de départ pour obtenir un nouvel ensemble d'éléments sélectionnés, puis renverront un nouvel objet jQuery contenant l'union de tous les nouveaux éléments sélectionnés. Semblable à la méthode add(), les éléments en double sont supprimés et triés afin que les éléments soient classés dans l'ordre dans lequel ils apparaissent dans le document.

La méthode la plus courante pour sélectionner cette catégorie est find(). Il recherche les éléments qui correspondent à la chaîne de sélection spécifiée parmi les descendants de chaque élément actuellement sélectionné, puis renvoie un nouvel objet jQuery représentant l'ensemble des descendants correspondants. Notez que ces éléments nouvellement sélectionnés ne seront pas fusionnés dans l’ensemble existant d’éléments sélectionnés. Notez également que find() est différent de filter(). filter() ne sélectionnera pas de nouveaux éléments, mais réduira simplement l'ensemble d'éléments actuellement sélectionné :

$("p").find("p") //Rechercher des éléments dans, identique à $("p p")

Dans cette catégorie Autres méthodes renvoie de nouveaux objets jQuery qui représentent les éléments enfants, frères et sœurs ou éléments parents de chaque élément de l'ensemble d'éléments actuellement sélectionné. La plupart acceptent une chaîne de sélection facultative comme argument. Lorsqu'aucun sélecteur n'est transmis, ils renvoient tous les éléments enfants, frères et sœurs ou éléments parents. Lorsque les sélecteurs sont transmis, ils filtrent l'ensemble des éléments et ne renvoient que ceux qui correspondent.

La méthode children() renvoie les éléments enfants directs de chaque élément sélectionné, qui peuvent être filtrés avec des paramètres de sélecteur facultatifs :

/ / Recherchez tous les éléments

dans les éléments du nœud enfant avec les ID des éléments "header" et "footer" //Avec $("#header>span, #footer> span ") est identique à La méthode children() est similaire, sauf qu'elle renvoie tous les nœuds enfants de chaque élément, y compris les nœuds de texte. S'il existe un élément

Les méthodes next() et prev() renvoient les éléments frères suivants et précédents (le cas échéant) de chaque élément sélectionné. Si un sélecteur est passé, seuls les éléments frères correspondant au sélecteur seront sélectionnés :

$("h1").next("p") //With $("h1 + p") Identique à

$("h1").prev() //

L'élément frère devant l'élément

nextAll() et prevAll() renvoient tous les éléments frères avant ou après chaque élément sélectionné (le cas échéant). La méthode siblings() renvoie tous les éléments frères de chaque élément sélectionné (l'élément sélectionné lui-même n'est pas son propre élément frère). Si vous passez un sélecteur à ces méthodes, seuls les éléments frères et sœurs correspondants seront renvoyés :

$("#footer").nextAll("p") //Suivez l'élément #footer All

éléments frères et sœurs

$("#footer").prevAll() //Tous les éléments frères et sœurs devant l'élément #footer

À partir de jQuery 1.4, les méthodes nextUntil() et prevUntil() acceptent un paramètre de sélecteur et sélectionneront tous les éléments frères derrière ou devant l'élément sélectionné jusqu'à ce qu'un élément frère correspondant au sélecteur soit trouvé. Si le sélecteur est omis, ces deux méthodes se comportent de la même manière que nextAll() et prevAll() sans sélecteur. La méthode

parent() renvoie le nœud parent de chaque élément sélectionné :

$("li").parent() //Liste Le nœud parent de l'élément, tel que la méthode et

parents() renvoie le nœud ancêtre de chaque élément sélectionné (jusqu'à l'élément). parent() et parents() acceptent tous deux un paramètre de chaîne de sélection facultatif :

$("a[href]").parents("p") //Contient Linked

parentsUntil() renvoie les éléments ancêtres de chaque élément sélectionné jusqu'à ce que le premier élément ancêtre correspondant au sélecteur spécifié apparaisse. La méthode la plus proche() doit transmettre une chaîne de sélection et renverra l'élément ancêtre le plus proche correspondant au sélecteur parmi les éléments ancêtres de chaque élément sélectionné (le cas échéant). Pour les besoins de cette méthode, les éléments sont considérés comme leurs propres ancêtres. Dans jQuery 1.4, vous pouvez également passer un élément ancêtre comme deuxième paramètre à close() pour empêcher jQuery d'aller au-delà de l'élément spécifié lors d'une recherche vers le haut :

$(" a[href ]").closest("p") //La couche la plus interne contenant le lien

$("a[href]").parentsUntil(" :not(p )") //Tous les éléments

qui enveloppent

Ce qui précède est l'introduction complète aux sélecteurs et principes jquery. Merci d'avoir lu !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!