Syntaxe jQuery | Expliqué
Cet article expliquera en détail la syntaxe de jQuery à l'aide d'exemples appropriés. Alors, commençons!
Syntaxe jQuery | Expliqué
Dans jQuery, la première chose que vous devez faire est de sélectionner les éléments HTML sur lesquels vous souhaitez effectuer une action. La syntaxe de base de jQuery est la suivante:
$ (sélecteur).action();
Dans la syntaxe JQuery donnée ci-dessus, vous devez ajouter un "$»Signe pour accéder ou définir JQuery; puis un "sélecteur"Est ajouté entre les parenthèses, représentant la requête pour trouver les éléments HTML. Dernièrement, "action()»Est l'opération qui sera effectuée sur les éléments HTML sélectionnés.
Voyons maintenant les types de sélecteurs que vous pouvez ajouter dans la syntaxe jQuery.
Types de sélecteurs dans la syntaxe jQuery
Les sélecteurs JQuery sont considérés comme une partie essentielle de la bibliothèque jQuery. Pour utiliser toutes les méthodes jQuery, vous devez créer un objet jQuery en sélectionnant un élément HTML spécifique.
Différents types de sélecteurs existent en jQuery, comme Sélecteur de nom d'élément, Sélecteur d'élément #ID, et Élément .sélecteur de classe. Par exemple, pour sélectionner tous les paragraphes "p»Éléments, nous utiliserons le sélecteur de nom d'élément de la manière suivante:
$ ("p").cacher()
Vous pouvez également attribuer un ID à un élément HTML, puis effectuer la même opération sur lui en utilisant l'élément #id Selector:
$ ("# btnclick").cacher()
Avec l'aide de l'élément .Sélecteur de classe, vous pouvez sélectionner différents éléments HTML simultanément qui appartiennent à la même classe:
$ (".nom du cours").cacher()
Note: Pour sélectionner des éléments HTML à l'aide d'ID, ajoutez le caractère de hachage "#,"Suivi de l'ID d'élément et pour trouver des éléments en utilisant leur nom de classe, ajoutez un".”Caractère de période suivi du nom de classe.
Événement de document prêt dans la syntaxe jQuery
Avant de travailler avec un «document"Dans jQuery, assurez-vous qu'il est entièrement chargé et est prêt à l'emploi. Le "prêt()«Événement du«document»L'élément peut être utilisé à cet effet:
$ (document).ready (function ()
// Écrivez des méthodes jQuery dans le corps
);
La méthode ci-dessus empêchera l'exécution de jQuery lorsque le «document"L'élément n'est pas prêt. Cependant, si vous essayez de masquer un élément HTML qui n'est pas encore créé, alors l'action spécifiée échouera dans ce cas. Alors, assurez-vous que le «document"Est prêt avant d'exécuter le code jQuery.
Voici une méthode plus courte pour rédiger l'événement Prêt Document:
$ (function ()
// Écrivez des méthodes jQuery dans le corps
);
Exemple: Utilisation de la syntaxe jQuery pour cacher un élément HTML
Cet exemple vous montrera l'utilisation de la syntaxe jQuery pour cacher un élément HTML à l'aide du sélecteur de nom d'élément. Premièrement, dans notre «indice.html«Fichier, nous ajouterons une rubrique avec le«h2”Tag, un paragraphe utilisant le««Tag, et un«Cliquez sur moi!" bouton:
Trouver des éléments HTML à jQuery
Ceci est le paragraphe principal avec un exemple de texte
Vous pouvez utiliser n'importe quel bac à sable codant en ligne ou votre éditeur de code préféré pour exécuter le programme; Cependant, nous utiliserons le code Visual Studio:
Ensuite, vous dirigez vers votre fichier JavaScript, qui est "mon projet.js«Dans notre cas et écrivez le code suivant:
$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
$ ("h2").cacher();
);
);
Le code fourni spécifiait que jQuery "$ (document).prêt()«La méthode masquera l'élément HTML avec le«h2”Nom de l'élément lorsque l'utilisateur clique sur le bouton:
Après avoir enregistré les deux fichiers, nous ouvrirons "indice.html"En utilisant VS Code"Serveur de foie" extension:
Maintenant, nous cliquerons sur le bouton mis en surbrillance dans l'image ci-dessous:
Comme vous pouvez le voir, nous avons réussi à cacher le «h2”Élément HTML en suivant la syntaxe jQuery:
C'était tout au sujet de la syntaxe de base de jQuery. Vous pouvez l'explorer davantage en fonction de vos préférences.
Conclusion
Le $ (sélecteur).Action () est la syntaxe jQuery de base qui peut être utilisée pour sélectionner des éléments HTML et leur application une action spécifique. Une fois que vous avez écrit le code requis en suivant la syntaxe jQuery, vous pouvez utiliser le $ (document).Méthode ready (function () ) pour exécuter le programme. Cet article a discuté de la syntaxe jQuery, des types de sélecteurs jQuery et des fonctionnalités de $ (document).Prêt (fonction () ) Méthode en détail.