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 :

c2927140466346f8989b95bca6593c33
ef8aed2b5bc51bd94fa7dc3bb001b55b

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 :

f83d065ad3616e9d8b1f5dd39c711b1bÀ Pékin16b28748ea4df4d9c2150843fecfba68

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 :

220dad31e9953ce1caefcfa84705a250Les gens sont à Pékin16b28748ea4df4d9c2150843fecfba68

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 :

d98f0c487087b05cd3d419ae72cd7696

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 :

4b2764a3c367b627d6153bdf397b9c24 98f415770703c711e9c2bd3c6f6867da8c1ecd4bb896b2264e0711597d40766c

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 :

21450525e974e9be578136fc32da3f7c
62f0ac3036fae60b21fe31e7455aad16 976559bbc6f1fbf8c3657ed3cc58e825 8cbf8d6b3cb20b76ee52f5dd37600be4 559e5777f286a62b334df027bce5023f

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 : 7f0eda05e93e41d7a8baaa89a79f95f9survolez-moi16b28748ea4df4d9c2150843fecfba68

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.