Pourquoi avons-nous besoin et comment enregistrer JQuery-sélecteur?

web designer moderne doit non seulement maîtriser les bases du HTML, CSS et JavaScript, mais aussi être en mesure de travailler dans la bibliothèque JQuery, qui se concentre sur l'interaction de JavaScript avec des documents HTML. Cela permet un accès rapide à tout élément (interface de programmation d'application qui permet d'accéder aux fichiers html contenu) DOM et les manipuler. Les principales unités structurales de la bibliothèque sont l'équipe. Pour appliquer l'une ou l'autre équipe, vous avez besoin d'un JQuery-sélecteur.

sélecteurs de formule dans la bibliothèque JQuery

Les sélecteurs JQuery basées sur l'utilisation en CSS. Ils sont tenus de sélectionner des éléments HTML fichier, de les utiliser pour provoquer ces ou d'autres méthodes de les manipuler (l'équipe). La recherche est effectuée via le sélecteur fonction $ (). Par exemple, $ ( 'div').

Les sélecteurs peuvent être classés en fonction de la façon dont la sélection d'éléments:

• de base;
• par attribut;
• la hiérarchie;
• contenu;
• sur la situation;
• choix de champs de formulaire;
• autres.

sélecteurs clés

Dans 90% des cas lors de l'utilisation de cette bibliothèque est utilisé JQuery-sélecteur appartenant au groupe principal. Tous sont assez simples et claires. Considérons chacun d'eux:

• * – sélectionne tous les éléments de la page, y compris la tête, le corps, etc;.
• p / div / barre latérale / … – sélectionne l'ensemble des éléments se rapportant à la balise prédéterminée (c.-à p.div, barre latérale, etc …);
• .myClass / p.myClass – sélectionne les éléments avec le nom de la classe déterminée;
• # MyID / p # myID -. Sélectionne tout un élément avec l'ID donné.

Voici un exemple. Disons que nous devons sélectionner tous les éléments sur la page avec l'entrée de la classe nominale sera comme suit: (. Par) de $. Si nécessaire que p éléments de cette classe, puis écrivent: $ (p.par).

attribuer sélecteurs

Vous pouvez utiliser le sélecteur principal JQuery, si nous devons sélectionner un élément appartenant à une classe ayant ID ou sélectionnez tous les éléments sur la page. Cependant, il y a des cas où un élément n'a pas de classe ou ID. Il est pour cela et il y a des sélections par attribut. Ils vous permettent de faire une sélection sur certains attributs des éléments HTML, tels que href ou src. Cet attribut est écrit entre crochets [].

L'exemple le plus simple: $ ([src]) – sélectionne tous les éléments qui ont l'attribut src. Il est possible de réduire l'échantillon en spécifiant certaine valeur d'attribut: $ ([src = 'http: // site / article / 132222 / valeur']).

Vous pouvez utiliser des sélecteurs JQuery si vous voulez réduire le champ de choix. Par exemple, $ (p [color = blue] [size = 12]) – sont sélectionnés que les éléments p, qui ont une couleur bleue et la taille 12.

contenu Selectors

Dans ce cas, si vous ne pouvez pas sélectionner des éléments en fonction des attributs ou des sélecteurs de base, vous devez vous référer à leur contenu. Au total, il y a 4 sélecteur de ce type:

• : Contient – sélectionne les éléments contenant le texte spécifié;
• : A – sélectionne des éléments qui contiennent d'autres éléments caractéristiques de la ligne;
• : Parent – sélectionne des éléments qui contiennent l'un l'autre;
• : Vide – sélectionne des éléments qui ne contiennent pas d'autre.

Voici un exemple. Pour sélectionner tous les éléments div, contenant le texte du Bonjour, vous devez écrire $ (div: contient ( « Bonjour »)).

hiérarchie Selectors

Il y a une autre façon de sélectionner des éléments dans JQuery, à savoir – en fonction de leur hiérarchie (qui est, le rapport de l'autre sur la page HTML). Beaucoup d'entre eux, donc nous présentons deux des plus populaires, « enfant » et « descendant ».

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

Le second cas – un plus général. Il peut être sélectionné et descendants indirects de l'élément. Par exemple, pour sélectionner les liens dans la liste nav prescrivent: $ (ul # nav a).

Ainsi, dans les éléments JQuery peuvent être sélectionnés de diverses manières en utilisant des paramètres comme une classe, ID, les attributs, le contenu ou la hiérarchie des éléments HTML-documents.