Heim > Artikel > Web-Frontend > So blenden Sie Klickschaltflächen in jQuery ein und aus
So blenden Sie Klickschaltflächen in jQuery ein und aus
- yuliaOriginal
- 2018-10-29 15:41:3717758Durchsuche
jQuery kann viele Funktionen einfach und schnell implementieren und wird daher häufig in der Front-End-Entwicklung verwendet. Freunde, die jQuery lernen, werden jQuery verwenden, um den Effekt zu erzielen, dass Sie zum Anzeigen und dann zum Ausblenden klicken (d. h. jQuery zum Ausblenden doppelklicken)? In diesem Artikel erfahren Sie, wie Sie mit jQuery den Effekt der Klickanzeige und des Ausblendens erzielen. Interessierte Freunde können sich darauf beziehen.
Im Folgenden werden zwei Methoden für jQuery zum Implementieren der Klickanzeige und des Ausblendens vorgestellt. Eine davon ist die toggle()-Methode und die andere sind die hide()- und show()-Methoden in jquery.
Hinweis: Stellen Sie sicher, dass Sie die jQuery-Datei importieren, da sonst der Effekt nicht erzielt werden kann
1 Die toggle()-Methode in jquery
toggle ()-Methode Sie können zwei oder mehr Funktionen hinzufügen und dann durch das Klickereignis wechseln. Wenn Sie klicken, wird die erste angegebene Funktion aufgerufen, und wenn Sie erneut klicken, wird die zweite Funktion aufgerufen und so weiter eine Schleife.
Syntax: $(selector).toggle(function)
Funktion bezieht sich auf die Funktion, die ausgeführt werden muss, wenn darauf geklickt wird
Instanzbeschreibung: Wenn die Funktion „Anzeigen und Ausblenden Die Schaltfläche „Umschalten“ wird zum ersten Mal angeklickt. Beim Anklicken wird der Inhalt des P-Tags ausgeblendet. Beim erneuten Anklicken wird der Inhalt des P-Tags angezeigt. Der vollständige Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">显示与隐藏切换</button>
<p>我可以显示也可以隐藏</p>
<p>啦啦啦</p>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p").toggle();
});
});
</script>
</html>Wie gezeigt Im Bild unten zeigt das erste Bild den Effekt, wenn kein Klick erfolgt, und das zweite Bild. Das Bild zeigt den Effekt, wenn zum ersten Mal geklickt wird, wobei der Inhalt ausgeblendet ist.
2. Die Methoden hide() und show() in jquery
hide ()-Methode kann ausgewählte Elemente ausblenden, ähnlich dem display:none-Attribut in CSS. Die Methode show() kann ausgeblendete ausgewählte Elemente anzeigen. Die Verwendung von hide() und show() ist dieselbe, außer dass eines angezeigt und das andere ausgeblendet wird.
Syntax: $(selector).hide(speed,easing,callback)
speed stellt die Geschwindigkeit des Anzeigeeffekts dar, bei der es sich um einen optionalen Wert handelt (langsam, schnell, Millisekunden)
Beschleunigung Wird verwendet, um die Geschwindigkeit von Elementen an verschiedenen Punkten der Animation festzulegen. Es handelt sich um einen optionalen Wert (Swing, linear). Der
-Rückruf gibt die Funktion an, die nach der Ausführung der show()-Methode ausgeführt werden muss optionaler Wert
Beispielbeschreibung: Wenn Sie auf die Schaltfläche „Ausblenden“ klicken, wird der Inhalt des P-Tags ausgeblendet. Wenn Sie auf die Schaltfläche „Anzeigen“ klicken, wird der Inhalt des P-Tags angezeigt ist wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p id="p1">点击隐藏按钮，文字消失<br>点击显示按钮，文字重现</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("#hide").click(function() {
$("#p1").hide();
});
$("#show").click(function() {
$("#p1").show();
});
});
</script>
</html>Der Effekt ist wie in der Abbildung gezeigt:
Alle oben haben die beiden Methoden von jQuery vorgestellt, um das Anzeigen und Ausblenden von Klicks zu realisieren . Eine davon ist die toggle()-Methode, die den Effekt erzielen kann, dass durch Klicken eine Schaltfläche angezeigt und ausgeblendet wird. Die zweite Methode sind die Methoden hide() und show() in jquery, mit denen Inhalte angezeigt und ausgeblendet werden können zwei Knöpfe. Welche Methode Sie bei der Arbeit wählen, hängt von den beruflichen Bedürfnissen und persönlichen Gewohnheiten ab. Freunde, die noch nie damit in Berührung gekommen sind, müssen sie selbst üben. Ich hoffe, dieser Artikel wird Ihnen, die gerne lernen, hilfreich sein.
【Empfohlene verwandte Tutorials】
1. jQuery-Video-Tutorial
2. jQuery-Referenzhandbuch für Chinesisch
3. Bootstrap-Tutorial
Das obige ist der detaillierte Inhalt vonSo blenden Sie Klickschaltflächen in jQuery ein und aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!