Heim > Artikel > Web-Frontend > So implementieren Sie unsichtbare JQuery-Elemente
So implementieren Sie unsichtbare JQuery-Elemente
- 藏色散人Original
- 2020-12-08 10:01:582741Durchsuche
So implementieren Sie unsichtbare JQuery-Elemente: 1. Verwenden Sie die Methode „hide“, um das ausgewählte Element auszublenden, mit einer Syntax wie „$(“p“).hide();“ 2. Verwenden Sie die Methode „toggle“, um das Element auszublenden. mit Syntax wie „$(“ p“).toggle();“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.0-Version, Dell G3-Computer. Diese Methode ist für alle Computermarken geeignet.
Empfohlen: jquery-Video-Tutorial
jquery macht Elemente unsichtbar (ausblenden)
Verwenden Sie jquery, um das Ausblenden von Elementen zu steuern, was in einem Satz erfolgen kann, zum Beispiel:
1. Die Methode
hide( ) verbirgt die ausgewählten Elemente.
Tipp: Dies ähnelt der CSS-Eigenschaft display:none.
Hinweis: Ausgeblendete Elemente werden nicht vollständig angezeigt (beeinflussen nicht mehr das Layout der Seite).
Wenn Sie ausgeblendete Elemente anzeigen müssen, verwenden Sie die Methode show().
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
</html>Methode 2: Verwenden Sie die Methode toggle()
toggle(), um zwischen hide() und show() für das ausgewählte Element zu wechseln. Wenn das Element sichtbar ist, schalten Sie es auf „Ausgeblendet“ um. Wenn das Element ausgeblendet ist, schalten Sie es auf „Sichtbar“ um.
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 (haben keinen Einfluss mehr auf das Layout der Seite).
Tipps: Mit dieser Methode können Sie zwischen benutzerdefinierten Funktionen wechseln.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换 hide() 和 show()</button>
</body>
</html>Methode 3: Verwenden Sie CSS('display','none')
Beispiel:
$("#id").css('display','none');//隐藏
$("#id").css('display','block');//显示oder
$("#id")[0].style.display='none';display=none, um das Ausblenden von Objekten zu steuern
display=block, um die Anzeige zu steuern von Objekten
Methode 4: CSS('visibility','hidden') verwenden
Beispiel:
$("#id").css('visibility','hidden');//元素隐藏
$("#id").css('visibility','visible');//元素显示Das CSS-Sichtbarkeitsattribut gibt an, ob das Element sichtbar ist.
visible Das Element ist sichtbar.
hidden Das Element ist unsichtbar.
collapse Bei Verwendung in einem Tabellenelement kann dieser Wert eine Zeile oder Spalte löschen, hat jedoch keinen Einfluss auf das Layout der Tabelle. Der durch Zeilen oder Spalten belegte Platz wird für andere Inhalte zur Verfügung gestellt. Wenn dieser Wert für ein anderes Element verwendet wird, wird er als „versteckt“ dargestellt.
inherit Erbt den Wert des Sichtbarkeitsattributs vom übergeordneten Element.
Hinweis:
display:none und sichtbar:hidden können beide ein Element auf der Webseite verbergen. Es gibt keinen Unterschied in den visuellen Effekten, aber es gibt einen Unterschied zwischen den beiden bei einigen DOM-Operationen:
display:none -. - Für das versteckte Objekt ist kein physischer Platz reserviert, das heißt, das Objekt verschwindet vollständig von der Seite und kann, um es für Laien auszudrücken, weder gesehen noch berührt werden.
visible:hidden--- macht das Objekt auf der Webseite unsichtbar, aber der vom Objekt auf der Webseite eingenommene Platz ändert sich nicht, das heißt, es verfügt weiterhin über Attribute wie Höhe, Breite usw. Um es für Laien auszudrücken , es kann nicht gesehen, aber berührt werden.
Das obige ist der detaillierte Inhalt vonSo implementieren Sie unsichtbare JQuery-Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!