Les exemples de cet article décrivent l'utilisation des événements et des animations dans JQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :
1.événement de liaison
Dans l'opération ci-dessus, nous avons récemment appris l'événement bind, et l'événement bind a trois paramètres. Le premier paramètre est le nom de l'événement, tel que : click, dbclick, mouseover, etc. Le deuxième paramètre est data, qui est le. événement transmis. Objet, le troisième paramètre est une méthode utilisée pour traiter la fonction d'événement liée. Il s'agit d'un de nos événements spéciaux. De plus, un exemple d'animation est également écrit ici, c'est-à-dire l'affichage ou le masquage. d'informations textuelles. Avant d'apprendre show() et hide(), nous écrivons généralement de la première manière ci-dessus. Il suffit de définir une variable de type booléen, mais lors de l'écriture du bouton de traitement du temps show-hide, ce qui précède. est encore assez ennuyeux, donc après avoir appris show() et hide(), cela devient beaucoup plus simple, c'est-à-dire que vous pouvez le masquer et l'afficher directement. Vous pouvez le comparer. Évidemment, le traitement du code est simple.
2.basculer les événements et le bouillonnement d'événements
Événement Toggle : simule un événement de clic de souris. Le premier événement est déclenché lorsque la souris se déplace sur l'élément, et le deuxième événement est déclenché lorsque la souris quitte l'élément. Les deux événements sont déclenchés par la commutation entre eux ; de plus, le bouillonnement d'événements est en fait simplement compris comme : il peut y avoir plusieurs événements sur une page, ou plusieurs éléments peuvent correspondre à un événement. Supposons qu'il y ait deux éléments dans la page comme ci-dessus, un élément div est imbriqué dans un autre élément div et les deux ont un événement de clic qui leur est lié. Ensuite, lorsque vous cliquez sur l'élément div interne, le div externe sera également affiché. Ce sont juste des événements qui bouillonnent. Ce qu'il faut noter ici, c'est qu'ils sont tous liés à un événement. Il est facile de tenir pour acquis que seul l'événement click se produit en interne.
3. Supprimez des événements et ajoutez plusieurs événements successivement
<script><br>
$(fonction () {<br>
$("removeall").click(function () { <br>
$("#btn").unbind(); //Supprimer l'événement<br>
});<br>
$("#btn").bind("click", function () { //Vous pouvez ajouter plusieurs événements en continu<br>
$("#text").append("<p>Je suis le premier événement ajouté</p>")<br>
})<br>
.bind("clic", function() {<br>
$("#text").append("<p>Je suis le deuxième événement ajouté</p>")<br>
})<br>
.bind("clic", function() {<br>
$("#text").append("<p>Je suis le troisième événement ajouté</p>")<br>
})<br>
});<br>
</script>
informations textuelles div
Ci-dessus, nous avons appris que l'événement de liaison consiste à ajouter un événement et que la dissociation consiste à supprimer l'événement. Nous pouvons le comparer, hehe, et pour ajouter plusieurs événements à la suite, c'est en fait lorsque vous ajoutez un événement et continuez à vous lier. ajouter des événements.
4. Événement de simulation
Les événements de liaison, les événements de clic, etc. ci-dessus que nous avons étudiés sont généralement des événements qui peuvent être déclenchés en cliquant sur un bouton. Cependant, il est parfois nécessaire de simuler les opérations de l'utilisateur pour obtenir l'effet de clic, par exemple : lorsque l'utilisateur. entre et achète Si l'événement de clic est déclenché plus tard sans que l'utilisateur ait à cliquer, alors nous utilisons la méthode trigger() pour terminer l'opération de simulation.
5. Quelques autres événements
<script><br>
$(fonction () {<br>
$("#btn").click(function () {<br>
//$("#div").hide(2000); //Masquer dans les 2 secondes<br>
//$("#div").show(2000); //Afficher <br> dans les 2 secondes
//$("#div").fadeIn(2000); //Augmente l'opacité de l'élément jusqu'à ce que l'élément soit entièrement affiché <br>
//$("#div").fadeOut(2000); //Réduire l'opacité de l'élément jusqu'à ce que l'élément disparaisse complètement<br>
$("#btn").toggle(function () { <br>
$("div").slideDown(2000); //Changer la hauteur de l'élément et l'afficher de haut en bas<br>
$(this).val("affichage") <br>
}, fonction () {<br>
$("div").slideUp(2000); //Changer la hauteur de l'élément, le raccourcir et le masquer de bas en haut<br>
$(this).val("caché")<br>
});<br>
});<br>
//$("#btn").click(function () {<br>
// $("div").fadeTo(600,0.2); //La méthode fadeTo est applicable lorsque la transparence est de 0,2<br> en 0,6 s
//});<br>
});<br>
</script>
Méthode d'animation
6. Application de la zone de texte multiligne - changement de hauteur
Copier le code Le code est le suivant :
<script><br>
$(fonction () {<br>
var commentaire = $("#comment");<br>
$(".plus grand").click(function () {<br>
if (comment.height() < 500) {<br />
comment.height($("#comment").height() 100); //Augmente la hauteur de 100 en fonction de la hauteur d'origine<br />
><br />
});<br />
$(".plus petit").click(function () { <br />
if (comment.height() > 100) {<br>
comment.height($("#comment").height() - 100); //Réduire la hauteur d'origine de 100<br>
><br>
}); <br>
})<br>
</script>
