So aktualisieren Sie div mit jquery-Front-End-Fragen und Antworten-php.cn

So aktualisieren Sie div mit jquery

PHPz

Freigeben： 2023-05-28 10:28:07

Original

2034 Leute haben es durchsucht

Bei der Front-End-Entwicklung müssen wir häufig den Inhalt von Webseiten dynamisch aktualisieren, und JQuery ist eine sehr beliebte JavaScript-Bibliothek. Sie bietet viele Toolfunktionen, die uns die Aktualisierung von Elementen auf der Seite erleichtern. Unter diesen ist das Aktualisieren von Div eine relativ häufige Anforderung. Schauen wir uns an, wie JQuery Div aktualisiert.

Zuerst müssen wir klären, was Refresh Div ist. Im Allgemeinen wird die Div-Aktualisierung verwendet, wenn der Inhalt eines bestimmten Div-Bereichs aktualisiert werden muss, nachdem die asynchrone Anforderung Daten zurückgegeben hat, ohne die gesamte Seite zu aktualisieren. Diese Methode, nur einen Teil des Inhalts zu aktualisieren, ohne die gesamte Seite zu aktualisieren, kann für einen reibungslosen Front-End-Fluss und ein reibungsloseres Benutzererlebnis sorgen.

Als nächstes müssen wir die grundlegende Verwendung von JQuery verstehen. Das erste, was klar sein sollte, ist, dass JQuery eine JavaScript-Bibliothek ist, daher müssen wir die js-Datei von JQuery vorstellen. Normalerweise fügen wir den folgenden Code in den Header der HTML-Datei ein:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

Nach dem Login kopieren

Nach der Einführung von JQuery schauen wir uns an, wie man JQuery verwendet, um den Inhalt im div zu aktualisieren. Im Allgemeinen ist das Aktualisieren des Div-Inhalts in zwei Schritte unterteilt: Der erste Schritt besteht darin, das zu aktualisierende Div-Element über JQuery abzurufen, und der zweite Schritt besteht darin, den Div-Inhalt über die von JQuery bereitgestellte API zu aktualisieren .

Die Methode zum Abrufen des div-Elements ist sehr einfach. Sie müssen nur den Selektor von JQuery verwenden, um das div-Element abzurufen, das aktualisiert werden muss, zum Beispiel:

var divElement = $('div#updateDiv');

Nach dem Login kopieren

Hier verwenden wir den Selektor des div-Elements mit der ID updateDiv um es abzurufen und es der Variablen divElement zuzuweisen.

Als nächstes müssen wir die von JQuery bereitgestellte API verwenden, um den Inhalt in diesem Div zu aktualisieren. JQuery bietet eine Vielzahl von API-Methoden zum Aktualisieren des Inhalts von Elementen. Die am häufigsten verwendeten Methoden sind html() und text().

Aktualisieren Sie den Inhalt des div über die Methode html().

Die Methode html() kann den Inhalt des ausgewählten Elements festlegen oder zurückgeben. Genauer gesagt kann sie zum Einfügen von HTML-Code in das angegebene div-Element verwendet werden.

Zum Beispiel verwenden wir den folgenden Code, um Daten durch Aufrufen von Ajax abzurufen:

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    $('div#updateDiv').html('任务名称：' + data.title + '<br>' + '任务状态：' + data.completed);
  }
});

Nach dem Login kopieren

Hier erhalten wir die Daten durch Aufrufen von Ajax und fügen die Werte des Titels und der abgeschlossenen Attribute der Daten in Zeichenfolgen des Aufgabennamens zusammen und Aufgabenstatus, und rufen Sie dann die Methode html() auf, um diese Zeichenfolge im div-Element zu aktualisieren.

Aktualisieren Sie den Inhalt des Div mit der Methode text().

Die Methode text() kann den Textinhalt des ausgewählten Elements festlegen oder zurückgeben. Sie können sie verwenden, um den Textinhalt des angegebenen Div-Elements zu aktualisieren.

Zum Beispiel verwenden wir den folgenden Code, um Daten durch Aufrufen von Ajax abzurufen:

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    $('div#updateDiv').text('任务名称：' + data.title + '，' + '任务状态：' + data.completed);
  }
});

Nach dem Login kopieren

Hier erhalten wir die Daten auch durch Aufrufen von Ajax und fügen die Werte des Titels und der vollständigen Attribute der Daten zu einer Zeichenfolge zusammen Geben Sie den Aufgabennamen und den Aufgabenstatus ein und rufen Sie dann die Methode text() auf, um diese Zeichenfolge im div-Element zu aktualisieren.

Mit der oben genannten Methode können wir den Div-Inhalt im Frontend problemlos aktualisieren. Es ist jedoch zu beachten, dass diese Aktualisierungsmethode nur anwendbar ist, wenn der Inhalt im div keine komplexe HTML-Struktur ist. Wenn der aktualisierte Inhalt komplexer ist, können wir Front-End-Frameworks wie Vue.js verwenden, um ein besseres Entwicklungserlebnis zu erzielen.

Zusammenfassung:

JQuery ist eine der am häufigsten verwendeten JavaScript-Bibliotheken in der Front-End-Entwicklung. Mit der API von JQuery können Sie Seitenelemente einfach bedienen. Wenn Sie eine Div-Aktualisierung implementieren, können Sie eine Aktualisierung durchführen, indem Sie zuerst das Div-Element abrufen, das aktualisiert werden muss, und dann die von JQuery bereitgestellten API-Methoden wie die Methoden html() und text() verwenden, um den Inhalt im Div zu aktualisieren die gesamte Seite, ohne die gesamte Seite zu aktualisieren.

Das obige ist der detaillierte Inhalt vonSo aktualisieren Sie div mit jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!