Encyclopédie du sélecteur jquery explication complète et détaillée de jquery selector_jquery

Les sélecteurs n'ont pas de définition fixe. Dans une certaine mesure, les sélecteurs de jQuery sont très similaires aux sélecteurs des feuilles de style. Le sélecteur présente les caractéristiques suivantes :
1. Simplifiez l'écriture de code
2. Itération implicite
3. Il n'est pas nécessaire de juger si l'objet existe
où "$" est un élément indispensable du sélecteur, $ est une abréviation de jQuery, comme $("#foo") et jQuery(" #foo") De manière équivalente, $.ajax et jQuery.ajax sont équivalents. S'il n'y a pas d'instructions spéciales, vous pouvez comprendre le symbole $ dans le programme comme l'abréviation de jQuery.
Maintenant, nous entrons officiellement dans l'étude du sélecteur jQuery. Les sélecteurs sont classés en fonction de leurs habitudes fonctionnelles. Différents types de classificateurs sont classés ci-dessous et expliqués respectivement pour permettre aux lecteurs de les maîtriser.
1. Sélecteurs de base
Les sélecteurs de base comprennent 5 types de sélecteurs : #id, element, .class, * et selectorl, selector2.selectorN. Chaque type sera présenté ci-dessous avec des exemples. rôle des sélecteurs et comment les utiliser.
1． #id selector
#Le sélecteur d'identifiant correspond à un élément en fonction de l'ID donné. Si le sélecteur contient des caractères spéciaux, ils peuvent être échappés avec deux barres obliques et la valeur de retour est Array.
2． sélecteur d'élément
Le sélecteur d'élément est un élément utilisé pour la recherche. Le nom de la balise pointant vers le nœud DOM. Sa valeur de retour est Array.
3． Le sélecteur de classe
. Le sélecteur de classe correspond aux éléments basés sur une classe donnée et est une classe à rechercher. Un élément peut avoir plusieurs classes. Tant qu'il y a une correspondance, elle peut être mise en correspondance. La valeur de retour est Array.

Exemple :

Copier le code Le code est le suivant :

Sélection basée sur le nom de l'élément

jQuery("#ID").val();
jQuery("a").text( );
jQuery (".classname").val();

peut obtenir la valeur de l'élément respectivement. Les trois sélecteurs ci-dessus sont les plus courants, parmi lesquels le sélecteur d'ID est le plus efficace et doit être utilisé autant que possible.

4． *Sélecteur
* Le sélecteur est principalement utilisé pour rechercher en contexte et faire correspondre tous les éléments. Sa valeur de retour est Array.
5． selector1, selector2, selectorN selector
Ce type de sélecteur combine les éléments correspondant à chaque sélecteur et les renvoie ensemble. Vous pouvez spécifier n'importe quel nombre de sélecteurs et fusionner les éléments correspondants en un seul résultat. La valeur de retour est : Array. Dans l'exemple suivant, les lecteurs peuvent clairement comprendre les fonctions de selector1, selector2 et selectorN en effectuant des opérations CSS sur les éléments sélectionnés.
2. Sélecteur de niveau
Le sélecteur de niveau comprend 5 formes : ancêtre, descendant, parent > Ce qui suit utilise des exemples pour présenter en détail le rôle et l'utilisation de chaque sélecteur.
1． Le sélecteur ancêtre descendant
fait référence à la correspondance de tous les éléments descendants sous un élément ancêtre donné. L'ancêtre en tant que paramètre représente tout sélecteur valide, tandis que le descendant est un sélecteur utilisé pour faire correspondre les éléments, et il s'agit des descendants du premier sélecteur. . La valeur de retour est : Array.
2． parent>sélecteur enfant
le sélecteur parent>enfant signifie faire correspondre tous les éléments enfants sous un élément parent donné. Les significations des deux paramètres sont les suivantes : parent représente tout sélecteur valide ; child est le sélecteur utilisé pour faire correspondre l'élément, et c'est un élément enfant du premier sélecteur. Sa valeur de retour est Array.
3． sélecteur suivant précédent
Ce type de sélecteur est utilisé pour faire correspondre tous les éléments suivants suivant immédiatement l'élément précédent. Les significations des deux paramètres sont les suivantes : prev représente tout sélecteur valide ; next représente un sélecteur valide suivant immédiatement le premier sélecteur. Sa valeur de retour est Array.
4． prev ~ siblings selector
prev ~ siblings selector représente tous les éléments frères et sœurs après avoir fait correspondre l'élément précédent. Les significations des deux paramètres sont les suivantes : prev représente tout sélecteur valide ; représente un sélecteur et il sert de frère au premier sélecteur. Sa valeur de retour est Array.

