jQuery-Tutorial zum Implementieren des Ereignisses „Schließen-Schaltfläche'.-js-Tutorial-php.cn

jQuery-Tutorial zum Implementieren des Ereignisses „Schließen-Schaltfläche'.

王林

Freigeben： 2024-02-23 18:18:27

Original

1184 Leute haben es durchsucht

jQuery-Tutorial zum Implementieren des Ereignisses „Schließen-Schaltfläche.

In der Webentwicklung ist die Schaltfläche „Schließen“ eine häufige Funktion. Benutzer klicken häufig auf die Schaltfläche „Schließen“, um das Popup-Fenster oder Eingabeaufforderungsfeld auf der Webseite zu schließen. In jQuery ist es sehr einfach und bequem, das Schaltflächenereignis „Schließen“ zu implementieren. Im Folgenden finden Sie ein spezifisches Codebeispiel, mit dem Sie lernen, wie Sie das Schaltflächenereignis „Schließen“ implementieren.

Stellen Sie zunächst sicher, dass Sie die jQuery-Bibliotheksdatei eingeführt haben, die über CDN eingeführt oder lokal heruntergeladen werden kann. Als Nächstes erstellen wir einen HTML-Code, der eine Schaltfläche zum Schließen enthält:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关闭按钮事件示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="popup">
    <h2>这是一个弹窗</h2>
    <p>这里可以输入弹窗的内容。</p>
    <button class="close-btn">关闭</button>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Nach dem Login kopieren

Im obigen Code haben wir eine Struktur erstellt, die ein Popup-Fenster und eine Schaltfläche zum Schließen enthält. Als Nächstes implementieren wir das Klickereignis der Schaltfläche „Schließen“, sodass das Popup-Fenster geschlossen werden kann, wenn auf die Schaltfläche „Schließen“ geklickt wird.

In der Datei „script.js“ verwenden wir jQuery, um das Element „Schließen“ auszuwählen und ihm ein Klickereignis hinzuzufügen. Wenn auf die Schaltfläche „Schließen“ geklickt wird, verwenden wir die Methode hide() von jQuery, um das Popup-Fenster auszublenden:

$(document).ready(function(){
    $('.close-btn').click(function(){
        $('.popup').hide();
    });
});

Nach dem Login kopieren

Der obige Code ist sehr einfach. Blenden Sie zunächst das Popup-Fenster mit der $(document).ready()来确保DOM加载完成后再执行jQuery代码。然后使用$('.close-btn').click()来为关闭按钮添加点击事件，当关闭按钮被点击时，选中类名为.popup的弹窗元素，然后调用hide()-Methode aus.

Schließlich können Sie das Popup-Fenster in der Datei „styles.css“ formatieren, indem Sie beispielsweise die Position, Größe, Hintergrundfarbe usw. des Popup-Fensters festlegen, damit das Popup-Fenster schöner aussieht.

Anhand der obigen Codebeispiele erfahren Sie, wie Sie mit jQuery das Ereignis „Schließen-Schaltfläche“ implementieren, sodass das Popup-Fenster geschlossen werden kann, wenn auf die Schaltfläche „Schließen“ geklickt wird. Ich hoffe, dass dieses Tutorial Ihnen dabei helfen kann, die Grundkenntnisse von jQuery besser zu beherrschen und Ihre Webentwicklungsfähigkeiten zu verbessern.

Das obige ist der detaillierte Inhalt vonjQuery-Tutorial zum Implementieren des Ereignisses „Schließen-Schaltfläche'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!