Maison >
interface Web >
js tutoriel >
Encyclopédie du sélecteur jquery explication complète et détaillée de jquery selector_jquery
Encyclopédie du sélecteur jquery explication complète et détaillée de jquery selector_jquery
WBOY
Libérer： 2016-05-16 16:56:39
original
1381 Les gens l'ont consulté
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.
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.
//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 :
//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.
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.
//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 :
//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.
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
Qu'est-ce qui est mis en évidence dans jquery
La raison pour laquelle la fonction d'en-tête renvoie un échec 404
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
