Anzeige und Ausblenden der JQuery-Überwachungsseite

Bei der Webentwicklung stoßen wir häufig auf Situationen, in denen wir das Anzeigen und Ausblenden von Elementen dynamisch steuern müssen. Zeigen Sie beispielsweise nach erfolgreicher Anmeldung des Benutzers eine Willkommensnachricht an oder aktivieren Sie beim Scrollen der Seite den Animationseffekt des Elements, wenn ein Element in die Mitte des Bildschirms scrollt. Als Reaktion auf diese Anforderungen stellt jQuery einige APIs zum Anzeigen und Ausblenden der Überwachungsseite bereit.

1. $(window).scroll()-Methode

$(window).scroll()-Methode stellt die Ereignisverarbeitungsfunktion dar, die beim Scrollen des Fensters ausgelöst wird. Durch Abhören des Scroll-Ereignisses des Fensters können Sie ein Element dynamisch anzeigen oder ausblenden.

Das Folgende ist ein Beispielcode. Wenn das Rad zu einer Position 500 Pixel vom oberen Rand der Seite scrollt, wird ein Element auf der Seite angezeigt:

$(window).scroll(function(){
  if($(window).scrollTop() >= 500){
    $("#element").show();
  }
});

Code-Erklärung:

• $(window).scroll(). : Listening-Fenster-Scroll-Ereignis;
• $(window).scrollTop(): Ermittelt die aktuelle Scroll-Distanz des Fensters
• if($(window).scrollTop() >= 500): Wenn die Scroll-Distanz des Das Rad erreicht oder überschreitet 500 Pixel. Führen Sie dann den folgenden Code aus:
• $("#element").show(): Zeigen Sie das Element mit der ID „element“ an.

2. $(window).resize()-Methode

$(window).resize()-Methode stellt die Ereignisverarbeitungsfunktion dar, die ausgelöst wird, wenn sich die Fenstergröße ändert. Durch das Abhören von Ereignissen zur Änderung der Fenstergröße können Sie die Größe und Position von Elementen auf der Seite dynamisch anpassen.

Das Folgende ist ein Beispielcode. Wenn die Breite des Fensters kleiner oder gleich 768 Pixel ist, wird ein Element auf der Seite ausgeblendet:

$(window).resize(function(){
  if($(window).width() <= 768){
    $("#element").hide();
  }
});

Code-Erklärung:

• $(window).resize(): Hören Sie sich das Größenänderungsereignis des Fensters an. ;
• $(window).width(): Ermitteln Sie die Breite des Fensters Das Fenster ist kleiner oder gleich 768 Pixel. Führen Sie den folgenden Code aus:
• $("#element").hide(): Verstecken Sie das Element mit der ID „element“.
• 3. Die Methode $(document).ready() und die Methode $(window).load()

$(document).ready() stellen die Ereignisverarbeitungsfunktion dar, die beim Laden des Seiten-DOM ausgelöst wird. Die Methode $(window).load() stellt die Ereignisverarbeitungsfunktion dar, die ausgelöst wird, wenn alle Elemente auf der Seite (einschließlich Bildern und anderen Ressourcen) geladen werden. Mit diesen beiden Methoden können Sie auch dynamische Anzeige- oder Ausblendvorgänge für Seitenelemente implementieren.

Das Folgende ist ein Beispielcode. Wenn alle Elemente auf der Seite geladen sind, wird ein Element auf der Seite angezeigt:

$(window).load(function(){
  $("#element").show();
});

Codeerklärung:

$(window).load(): Überwachen Sie alle Elemente der Seite (einschließlich Bildern und anderen Ressourcen) Abschlussereignis wird geladen;

• $("#element").show(): Zeigt das Element mit der ID „element“ an.
• 4. Andere Methoden

Zusätzlich zu den oben vorgestellten Methoden bietet jQuery auch einige andere Methoden zum dynamischen Anzeigen oder Ausblenden von Elementen, wie zum Beispiel:

$(element).fadeIn() / $(element). fadeOut(): Realisiert den Ein-/Ausblendeffekt des Elements;

• $(element).slideDown() / $(element).slideUp(): Realisiert den Pull-Down-/Pull-Up-Effekt des Elements; $(element ).toggle(): Zum Umschalten zwischen dem Anzeigen und Ausblenden von Elementen.
• Zusammenfassung:
• Das Obige stellt verschiedene Möglichkeiten zum Anzeigen und Ausblenden dynamischer Steuerelemente vor. Sie können eine dynamische Steuerung von Seitenelementen durch verschiedene Szenarien erreichen. In der tatsächlichen Entwicklung sollten geeignete Methoden basierend auf den spezifischen Anforderungen ausgewählt werden, um bessere Ergebnisse zu erzielen.

Das obige ist der detaillierte Inhalt vonAnzeige und Ausblenden der JQuery-Überwachungsseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!