[解決済み] jQueryのdocument.ready関数はいつ使うべきですか?
質問
Javascript/jQueryを使い始めた頃、document.readyを使うように言われましたが、その理由をよく知りませんでした。
いつjavascript/jqueryのコードをjQueryの
document.ready
?
興味のあるトピックをいくつか。
-
jQuery の
.on()
というメソッドを を使っています。.on()
メソッドを使用しています (通常は動的に作成される DOM 要素で)。この場合.on()
クリックハンドラ 常に する 内部document.ready
? - パフォーマンス 様々なjavascript/jQueryオブジェクトを保持することは、よりパフォーマンス的に優れているのでしょうか? 内部 それとも 外側 document.ready (また、パフォーマンスの違いは大きいですか?)?
- オブジェクトのスコープ。AJAX でロードされたページでは、オブジェクトが の中にある にあるオブジェクトにはアクセスできませんよね?それらは 外 document.ready の外側にあるオブジェクト(つまり、本当に "global" オブジェクト)にしかアクセスできないのですか?
更新しました。
ベストプラクティスに従うために、私のすべてのjavascript(jQueryライブラリと私のアプリのコード)は、以下の場所にあります。
の下にあります。
にあり、HTMLページの
defer
属性を使用して、AJAXで読み込まれたページのjQueryを含むスクリプトにアクセスし、これらのページでjQueryライブラリにアクセスできるようにしています。
どのように解決するのですか?
簡単に言うと
$(document).ready
はdocument
が が準備できたときに発生するイベントです。
jQueryのコードを
head
セクションに配置し
dom
要素 (アンカー、img など) にアクセスしようとしても、アクセスできません。
html
は上から下へと解釈され、jQueryのコードが実行されるときにはhtml要素は存在しないからです。
この問題を解決するために、すべてのjQuery/javascriptコード(DOMを使用する)を
$(document).ready
関数内に配置し、すべての
dom
要素にアクセスできるようになったときに呼び出される関数です。
そしてこれが、jQueryのコードを一番下(すべてのdom要素の後、</body>
) ,
は必要ありません。
$(document).ready
を配置する必要はありません。
on
メソッドの中に
$(document).ready
を使用した場合のみ
on
メソッドを
document
というのは、上で説明したのと同じ理由です。
//No need to be put inside $(document).ready
$(document).on('click','a',function () {
})
// Need to be put inside $(document).ready if placed inside <head></head>
$('.container').on('click','a',function () {
});
EDIT
コメントより
-
$(document).ready
は、画像やスクリプトを待ちません。これが$(document).ready
と$(document).load
-
DOMにアクセスするコードだけがready handlerにあるべきです。プラグインであれば、readyイベントにはないはずです。
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] JavaScriptで二重引用符と単一引用符はいつ使うべきですか?
-
[解決済み] HTMLマークアップのどこに<script>タグを記述すればよいですか?
-
[解決済み] varキーワードの目的と、どのような場合に使用する(または省略する)べきですか?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] JavaScriptとLuaの微妙な違い [終了しました]
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 投稿前に何かをするには?
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] JavaScriptのtoString()関数をオーバーライドして、デバッグ用に意味のある出力を提供することは可能でしょうか?
-
[解決済み] Javascript / jQueryでAndroid端末を検出する。
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法