Heim > Web-Frontend > Front-End-Fragen und Antworten > Welche Funktion verwendet JQuery zum Anzeigen und Ausblenden von Elementen?

Welche Funktion verwendet JQuery zum Anzeigen und Ausblenden von Elementen?

WBOY
Freigeben: 2022-04-15 11:26:05
Original
2704 Leute haben es durchsucht

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()“.

Welche Funktion verwendet JQuery zum Anzeigen und Ausblenden von Elementen?

Die Betriebsumgebung dieses Tutorials: Windows10-System, JQuery3.2.1-Version, Dell G3-Computer.

Welche Funktion verwendet jquery zum Anzeigen und Ausblenden von Elementen?

1 Elemente anzeigen: show()

Wenn die ausgewählten Elemente ausgeblendet wurden, zeigen Sie diese Elemente an:

Syntax

$(selector).show(speed,callback)
Nach dem Login kopieren
  • 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)
Nach dem Login kopieren
  • 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>
Nach dem Login kopieren

Ergebnisse ausgeben:

Welche Funktion verwendet JQuery zum Anzeigen und Ausblenden von Elementen?

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)
Nach dem Login kopieren

Das Beispiel lautet wie folgt:

<!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>
Nach dem Login kopieren

Ausgabeergebnis:


Empfohlene verwandte Video-Tutorials: Welche Funktion verwendet JQuery zum Anzeigen und Ausblenden von Elementen?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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage