Zusammenfassung der Ereignisse und DOM-Animationsvorgänge in JQuery

Ereignisse in JQuery

1. DOM laden

Nachdem die Seite geladen wurde, übergibt der Browser JavaScript Ereignisse zu DOM-Elementen hinzufügen. Im regulären JavaScript-Code wird normalerweise die Methode window.onload verwendet, und in JQuery wird die Methode $(document).ready() verwendet. Die vereinfachte Schreibmethode „$()“ in JQuery. Wenn Sie ein Ereignis in window.onload registrieren, kann es nur in einem window.onload-Körper registriert werden. Aber mit JQuery können Sie sich in mehreren $(document).ready() oder $() registrieren.

2. Ereignisbindung

Binden Sie das passende Element an das angegebene Ereignis. Gestern haben wir beispielsweise das Ereignis in window.onload gebunden: "$("p").onclick(function(){

warning( $(this).text() );

});"
Sie können es so in JQuerys $(document).ready() binden:
"$("p").click(function(){

warning( $(this).text() );

});"
Mit bind() können Sie wie folgt binden:
$("p") . bind("click", function(){

alarm( $(this).text() );

});

3. Synthetische Ereignisse

hover(): Simulieren Sie die Cursor-Höhezeit. Wenn sich der Cursor über das Element bewegt, wird die erste angegebene Funktion ausgelöst, und wenn sich der Cursor aus dem Element herausbewegt, wird die angegebene zweite Funktion ausgelöst. Zum Beispiel Hover-Effekt:
$("td").hover(
function () {$(this).addClass("hover");},
function () {$(this) .removeClass("hover");}
);

toggle(): wird verwendet, um kontinuierliche Mausklickereignisse zu simulieren. Wenn Sie zum ersten Mal auf ein Element klicken, wird die erste angegebene Funktion ausgelöst. Wenn Sie erneut auf dasselbe Element klicken, wird die angegebene zweite Funktion ausgelöst. Wenn es weitere Funktionen gibt, werden diese nacheinander bis zur letzten ausgelöst. Legen Sie beispielsweise die Auswahl- und nicht ausgewählten Effekte eines Elements fest:

$("td").toggle(
function () {$(this).addClass("selected");},
function () {$(this).removeClass("selected");}
);

Verwenden Sie toggle() ohne Parameterübergabe, der Effekt ist um den Sichtbarkeitsstatus von Elementen zu wechseln.

4. Das Sprudeln von Ereignissen

Ereignisse werden gemäß der DOM-Hierarchie weiterhin wie Blasen aufsteigen und nur die Spitze erreichen.

Lösung: Die Rückgabe von false in der Funktion Ereignisverarbeitung verhindert, dass das Ereignis sprudelt. Sie können auch das Standardverhalten des Elements stoppen.

Alle aktuellen UI-Interaktionen oder deren Ereignisse unterstützen diese Funktion. Wenn Sie in Ihrer eigenen Ereignisverarbeitungsfunktion „false“ zurückgeben, wird die Weitergabe des Ereignisses abgebrochen. Geben Sie wahre Ereignisse zurück und gehen Sie weiter nach unten.

5. Eigenschaften des Ereignisobjekts

Ereignisobjekt: Wenn ein Ereignis ausgelöst wird, wird das Ereignisobjekt erstellt. Für die Verwendung von Ereignissen in Ihrem Programm ist lediglich das Hinzufügen eines Parameters zur Handlerfunktion erforderlich. Verwenden Sie einige Parameter in der Event-Handler-Funktion. Um beispielsweise die Position relativ zur Seite zu erhalten, wenn ein Ereignis auftritt: event.pageX, event.pageY, event ist der Parameter der Ereignisverarbeitungsfunktion .

6.Ereignisse entfernen

Alle Klickereignisse auf einer Schaltfläche entfernen: $("btn").unbind("click")

Alle Ereignisse auf einer Schaltfläche entfernen: $("btn").unbind();

one(): Diese Methode kann eine Handlerfunktion an das Element binden. Beim einmaligen Auslösen der Handler-Funktion wird das Ereignis sofort gelöscht. Das heißt, für jedes Objekt wird die Event-Handler-Funktion nur einmal ausgeführt.

DOM-Animation in JQuery

Durch Festlegen der Anzeige- und Ausblendmethoden von DOM-Objekten können Animationseffekte erzeugt werden.

1. Ausblenden und Anzeigen ohne Animationseffekt

hide(): In einem HTML-Dokument ändert der Aufruf der hide()-Methode für ein Element die Anzeige des Element. Ändern Sie den Stil in „Keine“. Die Codefunktion ist die gleiche wie css("display", "none");.

show(): Ändern Sie den Anzeigestil des Elements in den vorherigen Anzeigestatus.

toggle(): Schalten Sie den sichtbaren Status des Elements um: Wenn das Element sichtbar ist, wechseln Sie zu „versteckt“; wenn das Element ausgeblendet ist, wechseln Sie zu „sichtbar“.

2. Durch Einstellen des Ausblendens und Anzeigens des Transparenzeffekts wird der Ein- und Ausblend-Animationseffekt erreicht

fadeIn(), fadeOut() : Nur die Transparenz des Elements ändern. fadeOut() reduziert die Deckkraft eines Elements für einen bestimmten Zeitraum, bis das Element vollständig verschwindet. fadeIn() macht das Gegenteil. Blenden Sie den Absatz beispielsweise langsam für 600 Millisekunden ein: $("p").fadeIn("slow");.

fadeTo(): ​​Passen Sie die Deckkraft schrittweise auf den angegebenen Wert (zwischen 0 und 1) an. Und löst optional eine Rückruffunktion aus, nachdem die Animation abgeschlossen ist. Verwenden Sie beispielsweise 200 Millisekunden, um die Transparenz des Absatzes schnell auf 0,25 anzupassen. Nach dem Ende der Animation wird ein Meldungsfeld „Animation fertig“ angezeigt: „$(“p“).fadeTo(“fast“, 0,25, function( ){ Alert(" Animation fertig." });".

3. Durch Einstellen des Ausblendens und Anzeigens des Höheneffekts wird der Animationseffekt des Herunterrutschens und Faltens erreicht.

slideDown(), slideUp(): only Ändert die Elementhöhe. Wenn das Anzeigeattribut eines Elements „none“ ist, wird das Element beim Aufruf der slideDown()-Methode von oben nach unten angezeigt. Die slideUp()-Methode ist genau das Gegenteil. Das Element wird von unten nach oben gekürzt und ausgeblendet. Verwenden Sie beispielsweise 600 Millisekunden, um den Absatz langsam nach unten zu schieben: $("p").slideDown("slow");.

slideToggle(): Schaltet die Sichtbarkeit passender Elemente durch Höhenänderungen um. Schieben Sie beispielsweise einen Absatz innerhalb von 200 Millisekunden schnell nach oben oder unten. Nachdem die Animation beendet ist, wird das Meldungsfeld „Animation abgeschlossen“ angezeigt: „$(“p“).slideToggle(“fast“,function(){ warning( „Animation fertig“ ."); });".

Das obige ist der detaillierte Inhalt vonZusammenfassung der Ereignisse und DOM-Animationsvorgänge in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!