Exemple :

Copier le code Le code est le suivant :

" />
                                                                                 < 1
                                                                                                                                                                                                  2

//Le résultat de l'obtention du contenu de la balise a dans le div est 12
jQuery(" #divTest a").text();
//La sortie directe du div le résultat du nœud enfant est investissement
jQuery("#divTest>input").val();
//L'identifiant de sortie est suivant Le résultat de ce dernier élément du même niveau est Responsabilité
jQuery(" #next input").val();
//Identique à ci-dessus, et le résultat de l'élément avec le titre est Study
jQuery("#next~[ title]").val();


3. Sélecteur de filtre

Le sélecteur de filtre filtre principalement les éléments DOM requis via des règles de filtrage spécifiques et CSS La syntaxe du sélecteur de pseudo-classe est la même, c'est-à-dire la. les sélecteurs commencent tous par deux points. Les sélecteurs de filtres impliquent beaucoup de contenu, avec un total de 6 types, mais ils peuvent être classés. Ci-dessous, nous expliquerons en détail les différents types de sélecteurs.
1． Sélecteur de filtre de base

Le sélecteur de filtre de base est le type de sélecteur de filtre le plus couramment utilisé. Il comprend principalement les formes suivantes, qui sont expliquées en détail ici : (1) : premier/: dernier sélecteur.
(2) :pas de sélecteur. (3) : sélecteurs pairs et : impairs.
(4):eq:gt, :lt, sélecteur.
(5) : sélecteur d'en-tête.
(6) : sélecteur animé.
Exemple :

Copier le code Le code est le suivant :

                                                                                                                                        < " Ne pas apprendre" />

 

//Le premier résultat du contenu Li est un investissement
jQuery ("li:first").text() ;
//Le résultat du dernier contenu li est responsable
jQuery("li:last").text();
//Le résultat de la valeur non sélectionnée n'est pas apprise
jQuery(" li input:not(:checked)").val();
//Le résultat de li avec un nombre pair est la maturité de l'investissement
jQuery("li :even").text();
// Le résultat du li avec un nombre impair est le directeur financier
jQuery("li:odd").text();
//Le contenu du li avec un indice supérieur à 2 est le résultat du gestionnaire financier
jQuery("li:gt( 2)").text();
//Le contenu du li avec un indice inférieur à 1 entraîne un investissement
jQuery("li:lt(1)").text();


2. Sélecteur de filtrage de contenu

Le sélecteur de filtrage de contenu comprend principalement 4 types. de filtres : contain, :empty, :has et :parent. Cette partie du filtre est un complément aux sélecteurs de filtrage de base introduits ci-dessus. De plus, elle joue un rôle important dans la sélection des pages, la configuration de l'affichage des éléments, etc. Chaque sélecteur sera présenté en détail ci-dessous.
(1) : contient un sélecteur.
(2) : sélecteur vide.
(3) : possède un sélecteur.
(4) : sélecteur de parents.

Exemple :


Copier le code

Le code est le suivant :

                                                                               >                          "                                              🎜>//Le résultat du contenu du li contenant hyip est hyip investissement hyipjQuery("li:contains('hyip')").text(); //Le contenu est le prochain li du li vide Le résultat du contenu est la gestion financièrejQuery("li:empty li").text();//Le résultat du contenu du li contenant le une balise est un investissementjQuery("li:has(a)") .text();

