SELECTEURS JQUERY | Expliqué
La sélection des éléments de la page Web HTML peut prendre quelques lignes de code dans le javascript, mais avec jQuery, le code devient concis et semble très lisible. jQuery soutient les sélections de presque tous les sélecteurs défini dans le CS3, ainsi que fournit également des sélecteurs personnalisés intégrés.
Ajout de jQuery à notre page HTML
Pour pouvoir jQuery dans notre projet, nous devons d'abord importer jQuery en mettant un lien vers un fichier jQuery dans la balise de script. La méthode la plus efficace d'importation jQuery consiste à utiliser un jQuery hébergé par Google CDN, dans le fichier html, utilisez les lignes suivantes dans la balise de script:
La fonction d'usine
Les fonctions de sélecteur jQuery sont souvent appelées la fonction d'usine, elle commence par un signe en dollars "$" suivi des supports ronds ou des parenthèses "()". Cette fonction d'usine est utilisée pour faire référence à un élément de la page Web, et vous pouvez ajouter un événement en utilisant un opérateur de points. Par exemple:
$ (document).ready (function ()// à l'intérieur du corps de la fonction
));
sélecteurs jQuery
Les sélecteurs JQuery ou les fonctions d'usine fonctionnent sur trois principaux sélecteurs à savoir: ID de balise, nom de balise, classe de balise.
- Nom de la balise: Ceci est utilisé pour sélectionner le nom de l'élément dans le dôme, par exemple, si vous souhaitez sélectionner tous les Tags H1.
- Classe de balises: Ceci est utilisé pour choisir un élément avec une certaine classe; Par exemple, si vous souhaitez sélectionner un élément avec la classe "Ma classe" vous pouvez utiliser $ ('.Ma classe')
- ID de balise: Ceci est utilisé pour sélectionner un élément avec un ID spécifique; Par exemple, pour choisir un élément avec un ID de «ma pièce d'identité" vous pouvez utiliser $ ('# myid')
Sélection des éléments par nom
Pour présenter l'utilisation de sélecteurs jQuery, nous allons d'abord passer en revue la sélection des éléments en utilisant le nom de la balise. Supposons que vous souhaitiez sélectionner tous les Une balise P Une autre balise P Encore une autre balise P Vous devriez voir la sortie suivante sur la page Web: Pour manipuler le Les balises utilisent le code de script suivant: Avec les lignes ci-dessus, la sortie ressemblera à ceci Nous avons même des sélecteurs de filtre; Supposons que nous voulons seulement sélectionner le dernier $ (document).ready (function () Cela nous donnera la sortie suivante: Comme vous pouvez le voir, nous avons pu sélectionner un étiqueter Sélection des éléments par ID Pour démontrer les sélecteurs d'ID, nous avons les lignes suivantes dans le fichier HTML: Une balise P avec l'identifiant Une autre balise P Encore une autre balise P Comme vous pouvez le voir, le premier La balise a l'ID "Bonjour", Pour manipuler cet élément en utilisant son ID, nous pouvons utiliser le code de script suivant: Comme vous pouvez le voir dans l'image ci-dessus, nous avons pu sélectionner un élément à l'aide de son ID et manipuler sa propriété de style à l'aide de JQuery ID Selector. Sélection d'un élément par classe Pour sélectionner un élément à l'aide de la classe, nous utilisons le point Avant le nom de la classe dans la fonction d'usine, pour pouvoir démontrer l'utilisation du sélecteur de classe jQuery, donnons à l'une des tags p de la classe. Notre code HTML ressemblera à ceci: Une balise P avec l'identifiant Une autre balise P Encore une autre balise P mais avec une classe Pour sélectionner la classe «MyClass» et lui donner un fond de rouge, nous utilisons le code de script suivant: Avec le code ci-dessus, vous verrez la sortie suivante: Comme vous pouvez le voir, nous avons pu manipuler l'élément avec la classe «myclass» en utilisant des sélecteurs de classe jQuery. Conclusion La bibliothèque la plus célèbre de JavaScript JQuery est très utile et gaspillez en temps lorsqu'il s'agit de manipuler des éléments sur une page Web, la seule pré-référence d'utiliser JQuery dans un projet est d'ajouter un lien à la bibliothèque jQuery en utilisant une jQuery hébergée par Google CDN. La jQuery se compose d'une fonction appelée fonction d'usine qui permet aux utilisateurs de sélectionner des éléments de la page Web et de manipuler leurs propriétés. La fonction d'usine '$ (")' Fonctionne sur 3 sélecteurs de base qui sont à savoir, Sélecteur d'identité, Sélecteur de noms et sélecteur de classe.
$ ("p").CSS ("fond", "jaune");
);
$ ("p: dernier").CSS ("fond", "jaune");
);
$ (".Ma classe").CSS ("Background", "Red");
);