Maison > Article > interface Web > Exemples d'utilisation d'événements et d'animations dans JQuery_jquery
Exemples d'utilisation d'événements et d'animations dans JQuery_jquery
- WBOYoriginal
- 2016-05-16 16:17:581172parcourir
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
Copier le code Le code est le suivant :
<script><br> $(fonction () {<br> $("#divid h5.head").bind("click", function () { //bind événement, qui contient trois paramètres, le premier est l'événement, le second est l'événement <br> alert($(this).text());<br> });<br> $("#divid h5.content").css("display", "none"); //La méthode CSS consiste à définir dynamiquement le style d'étiquette<br> });<br> $(fonction () {<br> $("#btnid").bind("clic", function () {<br> if (bool == vrai) {<br> $("#btnid .content").css("display", "none");<br> bool = faux;<br> $(this).val("affichage");<br> ><br> sinon {<br> $("#btnid .content").css("display", "");<br> bool = vrai ;<br> $(this).val("caché");<br> ><br> });<br> });<br> $(fonction () {<br> $("input[type=button]").bind("click", function () { //Afficher et masquer le contenu<br> var content = $("#divid .content");<br> if (content.is(":visible")) {<br> content.hide();<br> $(this).val("affichage");<br> ><br> sinon {<br> content.show();<br> $(this).val("caché");<br> ><br> });<br> });<br> </script>
Rocky?
Laissez pleuvoir. Pas besoin d'apporter un parapluie. Que tout soit fini. Voyons combien de temps il faudra pour que le cœur mouillé sèche
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
Copier le code Le code est le suivant :
<script><br>
$(fonction () {<br>
$("input[type=button]").toggle(function () { //Les deux paramètres de toggle sont des événements, qui sont appelés à tour de rôle<br>
$(this).css("backgroundColor","red");<br>
}, fonction () {<br>
$(this).css("backgroundColor", "jaune");<br>
});<br>
});<br>
$(fonction () {<br>
$("div").each(function () {<br>
$(this).bind("mouseup", fonction (e) {<br>
alert(e.pageX); //Affiche la position dans la direction x de la souris<br>
alert(e.pageY); //Affiche la position de la souris dans la direction y<br>
alert(e.which); // Affiche la sélection du bouton de la souris, 1 est le bouton gauche de la souris, 2 est le bouton rotatif, 3 est le bouton droit de la souris <br>
});<br>
});<br>
});<br>
$(fonction () {<br>
$("#txt").keydown(function () {<br>
e.preventDefault(); //Empêcher un lien de balise<br>
alert(e.keyCode); //Le clavier obtient son code demandé<br>
});<br>
});<br>
$(fonction () {<br>
$("#ouuerdiv").click(function() {<br>
alert($(this).text());<br>
});<br>
$("#div").click(function () {<br>
alert($(this).text());<br>
});<br>
$("#innerdiv").click(function () { //Nous écrivons ici le phénomène de bouillonnement d'un événement. Vous pouvez utiliser PreventDefault ou recentDefault<br> pour organiser le bouillonnement.
alert($(this).text());<br>
});<br>
})<br>
</script>
Baidu
Baidu
É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
Copier le code Le code est le suivant :
<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
Copier le code Le code est le suivant :
<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'animation6. 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>
<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>