jQueryの文書処理プログラムの詳しい説明_jquery-jsチュートリアル-php.cn

jQueryの文書処理プログラムの詳しい説明_jquery

WBOY

リリース： 2016-05-16 09:00:14

オリジナル

3072 人が閲覧しました

この記事の例では、jquery ドキュメント処理プログラムについて説明します。参考のために全員と共有してください。詳細は次のとおりです。

jquery ドキュメントハンドラー

いわゆるドキュメントハンドラーは、jquery で提供される $(document).ready イベントを指します。このイベントは dom がロードされた後にトリガーされますが、window.onlaod と body.onload はどちらもページが完全に読み込まれた後にトリガーされます。ロードされています。

jquery ドキュメントハンドラーの概要

jquery では、dom がロードされた後に処理ロジックを実装する場合、$(document).ready() イベントを使用するだけで済みます。このイベント関数を「jqueryドキュメントハンドラ」と呼びます。

次のステートメントは、ページ上のどこにでも（外部 js ファイルでも）記述できます。

$(document).ready(function (){ alert("document.ready")});

ログイン後にコピー

アラートステートメントは、ページの dom がロードされた直後に実行されます。ページ上にロードする必要のある大きな画像、js ファイル、その他の外部リソースがある場合、jquery のドキュメント処理プログラムがそれらの前に実行されますが、window.onload と boyd.onload はすべてのリソースファイルがロードされた後に実行されます。

ready() 関数は、jquery の「イベント関数」で提供される jquery オブジェクト関数であり、署名ビット ready(fn) が付いています。

fn は、ready イベントが発生したときに実行される関数です。

これは jquery オブジェクト関数であるため、任意の jquery オブジェクトで呼び出すことができることを意味します。

$("body").ready(function (){ alert("body.ready")});

ログイン後にコピー

上記のステートメントは次と同等です。

$(document).ready(function (){alert("body.ready")});

ログイン後にコピー

ready() 関数は任意の jquery オブジェクトで使用できますが、使用する場合はオブジェクトに ready イベントがあるかどうかに注意する必要があります。

簡略化された形式「$(fn)」を使用することもできます。

$(function (){….})
//等效于$(document).ready(function(){…});

ログイン後にコピー

jquery のすべてのイベントオブジェクトと同様に、$(document).ready イベントは発生した順序で実行されます。

たとえば、$(document).ready イベントは 2 回呼び出すことができます。

$(document).ready(function (){alert("document.ready-1")});
$(document). ready(function (){alert("document.ready-2")});

ログイン後にコピー

dom がロードされると、最初に「document.ready-1」が出力され、次に「document.ready-2」が出力されます。従来型を使用する場合:

window.onload=function(){…..};

ログイン後にコピー

上記のコードは、window.onload の元のイベントを処理し、新しいイベントをバインドします。

jquery ドキュメントハンドラーの利点

ページの読み込み時にスクリプトを実行する必要がある場合、ほとんどのスクリプトを $(document).ready() イベントに配置できます。

jquery ドキュメント処理プログラムの利点を例証する前に、まず javascript プログラミングの一般的なエラー、つまり dom がロードされる前に dom モデルを変更することを見てみましょう。

従来の javascript プログラミング。次の例のように、スクリプトモジュールがページの先頭または末尾に直接挿入され、コードが記述される場合があります。

<!doctype html public "-//w3c//dtdxhtml 1.0 
transitional//en""http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jquerystorm – 常见错误编程方式举例</title>
  <scriptlanguage="javascript"type="text/javascript"src="../include/jquery-1.7.1.js"></script>
</head>
<body>
<!-- 页面内容部分 –>
<div id="divmsg" style="border:solid 1px#000000;padding:20px;"></div>
<!-- 尾部模块 -->
<script language="javascript" type="text/javascript">
  //这条语句在某些情况下会导致错误
  document.getelementbyid("divmsg").innerhtml="<divstyle=\"border:solid 2px #ff0000\">动态添加的图层</div>";
</script>
</boyd>
</html>

ログイン後にコピー

この例はすべてのブラウザでうまく動作しますが、隠れた危険性があります。ページがロードされると、新しい div オブジェクトが divmsg コンテナに追加されるため、つまり dom オブジェクトが追加されます。ネットワーク速度が遅くなったり、ページが大きくてロードに一定の時間がかかる場合、「操作を中止しました」というエラーが発生します。

このエラーは、テスト中に見つけるのが難しいため、google ホームページ、淘宝網、その他の有名な web サイトでも表示されています。

したがって、web 開発を行うときは、dom のロード時に dom 構造を決して変更しないという 1 つの真実を覚えておく必要があります。

ページの読み込み時に dom 構造を変更する必要がある場合、元の方法では、window.onload イベントと body.onload イベントを通じて実装します。たとえば、上記のエラーの例の場合、次のように変更できます。

<script type="text/javascript">
Window.onload=function()
{
  Document.getElementById("divMsg").innerHTML="<divstyle="\border:solid 2px #FF0000\">动态添加的图层</div>";
};
</script>

ログイン後にコピー

具体的な実装方法は多数あります。これら 2 つのイベントは dom がロードされ、すべてのページリソースがロードされた後に実行されるため、window.onload と body.onload を使用します。これが最も簡単な方法です。または、「document.readystate」に基づいて dom の状態を判断し、「complete」であれば特定の操作を実行します。この原理は、jquery の文書処理プログラム $(document).ready の内部で使用されます。

この記事が jquery プログラミングのすべての人に役立つことを願っています。