Événements jQuery | Expliqué
JQuery est conçu pour gérer également les événements sur la page Web, les événements (si vous n'êtes pas déjà familier) sont des actions d'utilisateurs qui font réagir une page Web. Pour mieux expliquer les événements, nous pouvons dire que toute action à laquelle une page Web peut répondre est connue comme un événement de page Web par exemple souris, cliquez, chargement de documents.
Événements jQuery | Syntaxe et méthodes d'événements
La syntaxe des événements jQuery est d'utiliser un dot-opérateur Après la fonction d'usine $ () qui contient les sélecteurs.
$ ("p").Cliquez sur();
Avec la ligne ci-dessus, un écouteur d'événements est créé, l'étape suivante consiste à définir quoi faire lorsque cet événement spécifique s'exécute. Pour ce faire, définissez la fonction à l'intérieur de la parenthèse de l'événement tel que:
$ ("p").cliquez sur (fonction ()
// corps de la fonction
);
Événements jQuery | Exemples
Pour démontrer le fonctionnement des événements JQuery et des gestionnaires d'événements, nous allons configurer une page Web HTML avec JQuery hébergé par Google CDN inclus dans sa balise de script:
La page Web HTML contient ces lignes pour configurer notre page Web de test:
Je change de couleur sur charge
Bonjour! Je suis Linuxbot
Double-cliquez sur moi!
Cliquez pour me cacher!
Si vous exécutez le fichier HTML, vous obtiendrez le résultat suivant sur le navigateur:
Le premier événement que nous allons passer en revue est le document sur le protège-pied événement. Cet événement est automatiquement exécuté lorsque le DOM vérifie que la page Web a été complètement chargée et n'attend aucune autre action ou réponse. Donc, nous allons changer l'arrière-plan du Tag lors du chargement du document, avec les lignes de code suivantes:
$ (document).ready (function ()
$ ("H1").CSS ("Background", "Red");
);
Vous obtiendrez la sortie suivante:
Comme vous pouvez le voir, nous avons pu changer la couleur d'arrière-plan du H1 avec des événements jQuery.
Le Suivant mêmeT va être le Appuyez sur le bouton, Nous allons inviter l'utilisateur à son nom sur bouton Appuyer sur le bouton. Utilisez le code:
$ ("bouton").cliquez sur (fonction ()
var xyz = invite ("Entrez votre nom complet");
);
Vous obtenez la sortie suivante en appuyant sur le bouton:
Comme vous pouvez le voir, en cliquant sur le bouton qui dit «cliquez sur moi!», Une boîte de dialogue rapide a été affichée pour demander le nom complet de l'utilisateur.
Les événements de clic de souris sont assez courants, mais quelque chose qui est largement utilisé est l'événement à double clic. Pour démontrer cela, nous allons afficher un message à l'écran comme une alerte lorsque l'utilisateur double sur le paragraphe avec l'ID "dblclick”Avec les lignes de code suivantes:
$ ("# dblclick").dblclick (function ()
alerte ("Passez une bonne journée!");
)
Avec les lignes ci-dessus, la sortie est comme
En double-cliquez sur le texte, une nouvelle boîte de dialogue d'alerte a été montrée à l'utilisateur avec une salutation.
Nous pouvons même utiliser le «ce"Référence lorsque vous travaillez avec des événements jQuery, pour démontrer que nous allons cacher le texte avec l'ID"cacher"En clic. Nous le faisons en utilisant les lignes de code suivantes:
$ ("# hide").cliquez sur (fonction ()
$ (ceci).cacher();
);
Vous obtenez la sortie suivante en cliquant sur le texte qui dit "Cliquez pour me cacher!»:
Le texte a été caché en cliquant dessus une fois.
Conclusion
La bibliothèque JQuery fournit la fonctionnalité pour gérer et réagir aux événements de la page Web, c'est la raison pour laquelle jQuery est appelé «Adapté”Pour la gestion des événements. Des événements jQuery sont ajoutés à la fonction de sélecteur jQuery ($ ()) En utilisant un opérateur de points, cela crée un écouteur d'événements sur cet élément qui écoute un événement particulier. Pour effectuer une action basée sur cet événement, vous devez créer une fonction qui indique à la page Web quoi faire pour cet événement spécifique. Cette fonction est généralement écrite dans la parenthèse de l'écouteur d'événements.