3． Sélecteur de filtre de visibilité
Le sélecteur de filtre de visibilité est relativement simple. Il contient deux sélecteurs, principalement utilisés pour faire correspondre tous les éléments visibles et invisibles. Ces deux sélecteurs seront présentés en détail ci-dessous.
(1) :sélecteur caché.
(2) :sélecteur visible.

Exemple :

Copier le code Le code est le suivant :

• Visible


• Invisible

//Invisible li Le contenu le résultat est invisible
jQuery("li:hidden").text();
//Le résultat du contenu de li visible est visible
jQuery("li:visible").text() ;

4． Sélecteur de filtre d'attribut
Le sélecteur de filtre d'attribut est utilisé pour faire correspondre les éléments qui contiennent un attribut donné. Bien entendu, il peut également correspondre aux éléments qui ne contiennent pas cet attribut. Le sélecteur de filtre d'attribut contient les 7 sélecteurs suivants.
(1) sélecteur [attribut].
(2) sélecteur [attribute=value], [attribute!=value] (deux types sont inclus ici).
(3) sélecteurs [attribute^=value], [attribute$=value], [attribute*=value] (trois types sont inclus ici).
(4)sélecteur[sélecteur][sélecteur2].
Exemple :

Copier le code Le code est le suivant :

//La valeur du nom est hyipinvest et le résultat est hyip investissement
alert(jQuery("input[name='hyipinvest'] ").val() );
//La valeur dont le nom commence par hyip est hyip investissement
alert(jQuery("input[name^='hyip']").val());
//le nom commence par hyip Le résultat de la valeur finale est investissement hyip
alert(jQuery("input[name$='hyip']").val());
//La valeur du nom contenant oo entraîne une alerte HYIP
( jQuery("input[name*='oo']").val());

5. Le sélecteur de filtre de sous-éléments
html se compose de balises imbriquées couche par couche. Étant donné que certaines balises doivent être traitées séparément, la manière de sélectionner une ou plusieurs balises imbriquées spécifiques devient un problème dans le programme. jQuery fournit des sélecteurs de filtre d'éléments enfants pour résoudre ce problème. Il comprend 4 sélecteurs, le contenu spécifique sera expliqué en détail ci-dessous.
(1) : sélecteur de nième enfant.
(2) : sélecteurs premier-enfant, :dernier-enfant (deux types).
(3) : sélecteur d'enfant unique.
6． Sélecteur de filtre d'attribut d'objet de formulaire
Cette partie est assez simple et ne contient que quatre types de sélecteurs. Ces sélecteurs sont utilisés pour faire correspondre les éléments disponibles ou indisponibles, les éléments sélectionnés, etc. Cette partie du contenu sera expliquée ci-dessous sous forme d’exemples.
(1) : activé, : sélecteur désactivé.
(2) :sélecteur coché.
(3) : sélecteur sélectionné.
Le sélecteur de filtre de formulaire est un sélecteur utilisé pour traiter les formulaires en HTML. Il inclut non seulement les boutons fréquemment utilisés, les champs de texte, les boutons radio, les cases à cocher, etc., mais implique également les images rarement utilisées, masquer le domaine, le téléchargement de fichiers, etc. Ces sélecteurs seront présentés en détail ci-dessous.
(1) : sélecteur d’entrée.
(2):texte, :sélecteur de mot de passe.
(3):radio, :sélecteur de case à cocher.
(4):submit, :image, :reset, :button, :file selector.
(5) :sélecteur caché.

Le sélecteur de requêtes est résumé ici. Celles-ci sont essentiellement rencontrées dans le processus d'apprentissage, et il reste encore quelques parties qui n'ont pas été résumées. Après une période de pratique, je pense que tout le monde sera capable d'utiliser habilement le sélecteur jQuery.