JQuery sélecteur de compétences dans l'usage de [à]

JQuery est très puissant moteur de sélection, de fournir un sélecteur de syntaxe, nous avons choisi de permettre à presque tous les éléments du portefeuille. JQuery sélecteur de la syntaxe et CSS3 est principalement basée sur la XPath, et CSS3 comprendre plus utiliser XPath de la plus importante à portée de main lorsque JQuery. CSS et XPath, voir les liens suivants:

Il est à noter que, CSS3 ne reçoit pas tous les navigateurs actuels, de sorte que nous rarement l'utiliser. Cependant, nous pouvons toujours utiliser JQuery choix CSS3 éléments, comme JQuery ont leur propre sélecteur de moteur, et la réalisation de la CSS3 de soutien.

JQuery sélecteur aimerait savoir de plus amples renseignements, visitez le JQuery documentation relative à Selector. Maintenant, l'original des documents officiels sur la base de quelques simples de traduction et de notes.

1. Sélecteur CSS (CSS Selectors)

JQuery plein appui aux CSS 1-3, et il peut être (sélecteur) expression, en ajoutant la coutume comme CSS (et XPath).

JQuery 1.1 soutenue par la syntaxe du sélecteur CSS

* Tout élément
E Type E pour l'ensemble de l'élément (en fait, E peut être n'importe quel élément)
E: n-enfant (s) d'un type de E de l'élément, il est le père n le premier élément de la sous-élément
E: premier enfant un type E de l'élément, il est son père, le premier élément de la sous-élément (l'équivalent de E: NTH-enfant (0))
E: Mise à l'enfant un courrier type de l'élément, il est l'élément de son père, un fils du dernier élément
E: seulement l'enfant d'un e type d'élément, il est le seul fils de son père élément de l'élément
E: pour un vide de type E de l'interface utilisateur (UI) élément, il n'est pas sous-élément (y compris le texte de l'élément)
E: E permis à un type d'interface utilisateur (UI) élément, il est fixé à interdire l'(désactivé)
E: E handicapés type d'interface utilisateur (UI) élément, il est fixé à permettre (activé)
E: vérifié pour un type E de l'interface utilisateur (UI) élément, il est sélectionné (vérifié) État (pour les boutons radio et cases à cocher)
E: sélectionné pour le type E d'une interface utilisateur (UI) élément, il a été un choix (sélection) État (dans la gamme d'options, un ou plusieurs autre élément). Attention: une sélection d'établissements dans le CSS n'est pas la norme, mais la fourniture de soutien interne pour jquery
E.myclass un e type d'élément, il est de la classe "MyClass"
E # myid un e type d'élément, il est l'id du "myid"
E: ne pas (s) d'une Type E de l'élément, et de se concentrer sur les résultats de l'élément ne correspond pas (non inclus) Sélecteur s (utilisé comme un filtre)
EF un F pour le type d'élément, il est le type de l'élément de l'élément E descendants (attention aux enfants et petits-enfants est l'élément)
E> F F pour le type d'élément, il est le type de l'élément de l'E-élément (l'attention est le sous-élément)
E F de type F de l'élément, qui est suivie dans le type d'élément pour le E derrière un élément frère (à noter que F est le frère de l'E-noeud, et suit de près la suivante)
E ~ F un F pour le type d'élément, il est le type d'élément pour le E derrière un élément frère (à noter que F est le frère de l'E-noeud, et l'emplacement à l'arrière de E)

E, F, G de type E de l'élément, un F pour le type de l'élément, un type de G de l'élément (par élément à choix multiples)

JQuery 1.2 de soutien, mais (avec les normes CSS) est différente de la grammaire sélecteur

La différence est la nécessité d'attribuer à ajouter des symboles de l'ancien "@"

E [@ foo '] un type E de l'élément, elle a une propriété "foo"
E [@ foo = bar], un type E de l'élément, elle a une propriété "foo = bar"
E [^ @ foo = bar], un type E de l'élément, elle a une propriété "foo", et de ses valeurs sont la propriété "bar" au début de la
E [@ $ foo = bar], un type E de l'élément, elle a une propriété "foo", et de ses valeurs sont la propriété "bar" à la fin de la
E [*= @ foo bar], un type E de l'élément, elle a une propriété "foo", et la valeur de la propriété qui contient des "bar"
E [@ foo = bar] [@ = baz bop], un type E de l'élément, elle a une propriété "foo = bar" et les attributs "baz = bop"

Note: Les "bar" et "bop" sont des chaînes de caractères.

JQuery 1.3 ne prend pas en charge la syntaxe du sélecteur (un peu)

Parce que sans effet dans la pratique, afin de ne pas entrer dans les détails ici, je voudrais en connaître les détails peut se référer au document officiel pour vous aider.

L'ancrage et de 1,4 Contex

Contex peuvent être mis en place à l'ancre (position) de sélection, qui est JQuery avec un autre standard CSS. Les utilisateurs peuvent utiliser la syntaxe suivante: $ (expr, contexte) pour définir le contexte racine. La racine par défaut contexte de l'ensemble du document.

2. Sélecteur XPath (XPath Selectors)

JQuer a également appuyé la XPath d'un sélecteur de la syntaxe. JQuery soutien de base pour la syntaxe XPath. Par les exemples ci-après à titre d'illustration.

2.1 Situation Path (Situation Chemins)

Chemin absolu, par opposition à l'ensemble du document HTML

  $ ( "/ Html / body / / p") $ ( "corps / / p") $ ( "p / .. / div")

Le chemin d'accès relatif, par opposition à la fixation du nœud de contexte "ce"

  $ ( "P / *", ce) $ ( "/ p / / a", ce)

2.2 Sélecteur de soutien de l'Ax

"/ /": Descendants des éléments (DIV pour tous les types de p enfants et petits-éléments)

  $ ( "/ Div / / p") $("// div / / p ")

"/": Sous-éléments (DIV pour tous les types de p sous-éléments)

  $("// DIV / p ")

"~": Brother éléments (div tous les types de formulaire pour les frères et les éléments)

  $("// Div ~ forme ")

""..": Père d'éléments (div de l'élément parent du type p-éléments)

  $("// DIV / .. / p ")

2.3 Syntaxe de soutien pour le prédicat (prédicats)

[@ Foo] a les attributs "foo"

  $("// D'entrée [@ foo] ")

[@ Foo = 'test'] a les attributs "foo = 'test'"

  $("// A [@ foo = 'tsxt'] ")

[NodeList] correspondent à des éléments de leurs enfants et petits-enfants NodeList (de filtrage)

  $("// Div [p] ") $("// div [p / a]")

JQuery 2.4 de soutien, mais (avec la spécification XPath) est différente de la principale grammaire (prédicats)

[dernier ()] ou [position () = dernière ()] devient: dernier (choix de se concentrer sur les résultats du dernier élément)

  $ ( "P: dernier")

[0] ou [position () = 0] devient: eq (0) ou: d'abord (choix de se concentrer sur les résultats du premier élément)

  $ ( "P: d'abord") $ ( "p: eq (0)")

[position () <5] devient: lt (5) (axée sur les résultats de l'indice de sélectionner plus de 5 éléments)

  $ ( "P: lt (5)")

[position ()> 2] devient: GT (2) (choix de l'indice est inférieur à 2 axée sur les résultats des éléments)

  $ ( "P: GT (2)")

Note: "devient" en face de la syntaxe XPath de prédicats, le dos est l'équivalent de JQuery syntaxe.

3. JQuery sélecteur personnalisé (Custom Selectors)

JQuery a un certain nombre de choix sur mesure la grammaire et la syntaxe de ces idées ne sont pas en CSS et la spécification XPath, mais ils sont assez faciles, qui est venu de les inclure JQuery.

3.1 sélecteur (Custom Selectors)

: Même mettre l'accent sur les résultats de son index pour le même numéro (encore) les éléments
: Étrange se concentrer sur les résultats de son index est un nombre impair (singulier) des éléments
: Eq (N) et: n (N) choisir de se concentrer sur les résultats de l'indice pour les éléments de N
: GT (N) choisir de se concentrer sur les résultats de l'indice que les éléments de N
: LT (N) choisir de se concentrer sur les résultats de l'indice est inférieur à N éléments de la
: Premier choix de se concentrer sur les résultats du premier élément (l'équivalent de eq (0) ou la nième (0))
: Le dernier choix de concentrer les résultats du dernier élément
: Parent choisir de se concentrer sur les résultats des éléments, il doit être sous-éléments (y compris le texte du noeud) (avec: vider le contraire)
: Contient ( 'test') choisir de se concentrer sur les résultats du texte spécifié contient des éléments de la
: Visible choix peut être vu tous (visible) des éléments (les propriétés d'affichage égale à la valeur de visible, de bloquer, en ligne, la visibilité ou égal à la valeur de la propriété visible, pas caché, y compris les types d'éléments (sur le type caché, par exemple: <input type = "hidden" ... >))
: Option cachée pour cacher tous les (visible) des éléments (les propriétés d'affichage égale à la valeur de zéro, ou la visibilité égale à la valeur du bien caché, ne comprend pas le caché types d'éléments (sur le type caché, comme <input type="hidden" …>))

Exemples:

  $ ( "P: d'abord"). Css ( "fontWeight", "gras"); $ ( "div: caché"). Show (); $ ( "/ div: contient ( 'test')", ce). hide ();

3.2 Sélecteur de forme (formulaire Selectors)

: Entrée de choisir la forme de tous les éléments (entrée, de sélectionner, de texte, bouton)
: Texte de sélectionner tous les champ de texte (type = "text").
: Mot de passe pour tous les mot de passe de domaine (type = "password").
: La radio tous les boutons radio pour choisir (type = "radio").
: Case à cocher pour choisir tous les case à cocher (type = "checkbox").
: Bouton envoyer pour le soumettre tous les choix (type = "submit").
: Image de toutes les images à choisir de domaine (type = "image").
: Bouton de réinitialisation pour réinitialiser tous les choix (type = "reset").
: Bouton pour choisir tous les boutons (type = "button").
: Sélectionnez tous les fichiers <input type="file">.

: Caché est également disponible en 3.1 ci-dessus ont mis en place.

Dans la forme proposée le recours à des options afin de fournir un contexte racine, exemples:

  $ ( '# MyForm: input »)

  $ ( 'Input: la radio ", MyForm)

Enfin, la déclaration ci-dessus et son parti permet de sélectionner tous les "Formulaire" sous la forme de bouton radio, qui est équivalent à [@ type = radio] (c'est-$ ( "[type = radio], MyForm")), mais le tableau Single-sélecteur sera un peu plus rapidement, en particulier pour les grands forme.

Plus de 3,3 Selector

JQuery sélecteur peut être étendue à des tiers plug-ins:

Référence:

http://docs.jquery.com/DOM/Traversing/Selectors