suchen

Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie jQuery zum Ändern des Inhalts von HTML-Elementen

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

PHPz
PHPzOriginal
2023-04-17 10:30:101342Durchsuche

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie man Vue über CDN einführt und einen Werttransfer auf verschiedenen Seiten realisiertNächster Artikel：Wie man Vue über CDN einführt und einen Werttransfer auf verschiedenen Seiten realisiert

In Verbindung stehende Artikel

Mehr sehen