2012-03-11 10 views
6

jQueryのdocument.readyとちょっと混乱します。jQuery document.ready

いつあなたは $(document).ready()の中でjavascript関数を定義しますか?

すべてのJavaScriptコードを$(document).ready()内に入れるだけで十分ですか?

これをしないとどうなりますか?

例えば、私はstuffをクリックすると何かをする通常のjQueryセレクタを使用します。 document.readyでこれらをラップしないと、何が危害ですか?

誰かがページが読み込まれる前に分割された秒で要素をクリックした場合にのみ問題が発生するのでしょうか?それとも他の問題を引き起こすことができますか?

答えて

5

ハンドラは、DOMがブラウザによってロードされ、操作する準備ができたときにトリガされます。

使用するかどうかは、カスタムスクリプトを配置する場所によって異なります。スクリプトの実行時にDOMが既にロードされていて、それを操作することができるので、</body>タグを閉じる前に、ドキュメントの末尾に入力するとdocument.readyを使用する必要はありません。ドキュメントの<head>セクションにスクリプトを置く一方場合

あなたはDOMが完全にそれを変更したり、様々な要素にイベントハンドラをアタッチしようとする前にロードされていることを確認するためにdocument.readyを使用する必要があります。この操作を行わずに、たとえば.clickイベントハンドラをボタンにアタッチしようとすると、このイベントはトリガされません。なぜなら、スクリプトが実行された時点でボタンを見つけるために使用したjQueryセレクタが返されなかったからですどの要素でも、ハンドラを正常にアタッチできませんでした。

+0

感謝を。これが奇妙な振る舞いをしているのではないかと思う。 – Dave31415

0

href属性でjs関数を呼び出す場合、ready()にイベントハンドラを追加しても問題ありません。それらをjQueryで追加する場合は、これらのハンドラが参照するオブジェクトがロードされていることを確認する必要があります。このコードは、ドキュメントがready()とみなされた後でなければなりません。これは、ready()コールにいなければならないというわけではありませんが、ready()の中で呼び出される関数で呼び出すことができます。

4

実行する前にDOMがロードされるのを待つコードが必要な場合は、コードを$(document).readyに入れます。コードでDOMが最初に読み込まれる必要がない場合は、$(document).readyの外に置くことができます。

ちなみに、$(function() { })は、ドキュメントの最後にスクリプトを持っている場合は、あなたがdocument.readyを必要といけない$ (document).ready();

$(function() { 
    //stuff here will wait for the DOM to load 
    $('#something').text('foo'); //should be okay 
}); 

//stuff here will execute immediately. 
/* this will likely break */ 
$('#something').text('weee!'); 
+1

ありがとう! '$ function()' –

+0

についてそれは分かりませんでした。その構造のために、あなたは技術的に関数参照を '$()'に渡すことができ、文書が準備できたら '$(myfunction)'を呼び出すことができます。閉鎖が少ないために髪をメモリに保存します。 –

+0

もう一度やり直すことができます: '$(document).ready(myfunction)'は '$(myfunction)'と同じです –

1

のために短い手です。

例:ボタンがあり、クリックするとアラートを表示する必要があります。 clickイベントをバインドするには、document.readyにボタンを置くことができます。 jqueryスクリプトをドキュメントの最後に書くことも、要素がマークアップに読み込まれた後にjqueryスクリプトを記述することもできます。

document.readyイベントにすべてを書き込むと、ページがスラッグになります。

6

いつあなたは$(document)内でjavascript関数を定義しますか?準備ができていますか?

関数がグローバルにアクセス可能である(アプリケーションの設計が悪い可能性がある)場合は、readyハンドラの外側に定義する必要があります。

すべてのJavaScriptコードを$(document).ready()内に入れるだけで十分ですか?

上記を参照してください。

これをしないとどうなりますか?

JavaScriptコードの動作状況とその場所によって異なります。最悪の場合、DOM要素が存在する前にアクセスしようとしているため、実行時エラーが発生します。これは、コードがheadにあり、関数を定義するだけでなく、既にDOM要素にアクセスしようとしている場合に発生します。

例えば、stuffをクリックすると何かをする通常のjQueryセレクタを使用します。 document.readyでこれらをラップしないと、何が危害ですか?

「害」自体はありません。 DOM要素がまだ存在しないため、スクリプトがheadにある場合は機能しません。つまり、jQueryはハンドラを見つけてバインドできません。
しかし、スクリプトを閉じるbodyタグの直前に置くと、DOM要素が存在します。あなたは、DOM要素にアクセスreadyイベントハンドラ内またはDOMがロードされた後にのみ呼び出される関数にこれらの呼び出しを配置し​​たい時はいつでも


は、安全側にするには。 jQuery tutorialとして

は(あなたがそれを読んでください)すでに述べ:

のjQueryを使用すると、ドキュメントオブジェクトモデル(DOM)を読み取るか、または操作するときに我々がそうであるように、ほとんどすべてのもの、私たちは追加を開始することを確認する必要がありますイベントなどが表示されます。

これを行うには、ドキュメントの準備完了イベントを登録します。

$(document).ready(function() { 
    // do stuff when DOM is ready 
}); 

より完全な例を挙げれば:

<html> 
    <head> 
     <!-- Assuming jQuery is loaded --> 
     <script> 

      function foo() { 
       // OK - because it is inside a function which is called 
       // at some time after the DOM was loaded 
       alert($('#answer').html()); 
      } 

      $(function() { 
       // OK - because this is executed once the DOM is loaded 
       $('button').click(foo); 
      }); 

      // OK - no DOM access/manipulation 
      alert('Just a random alert ' + Math.random()); 

      // NOT OK - the element with ID `foo` does not exist yet 
      $('#answer').html('42'); 

     </script> 
    </head> 
    <body> 
     <div id="question">The answer to life, the universe and everything</div> 
     <div id="answer"></div> 
     <button>Show the answer</button> 

     <script> 
      // OK - the element with ID `foo` does exist 
      $('#answer').html('42'); 
     </script> 
    </body> 
</html> 
+0

関数foo()が除外される理由はありますかdocument.ready other範囲よりも?これはちょうどコンベンションですか、それともパフォーマンスのような理由がありますか?グローバルスコープを使うときは、 "window.foo = function(){};"明示的なスコープターゲティングを使用するこれは、変数を少し前に宣言するJSの実行をプッシュしないで、関数を宣言する前にブラウザがHTMLをロードし続けることを可能にし、何かを(無視できるほど)速くレンダリングさせますか? – Nenotlep

+1

@Nenotlep:準備ができているハンドラの内部で関数を動かすのは、あなたが言及した理由のために*おそらく*高速です。だからこそ、すべてのスクリプトを身体の最後に置くことも良い習慣です。しかし、パフォーマンスへの影響が無視できるものであれば、個人的な好みにもなります。この具体的な例は、 'ready'ハンドラの中に何があるのか​​を実証することでした。 –

関連する問題