So verwenden Sie jQuery zum Ändern des Inhalts von HTML-Elementen-Front-End-Fragen und Antworten-php.cn

So verwenden Sie jQuery zum Ändern des Inhalts von HTML-Elementen

PHPz

Freigeben： 2023-04-17 11:09:27

Original

1299 Leute haben es durchsucht

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 -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>

Nach dem Login kopieren

In diesem Beispiel haben wir die jQuery-Bibliothek eingeführt und ein Element definiert, das dem 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 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 -Elements zu ändern. Wir übergeben in der Methode einen String-Parameter „Sie haben auf die Schaltfläche geklickt!“, damit wir den Textinhalt des -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内容

点击下面的按钮!

（点击按钮后）

点这里看看下面你点击了按钮！

Nach dem Login kopieren

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!