JQuery ist eine beliebte JavaScript-Bibliothek, mit der Elemente in HTML-Dokumenten einfach gefunden und anschließend bearbeitet werden können. In diesem Artikel besprechen wir, wie Sie jQuery verwenden, um den Inhalt eines HTML-Elements (d. h. eines -Elements) zu ändern. Diese Änderung wird durch einen Benutzerklick (d. h. Klicken) erreicht.
Schritt eins: Vorbereitung
Bevor wir mit dem Schreiben von jQuery-Code beginnen, müssen wir unsere HTML-Seite vorbereiten. Das Folgende ist ein einfaches HTML-Seitenbeispiel, das ein < span >-Element und eine Schaltfläche enthält:
<!DOCTYPE html>
<html>
<head>
<title>jquery demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#clickButton").click(function(){
$("span").text("你点击了按钮！");
});
});
</script>
</head>
<body>
<h1>JQuery事件点击修改span内容</h1>
<p>点击下面的按钮!</p>
<button id="clickButton">点击这里</button>
<p>点这里看看下面<span>会变化</span>！</p>
</body>
</html>In diesem Beispiel haben wir die jQuery-Bibliothek eingeführt und ein Element definiert, das dem < span > Element. Klicken Sie auf den Ereignis-Listener. Dieser Ereignis-Listener wird ausgelöst, wenn der Benutzer auf die Schaltfläche klickt, und ändert den Textinhalt des Elements < span > in „Sie haben auf die Schaltfläche geklickt!“.
Schritt 2: jQuery-Ereignisbindung
Die Funktion $(document).ready() ist eine der Sonderfunktionen von jQuery, die zum Ausführen unseres Codes verwendet wird, wenn die Seite fertig ist. Das bedeutet, dass der Code in der Funktion $(document).ready() ausgeführt wird, sobald der DOM-Baum geladen wird. Daher müssen wir in diesem Block eine Funktion für unser Klickereignis binden.
Wir verwenden $("#clickButton").click(), um ein Klickereignis zu binden, das ausgelöst wird, wenn der Benutzer auf eine Schaltfläche mit der ID „clickButton“ klickt. Beachten Sie, dass wir auch Klassenselektoren oder Tag-Selektoren verwenden können, um HTML-Elemente abzugleichen. In diesem Fall verwenden wir jedoch den ID-Selektor.
Im Click-Event-Handler verwenden wir die Methode $("span").text(), um den Textinhalt des < span >-Elements zu ändern. Wir übergeben in der Methode einen String-Parameter „Sie haben auf die Schaltfläche geklickt!“, damit wir den Textinhalt des < span >-Elements einfach ändern können.
Schritt drei: Testergebnisse
Jetzt öffnen wir die Seite mit dem obigen HTML-Code und klicken auf die Schaltfläche. Wir können beobachten, dass sich der Textinhalt im geändert hat, wie unten gezeigt:
JQuery事件点击修改span内容 点击下面的按钮! （点击按钮后） 点这里看看下面你点击了按钮！
In In diesem Beispiel verwenden wir sehr einfachen jQuery-Code, aber dies gibt uns einen guten Ausgangspunkt, um zu verstehen, wie man jQuery zum Ändern von Elementen auf einer HTML-Seite verwendet. Bei Bedarf können Sie dieses Codebeispiel entsprechend Ihren Anforderungen erweitern.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie jQuery zum Ändern des Inhalts von HTML-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
