Die Funktionen sind: 1. show(), diese Methode kann ausgeblendete Elemente anzeigen, die Syntax ist „element object.show()“ 2. hide(), diese Methode kann die angezeigten Elemente ausblenden, die Syntax ist „element.show()“; object.hide( )“; 3. toggle(), diese Methode kann Elemente ein- oder ausblenden, die Syntax lautet „element object.toggle()“.
Die Betriebsumgebung dieses Tutorials: Windows10-System, JQuery3.2.1-Version, Dell G3-Computer.
1 Elemente anzeigen: show()
Wenn die ausgewählten Elemente ausgeblendet wurden, zeigen Sie diese Elemente an:
Syntax
$(selector).show(speed,callback)
Geschwindigkeit auswählen kann. Gibt an, wie schnell ein Element von ausgeblendet zu vollständig sichtbar wechselt. Der Standardwert ist „0“.
Mögliche Werte:
Millisekunden (z. B. 1500)
„langsam“
„normal“
„schnell“
Wenn die Geschwindigkeit eingestellt ist und das Element von ausgeblendet auf vollständig sichtbar wechselt, ändert es sich allmählich seine Höhe, Breite, Ränder, Polsterung und Transparenz.
Rückruf optional. Die Funktion, die nach der Ausführung der Show-Funktion ausgeführt werden soll. Dieser Parameter kann nur eingestellt werden, wenn der Geschwindigkeitsparameter eingestellt ist.
2. Verstecktes Element: hide()
Wenn das ausgewählte Element angezeigt wurde, blenden Sie das Element aus.
Syntax
$(selector).hide(speed,callback)
Geschwindigkeit optional. Gibt an, wie schnell ein Element von sichtbar zu ausgeblendet wechselt. Der Standardwert ist „0“.
Mögliche Werte:
Millisekunden (z. B. 1500)
„langsam“
„normal“
„schnell“
Mit der eingestellten Geschwindigkeit ändert sich das Element schrittweise von sichtbar zu ausgeblendet. Ändern Sie seine Höhe. Breite, Ränder, Abstand und Transparenz.
Rückruf optional. Die Funktion, die nach der Ausführung der Ausblendfunktion ausgeführt werden soll.
Dieser Parameter kann nur eingestellt werden, wenn der Geschwindigkeitsparameter eingestellt ist.
Beispiele sind wie folgt:
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ $("p").hide(); }); $(".btn2").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>This is a paragraph.</p> <button class="btn1">Hide</button> <button class="btn2">Show</button> </body> </html>
Ergebnisse ausgeben:
3. Elemente automatisch identifizieren, anzeigen oder ausblenden: Die Methode toggle() führt hide() und show() für die ausgewählten Elemente aus Elementwechsel zwischen.
Diese Methode prüft den Sichtbarkeitsstatus des ausgewählten Elements. Wenn ein Element ausgeblendet ist, wird show() ausgeführt, wenn ein Element sichtbar ist, wird hide() ausgeführt – dies erzeugt einen Toggle-Effekt. Hinweis: Ausgeblendete Elemente werden nicht vollständig angezeigt (beeinflussen nicht mehr das Layout der Seite). Tipps: Mit dieser Methode können Sie zwischen benutzerdefinierten Funktionen wechseln. Grammatik$(selector).toggle(speed,easing,callback)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script> </head> <body> <p>这是一个段落。</p> <button>切换 hide() 和 show()</button> </body> </html>
Ausgabeergebnis:
Empfohlene verwandte Video-Tutorials: jQuery-Video-Tutorial
Das obige ist der detaillierte Inhalt vonWelche Funktion verwendet JQuery zum Anzeigen und Ausblenden von Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!