Résumé de l'apprentissage jQuery jQuery events_jquery

Tout d’abord, regardons un exemple utile pour approfondir nos connaissances antérieures, dont certaines sont apparues précédemment.

Copier le code Le code est le suivant :

jQuery(document).ready(function() {
  jQuery("#btnHide").click(function() {
    jQuery("#imgGoogle").hide("1000");
  });
});

Lorsque vous cliquez sur Masquer l'image, l'image du logo Google sera masquée en une seconde. Ici, nous utilisons la méthode hide(). Bien sûr, nous n'avons pas besoin de spécifier l'heure. Si nous voulons afficher des images, nous devrions utiliser la méthode show().

Commençons maintenant par le contenu principal de cet article : les événements. Vous avez peut-être remarqué que les événements ont été utilisés à de nombreux endroits ci-dessus. Parmi eux, document.ready est un événement lorsque le document est prêt, il indique à jQuery que l'événement peut être exécuté. Le mouvement de la souris, le clic, la sortie du focus de la zone de texte, etc. sont tous des événements.

Par le passé, on voyait souvent :

Copier le code Le code est le suivant :

À Pékin

Cette façon d'écrire. Désormais, tout le monde devrait abandonner cette façon d’écrire. Réalisez la séparation du code js et du html, afin que la page soit plus propre et plus efficace. La méthode d'écriture actuelle deviendra :

jQuery("#divRent").click(function() {
  alert("租房贵");
});

Comme il s'agit d'un résumé, j'utiliserai des exemples pour enregistrer autant de méthodes événementielles que possible comme les trois premiers articles, afin que chacun puisse s'y référer en cas de besoin.

Voici ce que j'ai rencontré au cours de mes études :

1. événement one(), lie un événement à exécuter une fois

Copier le code Le code est le suivant :

Les gens sont à Pékin

Copier le code Le code est le suivant :

jQuery("#divRent").one("clic", function() {
alert("la location coûte cher");
});

Ce qui précède est lié à un événement de clic, et aucune invite ne s'affichera lorsque vous cliquerez pour la deuxième fois.

2. Événements focus() et blur()

Copier le code Le code est le suivant :

Copier le code Le code est le suivant :

jQuery("#tTest").focus(function() {
jQuery(this).css("background", "jaune");
}).blur(function() {
jQuery(this).css("background", "white");
});

Cet exemple utilise la méthode d'écriture en chaîne, je pense que ce n'est pas difficile à comprendre. Si vous n'êtes pas familier avec les styles CSS d'exploitation de jQuery, vous pouvez lire le deuxième résumé. Dans cet exemple, lorsque le focus est sur la zone de texte, la couleur d'arrière-plan passe au jaune, puis redevient blanche lorsqu'elle quitte la zone de texte. Le but de ceci est d’améliorer l’expérience utilisateur, je pense personnellement.

3. événements keydown() et keyup()

Copier le code Le code est le suivant :

Copier le code Le code est le suivant :

jQuery("#tTest").keyup(function() {
jQuery("#lResult").html(jQuery(this).val());
});

Lorsque la clé apparaît (c'est difficile à exprimer ici ^_^), le contenu de la zone de texte sera affiché dans l'étiquette. Pour la partie sur les attributs des éléments de commande, vous pouvez lire le troisième résumé.

4. événement submit()

Copier le code Le code est le suivant :

Copier le code Le code est le suivant : jQuery("#form1").submit(function() {

If (jQuery.trim(jQuery("#text").val()).length == 0) {

         return false ;
}
});



Comme vous pouvez le voir, cet exemple utilise des contrôles serveur. C'est essentiellement la même chose, en fin de compte, une soumission de formulaire se produit. Lorsque vous cliquez sur le bouton, le formulaire est soumis. Si le contenu de la zone de texte est vide, renvoyez false et ne soumettez pas sinon, soumettez ; De telles applications peuvent être vues partout dans le développement Web.

5. événement hover()

Copier le code Le code est le suivant :

survolez-moi

Copier le code Le code est le suivant : jQuery("#divHover").hover(function() {

jQuery(this).css("background", "jaune");

}, fonction() {
jQuery(this).css("background", "red");
});



Lorsque la souris se déplace sur le div, la couleur d'arrière-plan du div devient jaune, et lorsque la souris se déplace, la couleur d'arrière-plan devient rouge.

Les événements ci-dessus sont relativement courants et couramment utilisés. Bien entendu, cet article n'en résume qu'une petite partie. Si vous rencontrez des problèmes lors de l'apprentissage, vous devez utiliser la documentation jQuery pour la consulter.