suchen

Heim >Web-Frontend >js-Tutorial >Anwendungsbeispiele für Ereignisse und Animationen in JQuery_jquery

Anwendungsbeispiele für Ereignisse und Animationen in JQuery_jquery

WBOY
WBOYOriginal
2016-05-16 16:17:581224Durchsuche

Die Beispiele in diesem Artikel beschreiben die Verwendung von Ereignissen und Animationen in JQuery. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

1.Bind-Ereignis

Code kopieren Der Code lautet wie folgt:

<script><br> $(function () {<br> $("#divid h5.head").bind("click", function () { //Bindeereignis, das drei Parameter enthält, der erste ist das Ereignis, der zweite ist das Ereignis <br> alarm($(this).text());<br> });<br> $("#divid h5.content").css("display", "none"); //Die CSS-Methode dient zum dynamischen Festlegen des Beschriftungsstils<br> });<br> $(function () {<br> $("#btnid").bind("click", function () {<br> if (bool == true) {<br> $("#btnid .content").css("display", "none");<br> bool = false;<br> $(this).val("display");<br> }<br> sonst {<br> $("#btnid .content").css("display", "");<br> bool = true;<br> $(this).val("hidden");<br> }<br> });<br> });<br> $(function () {<br> $("input[type=button]").bind("click", function () { //Inhalt anzeigen und ausblenden<br> var content = $("#divid .content");<br> if (content.is(":visible")) {<br> content.hide();<br> $(this).val("display");<br> }<br> sonst {<br> content.show();<br> $(this).val("hidden");<br> }<br> });<br> });<br> </script>


Rocky?

Lass es regnen. Lasst uns sehen, wie lange es dauert, bis das nasse Herz trocknet.



In der obigen Operation haben wir das Bind-Ereignis neu gelernt, und das Bind-Ereignis hat drei Parameter. Der erste Parameter ist der Name des Ereignisses, wie zum Beispiel: Click, Dbclick, Mouseover usw. Der zweite Parameter sind Daten Übergebenes Ereignis. Der dritte Parameter ist eine Methode, die zur Verarbeitung der gebundenen Ereignisfunktion verwendet wird. Darüber hinaus wird hier auch ein Beispiel für die Animation geschrieben Bevor wir show() und hide() lernen, definieren wir normalerweise wie oben beschrieben eine Variable vom Typ Bool. Dies ist jedoch sehr einfach zu schreiben ist immer noch ziemlich nervig, daher wird es nach dem Erlernen von show() und hide() viel einfacher, das heißt, Sie können es direkt ausblenden und anzeigen. Sie können es vergleichen. Offensichtlich ist die Codeverarbeitung einfach.

2.Ereignisse und Ereignissprudeln umschalten

Code kopieren Der Code lautet wie folgt:
<script><br> $(function () {<br> $("input[type=button]").toggle(function () { //Beide Parameter von toggle sind Ereignisse, die nacheinander aufgerufen werden<br> $(this).css("backgroundColor","red");<br> }, Funktion () {<br> $(this).css("backgroundColor", "gelb");<br> });<br> });<br> $(function () {<br> $("div").each(function () {<br> $(this).bind("mouseup", Funktion (e) {<br> warning(e.pageX); //Die Position der Maus in x-Richtung ausgeben<br> warning(e.pageY); //Die Position der Maus in y-Richtung ausgeben<br> Alert(e.which); // Geben Sie die Maustastenauswahl aus, 1 ist die linke Maustaste, 2 ist die Rolltaste, 3 ist die rechte Maustaste <br> });<br> });<br> });<br> $(function () {<br> $("#txt").keydown(function () {<br> e.preventDefault(); //Tag-Link verhindern<br> Alert(e.keyCode); //Die Tastatur erhält ihren Abfragecode<br> });<br> });<br> $(function () {<br> $("#ouuerdiv").click(function () {<br> alarm($(this).text());<br> });<br> $("#div").click(function () {<br> alarm($(this).text());<br> });<br> $("#innerdiv").click(function () { //Hier schreiben wir das Bubbling-Phänomen eines Ereignisses. Sie können PreventDefault oder RecentDefault<br> verwenden, um das Bubbling zu organisieren. alarm($(this).text());<br> });<br> })<br> </script>


äußeres div
mittleres div
inneres div

Baidu


Umschaltereignis: Simuliert ein Mausklickereignis. Das erste Ereignis wird ausgelöst, wenn sich die Maus über das Element bewegt, und das zweite Ereignis wird ausgelöst, wenn die Maus das Element verlässt. Die beiden Ereignisse werden durch gegenseitiges Umschalten ausgelöst. Darüber hinaus wird Ereignis-Bubbling auch einfach so verstanden: Es können mehrere Ereignisse auf einer Seite vorhanden sein, oder mehrere Elemente können einem Ereignis entsprechen. Angenommen, die Seite enthält wie oben zwei Elemente, ein div-Element ist in einem anderen div-Element verschachtelt und an beide ist ein Klickereignis gebunden. Wenn Sie dann auf das innere div-Element klicken, wird auch das äußere div-Element angezeigt Es sind nur brodelnde Ereignisse. Dabei ist zu beachten, dass sie alle an ein Ereignis gebunden sind. Es ist leicht anzunehmen, dass nur das Klickereignis intern auftritt.

3. Entfernen Sie Ereignisse und fügen Sie nacheinander mehrere Ereignisse hinzu

Code kopieren Der Code lautet wie folgt:
<script><br> $(function () {<br> $("removeall").click(function () { <br> $("#btn").unbind(); //Ereignis entfernen<br> });<br> $("#btn").bind("click", function () { //Sie können mehrere Ereignisse fortlaufend hinzufügen<br> $("#text").append("<p>Ich bin das erste hinzugefügte Ereignis</p>")<br> })<br> .bind("click", function() {<br> $("#text").append("<p>Ich bin das zweite hinzugefügte Ereignis</p>")<br> })<br> .bind("click", function() {<br> $("#text").append("<p>Ich bin das dritte hinzugefügte Ereignis</p>")<br> })<br> });<br> </script>


div-Textinformationen


Oben haben wir gelernt, dass das Bindungsereignis das Hinzufügen eines Ereignisses und das Aufheben der Bindung das Entfernen des Ereignisses ist. Wir können es vergleichen, hehe, und beim Hinzufügen mehrerer Ereignisse in einer Reihe handelt es sich tatsächlich um das Hinzufügen eines Ereignisses und die weitere Bindung Ereignisse hinzufügen.

4. Simulationsereignis

Die oben genannten Bindungsereignisse, Klickereignisse usw., die wir untersucht haben, sind im Allgemeinen Ereignisse, die durch Klicken auf eine Schaltfläche ausgelöst werden können. Manchmal ist es jedoch erforderlich, Benutzervorgänge zu simulieren, um den Klickeffekt zu erzielen, z. B. wenn der Benutzer betritt und kauft Wenn das Klickereignis später ausgelöst wird, ohne dass der Benutzer klicken muss, verwenden wir die Methode trigger(), um den Simulationsvorgang abzuschließen.

Einige andere Veranstaltungen

Code kopieren Der Code lautet wie folgt:
<script><br> $(function () {<br> $("#btn").click(function () {<br> //$("#div").hide(2000); //Innerhalb von 2 Sekunden ausblenden<br> //$("#div").show(2000); //<br> innerhalb von 2 Sekunden anzeigen //$("#div").fadeIn(2000); //Erhöhen Sie die Deckkraft des Elements, bis das Element vollständig angezeigt wird <br> //$("#div").fadeOut(2000); //Reduzieren Sie die Deckkraft des Elements, bis das Element vollständig verschwindet<br> $("#btn").toggle(function () { <br> $("div").slideDown(2000); //Ändern Sie die Höhe des Elements und zeigen Sie es von oben nach unten an<br> $(this).val("display") <br> }, Funktion () {<br> $("div").slideUp(2000); //Höhe des Elements ändern, kürzen und von unten nach oben ausblenden<br> $(this).val("hidden")<br> });<br> });<br> //$("#btn").click(function () {<br> // $("div").fadeTo(600,0.2); //Die fadeTo-Methode ist anwendbar, wenn die Transparenz innerhalb von 0,6 s 0,2<br> beträgt //});<br> });<br> </script>

1234



Animationsmethode

6. Anwendung eines mehrzeiligen Textfelds – Höhenänderung

Code kopieren Der Code lautet wie folgt:


input:focus,textarea:focus {
border:1px solid #f00;

}

<script><br> $(function () {<br> var comment = $("#comment");<br> $(".bigger").click(function () {<br> if (comment.height() < 500) {<br /> comment.height($("#comment").height() 100); //Erhöhe die Höhe um 100 basierend auf der ursprünglichen Höhe<br /> }<br /> });<br /> $(".smaller").click(function () { <br /> if (comment.height() > 100) {<br> comment.height($("#comment").height() - 100); //Reduzieren Sie die ursprüngliche Höhe um 100<br> }<br> }); <br> })<br> </script>


HeranzoomenHerauszoomen

">