Heim  >  Artikel  >  Web-Frontend  >  Welche Funktion verwendet JQuery zum Anzeigen und Ausblenden von Elementen?

Welche Funktion verwendet JQuery zum Anzeigen und Ausblenden von Elementen?

WBOY
WBOYOriginal
2022-04-15 10:47:162573Durchsuche

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)
  • 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:

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)

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>

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!

Stellungnahme:
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
Vorheriger Artikel:Ist Hover ein JQuery-Ereignis?Nächster Artikel:Ist Hover ein JQuery-Ereignis?