jQueryのHTML()とLoad()の違い

巴扎黑
リリース: 2018-05-15 16:51:24
オリジナル
2944 人が閲覧しました

jQuery の HTML() は Load() に非常に似ており、どちらも HTML のコンテンツを変更できます。 もちろん、明らかな違いがいくつかあります。

jQuery HTML 操作の詳細:

jQuery には、HTML を変更および操作するための強力な関数が多数含まれています。

HTML() メソッドは HTML コンテンツを変更します

構文

$(selector).html(content)
ログイン後にコピー

html() 関数と同様に、一致した HTML 要素 (innerHTML) のコンテンツを変更します。

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

jQueryLoad 詳細な操作:

定義と使用法

リモートでロードするload()メソッドHTML ファイルのコードを DOM に挿入します。

Jquery の Load() メソッドと html() の違いは、リモート HTML ファイルをロードした後、そのファイル内の Javascrpt スクリプトも実行できることです。

デフォルトでは GET メソッドが使用され、追加のパラメータを渡すと自動的に POST メソッドに変換されます。

jQuery 1.2 では、ロードされた HTML ドキュメントをフィルターするセレクターを指定でき、フィルターされた HTML コードのみが DOM に挿入されます。構文は「url #some」のようなものです。 > セレクター"。

以下の例を参照してください。

構文

load(url,[data],[callback])
ログイン後にコピー
callbackコールバック関数
$("#feeds").load("feeds.php", {limit: 25}, function(){
  alert("The last 25 entries in the feed have been loaded");
});
ログイン後にコピー
例 2
パラメータ 説明
url ロードされるHTMLページのURL。
data サーバーのキー/値データに送信します。jQuery 1.3 では、
も受け入れることができます。例 1 例は上記と同じですが、追加のパラメーターを POST として送信し、成功時にメッセージを表示します:
記事のサイドバー

ナビゲーション

セクションを順序なしリストにロードします:

HTML コード:

<b>jQuery Links:</b>
<ul id="links"></ul>
ログイン後にコピー

jQuery コード:

$("#links").load("/Main_Page #p-Getting-Started li");
ログイン後にコピー
例 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="//m.sbmmt.com/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="//m.sbmmt.com/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>
ログイン後にコピー

以上がjQueryのHTML()とLoad()の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート