So laden Sie externe HTML-Dateien mit der Lademethode von jQuery-js-Tutorial-php.cn

So laden Sie externe HTML-Dateien mit der Lademethode von jQuery

不言

Freigeben： 2018-12-12 17:03:24

Original

8855 Leute haben es durchsucht

So laden Sie externe HTML-Dateien mit der Lademethode von So laden Sie externe HTML-Dateien mit der Lademethode von jQuery ist eine JavaScript-Bibliothek, die zum Laden externer HTML-Dateien verwendet werden kann. In diesem Artikel werfen wir einen Blick darauf, wie die Load-Methode in So laden Sie externe HTML-Dateien mit der Lademethode von So laden Sie externe HTML-Dateien mit der Lademethode von jQuery externe HTML-Dateien lädt.

So laden Sie externe HTML-Dateien mit der Lademethode von So laden Sie externe HTML-Dateien mit der Lademethode von jQuery

Werfen wir zunächst einen Blick auf Was ist Last?

load kann beim Lesen von Inhalten verwendet werden, die in einem anderen HTML geschrieben sind.

Wenn beispielsweise einige Menüleisten gemeinsam genutzt werden, ist es schwierig, auf jeder Seite eine Menüleiste zu schreiben. In diesem Fall können Sie die Lademethode von So laden Sie externe HTML-Dateien mit der Lademethode von So laden Sie externe HTML-Dateien mit der Lademethode von jQuery verwenden, um die Menüs auf anderen Seiten zu lesen , damit der implementierte Code nicht redundant ist.

Dann schauen wir uns an: Wie verwende ich die Lademethode, um eine externe HTML-Datei zu laden?

Angenommen, Sie haben einen Header in der Datei header.html geschrieben, und wenn Sie „sample.html“ als externe Datei lesen, benötigen Sie das folgende Skript.

$(function(){
  $("#cover").load("header.html");
});

Nach dem Login kopieren

Außerdem wird der obige HTML-Code in den „id“-Speicherort geladen, der in „sample.html“ festgelegt ist. Bitte beachten Sie, dass es sich bei „header.html“ und „sample.html“ derzeit um unterschiedliche Dateien handelt.

In „sample.html“ funktioniert So laden Sie externe HTML-Dateien mit der Lademethode von So laden Sie externe HTML-Dateien mit der Lademethode von jQuery möglicherweise nicht, selbst wenn „header.html“ angegeben ist.

Daher ist die Beschreibung zu „Hader.html“ nicht „sample.html“, sondern direkt in „Hample.html“.

Sehen wir uns ein konkretes Beispiel an

Der Code lautet wie folgt

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-3.3.1.min.js">
      
    </script>
    <script src="sample.js" type="text/javascript"></script>
    <title>So laden Sie externe HTML-Dateien mit der Lademethode von So laden Sie externe HTML-Dateien mit der Lademethode von jQuery</title>
  </head>
  <body>
    <div id="cover">
      <div id="section1"></div>
      <div id="section2"></div>
    </div>
  </body>
</html>

Nach dem Login kopieren

HTML

<h1>header.html的标题</h1>

Nach dem Login kopieren

JavaScript

$(function(){
  $("#cover").load("header.html");
});

Nach dem Login kopieren

Der Operationseffekt ist wie folgt

Der Inhalt von „header.html“ kann in „sample.html“ widergespiegelt werden.

So laden Sie externe HTML-Dateien mit der Lademethode von So laden Sie externe HTML-Dateien mit der Lademethode von jQuery

Das obige ist der detaillierte Inhalt vonSo laden Sie externe HTML-Dateien mit der Lademethode von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!