Qu'est-ce qui est nécessaire et comment le sélecteur jQuery est-il écrit?

Un concepteur de sites Web moderne ne devrait pas seulement posséderles bases de HTML, CSS et JavaScript, mais aussi être capable de travailler dans une bibliothèque jQuery qui se concentre sur l’interaction de JavaScript avec les documents HTML. Autrement dit, il vous permet d’accéder rapidement à tous les éléments du DOM et de les manipuler (une interface de programme qui ouvre l’accès au contenu des fichiers HTML). Les principales unités structurelles de cette bibliothèque sont des commandes. Pour utiliser telle ou telle commande, vous avez besoin d’un sélecteur jQuery.

Sélecteurs de formules dans la bibliothèque jQuery

Les sélecteurs dans jQuery sont basés sur ceux utilisés dans CSS. Ils sont nécessaires à la sélection des éléments d'un fichier HTML afin de pouvoir utiliser ces méthodes ou d'autres méthodes pour les manipuler (commandes) avec leur aide. La recherche par sélecteur est effectuée à l'aide de la fonction $ (). Par exemple, $ ("div").

Les sélecteurs peuvent être classés en fonction de la méthode de sélection des éléments:

basique;
par attribut;
par hiérarchie;
par contenu;
par position;
sélection des champs de formulaire;
d'autres.

Sélecteurs principaux

Dans 90% des cas, lorsque vous travaillez avec cette bibliothèque, un sélecteur jQuery est utilisé, qui appartient au groupe principal. Tous sont assez simples et simples. Considérez chacun d'eux:

* - sélectionne tous les éléments de la page, y compris la tête, le corps, etc.
p / div / sidebar / ... - sélectionne tous les éléments liés à une balise donnée (c'est-à-dire, p.div, sidebar, etc.);
.myClass / p.myClass - sélectionne les éléments avec le nom de classe spécifié;
# myID / p. # myID - sélectionne un élément avec l'identifiant donné.

Donnons un exemple. Supposons que nous ayons besoin de sélectionner tous les éléments d’une page avec la classe par, l’enregistrement ressemblera à ceci: $ (. Par). Si seulement p éléments de cette classe sont nécessaires, alors écrivez: $ (p.par).

Sélecteurs d'attributs

Le sélecteur principal jQuery peut être utilisé sinous devons sélectionner un élément appartenant à une classe ayant un ID ou sélectionner tous les éléments de la page. Cependant, il existe des cas où l'élément souhaité n'a pas de classe ni d'ID. C'est à quoi servent les sélecteurs d'attributs. Ils vous permettent de sélectionner un attribut de l'élément HTML, par exemple, href ou src. Cet attribut est écrit entre crochets [].

L'exemple le plus simple: $ ([src]) - sélectionne tous les éléments ayant un attribut src. Vous pouvez restreindre la zone de sélection en définissant l'attribut sur une valeur spécifique: $ ([src = "valeur"]).

Vous pouvez en utiliser plusieurs dans jQueryles sélecteurs, si nécessaire, réduisent la zone de sélection. Par exemple, $ (p [couleur = bleu] [taille = 12]) - seuls les éléments de p qui sont bleus et de taille 12 seront sélectionnés.

Sélecteurs de contenu

S'il n'est pas possible de sélectionner des éléments par attributs ou par sélecteurs principaux, il est utile de faire référence à leur contenu. Au total, il y a 4 sélecteurs de ce type:

: contient - sélectionne les éléments contenant le texte spécifié;
: has - sélectionne les éléments contenant d'autres éléments spécifiques à la chaîne donnée;
: parent - sélectionne les éléments qui en contiennent d’autres;
: vide - sélectionne les articles qui n'en contiennent pas d'autres.

Donnons un exemple. Pour sélectionner tous les éléments div contenant le texte Hello, vous devez écrire $ (div: contient ("Hello")).

Sélecteurs hiérarchiques

Il existe un autre moyen de sélectionner des éléments dans jQuery,à savoir, en fonction de leur hiérarchie (c'est-à-dire la relation entre eux sur la page HTML). Il y en a beaucoup, nous présentons donc les deux plus populaires: "l'enfant" et le "descendant".

Dans le premier cas, les éléments qui sontsont des descendants directs (enfant) d'un élément donné (ancêtre). Par exemple, pour sélectionner des éléments de la classe light dans la classe light qui sont des enfants de la liste de navigation, vous devez écrire: $ (ul # nav> li.light).

Le second cas est plus général. Les descendants indirects de certains éléments peuvent également être sélectionnés ici. Par exemple, pour sélectionner des liens dans la liste de navigation, nous écrivons: $ (ul # nav a).

Ainsi, dans jQuery, les éléments peuvent être sélectionnés de différentes manières à l'aide de paramètres tels que la classe, l'ID, les attributs, le contenu ou la hiérarchie des éléments d'un document HTML.