-2

これはかなり長い間私の頭を悩ませてきました.1と2の違いを説明できる人はいますか?

  1. (function($){...code...});
  2. $(document).ready(function(){...code...});

私は常にそれらが同じであると考えていました (最初の例で制御できる $ 割り当てを除いて) が、両方が異なる動作を示すことが判明しました。

次の例では、「送信」コードは機能しますが、「リアルタイム検証」コードは機能しません。

<script >
(function($){

 $('input, textarea, select, checkbox').each(function(){
  ... realtime validation code here ...
 });

 $('#subscribe_form').submit(function(){
  ... submit validation code here ...
 });

})(jQuery);
</script>

次の例では、「リアルタイム検証」コードは機能しますが、「送信」コードは機能しません。

<script>
$(document).ready(function(){

 $('input, textarea, select, checkbox').each(function(){
  ... realtime validation code here ...
 });

 $('#subscribe_form').submit(function(){
  ... submit validation code here ...
 });

});
</script>

何が起きてる？

4

4 に答える 4

1

onready の正しい使い方は

$(function () {
        //your code here
    });

$(..)関数をすぐに呼び出したので (関数を作成したときに呼び出したことに注意して(function ...)ください)、コンテキストで DOM の準備ができていない可能性があります。

于 2013-11-05T16:03:26.180 に答える
0

打ち間違え

ない$(function($){...code...});

      ^ added $ here

$(function($){...code...});JavaScript コードで DOM を操作する準備ができたときに実行される jQuery の「<a href="http://api.jquery.com/ready/" rel="nofollow">DOMReady」関数のエイリアスです。これにより、DOM が利用可能であり、アプリケーションによる読み取り、書き込み、その他の変更の準備ができていることがわかっているため、DOM を必要とするコードを作成できます。

于 2013-11-05T16:03:16.900 に答える
0

no 1 はスコープを作成するためだけに使用されるため、スコープ内で (またはパラメーターとして) 宣言した変数は、スコープ内のコードからのみ可視になります。このような関数は、即時呼び出し関数式と呼ばれます。

いいえ 2 は、ドキュメントに適用される準備完了イベント ハンドラーです。これは、ドキュメントの準備ができたときにコールバックが 1 回実行されることを意味します (つまり、すぐにではなく、1 回ではありません)。DOM 階層が完全に構築されると、つまり、スクリプトで DOM 要素を使用できるようになると、ドキュメントの準備が整います。

Javascript は通常、同期的にロードおよび実行されます。これは、DOM にロードされた時点で実行されることを意味します。たとえば、スクリプトタグをヘッダーに配置すると、その部分が構築されたときにスクリプトが実行されます。head 部分が body 部分の前にあるということは、その時点で目に見える要素が構築されていないことを意味します。これは、DOM が上から下に構築されるため、何もアクセスできないためです。そのため、本文の要素を選択しようとする前に、ドキュメントの準備が整うのを待つ必要があります。したがって、ready ハンドラーが必要です。

于 2013-11-05T16:19:39.543 に答える
0

以下は、ページがロードされた後ではなく、すぐに実行されます -- これを使用する jquery ウィジェットの例を見てください。

(function($){

これは、ドキュメントの準備ができるまでコードを実行しないこととはまったく異なります。

于 2013-11-05T16:04:19.083 に答える