Der Unterschied zwischen HTML() und Load() von jQuery

jQuerys HTML() und Load() haben sehr ähnliche Funktionen. Sie können beide den Inhalt von HTML ändern.

jQuery HTML Betriebsdetails:

jQuery enthält viele leistungsstarke Funktionen zum Ändern und Bearbeiten von HTML.

Die HTML()-Methode ändert den HTML-Inhalt

Syntax

$(selector).html(content)

Die html()-Funktion ändert den Inhalt des übereinstimmenden HTML-Elements ( innerHTML).

Instanz

$("p").html("html content");

jQuery Load Detaillierte Funktionserklärung:

Definition und Verwendung

Die Methode „load()“ lädt den Remote-HTML-Dateicode und fügt ihn in das DOM ein.

Der Unterschied zwischen der Load()-Methode von Jquery und html() besteht darin, dass nach dem Laden der Remote-HTML-Datei auch das Javascrpt-Skript darin ausgeführt werden kann.

Standardmäßig wird die GET-Methode verwendet – bei der Übergabe zusätzlicher Parameter automatisch in die POST-Methode konvertiert.

In jQuery 1.2 können Sie einen Selektor zum Filtern des geladenen HTML-Dokuments angeben, und nur der gefilterte HTML-Code wird in das DOM eingefügt. Die Syntax ist wie „url #some > Selektor".

Siehe Beispiel unten.

Syntax

load(url,[data],[callback])

Parameter

Beschreibung

URL

Die URL der HTML-Webseite zu geladen werden.

Daten

An den Server gesendete Schlüssel-/Wertdaten können auch ein String

参数	描述
url	待载入的 HTML 网页网址。
data	发送至服务器的 key/value 数据。在 jQuery 1.3 中也可以接受一个字符串了。
callback	载入成功时执行的回调函数。

.

callback

Wird ausgeführt, wenn der Ladevorgang erfolgreich war Callback-Funktion

Beispiel 1

Ähnlich dem obigen Beispiel, sendet aber zusätzliche Parameter als POST und zeigt eine Erfolgsmeldung an:

$("#feeds").load("feeds.php", {limit: 25}, function(){
  alert("The last 25 entries in the feed have been loaded");
});

Beispiel 2

Artikel Seitenleiste laden Navigation

Abschnitt zu einer ungeordneten Liste:

HTML-Code:

<b>jQuery Links:</b>
<ul id="links"></ul>

jQuery-Code:

$("#links").load("/Main_Page #p-Getting-Started li");

Beispiel 3

<p><span style="color: #000000;">1）主页面<br><br><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/jquery-1.4.4.min.js"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/<a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a>"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #000000;"><br><br>    $(<a href="http://www.php.cn/code/658.html" target="_blank">document</a>).ready(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">() {<br><br>        $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">#target</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).load(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">target.html</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">() {<br><br><br>        });<br><br>    });<br><br></span><span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="target"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br>2） 子页面<br><br><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/jquery-1.4.4.min.js"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #000000;"><br><br>    alert(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">hello world!I am target</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">);<br><br></span><span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br>above is script</span></p>

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen HTML() und Load() von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!