2

これは、アラートをポップアップするためのクリック ボタンの例です。

<script  type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

上記のパーツを一部入れれheadば動作します。上の部分を下のように入れると動きません。 ここに画像の説明を入力

オープン ソース コードでは、スクリプト ソースを html の最後に配置すると、ページの読み込みが速くなると作者が言っているので、これは私を夢中にさせます。ソースコードが動作しない理由を突き止めるのに多くの時間を費やし、その理由がスクリプトの src 部分の位置にあることがわかりました。

ただし、 http://jsfiddle.net/eSud7/3/でテストする場合 、スクリプトの位置は重要ではありません。

誰でも理由を説明してもらえますか?

私は Google App Engine を使用しており、Firefox ブラウザでテストしています。

追加情報:この無料のテンプレートを使用しています。index.html をダウンロードして確認してください。著者はすべてのスクリプト ソースをドキュメントの最後に配置しており、動作します。どうして？？？？？？？

4

5 に答える 5

3

実際には、スクリプト操作を実行する前に html 要素のみがすばやくレンダリングされて表示され、ページの読み込みが速くなったように見えます。

また、javascript は設計上コンパイルされていないと解釈されるため、行ごとに実行されます。そのため、jquery 関数を要求していて、それらがまだ解釈されていない場合、ブラウザーはエラーをスローします。そのため、最初に jquery を追加する必要があります。ライン。

走ってみてください

<html>
  <body>
    <p> HTML Element</p>

     <script>
      alert("Hello World");
    </script>

  </body>
</html>

対

<html>
    <head>
        <script>
            alert("Hello World");
        </script>
    </head>
    <body>
        <p> HTML Element</p>
    </body>
</html>

または、最初にこれを見てください

一番上で実行されるスクリプト

その後

最後に実行されたスクリプト

それはあなたの概念をクリアします。

参考までにこちらもご覧ください

于 2013-01-16T07:00:52.533 に答える
3

はい、ページの下部にスクリプトを含める必要があるのは事実です。あなたの場合、コアライブラリがロードされる前であってもjquery関数を呼び出しています。関数はライブラリで定義されており、コードが実行されるとこれらの関数を参照する必要があるため、jquery ライブラリの後にスクリプトを含める必要があります。

//At the bottom of the page
<script  type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

<script>

      $(document).ready("#button").click(function() {
      alert('button clicked');
});
  </script>

ただし、 http://jsfiddle.net/eSud7/3/でテストする場合、スクリプトの位置は重要ではありません。

それは、ロード時にjqueryライブラリをロードすることを選択したためです（左側を見てください）。したがって、ライブラリはボディロードのDOMに含まれています。つまり、フィドルでは、ライブラリの指定位置は冗長です

OPコメントの更新

<script>
    $(document).ready("#button").click(function() { //Included at the header, jquery object like $ and function like ready not declared yet !!!
      alert('button clicked');
    });
  </script>

ページの一番下

//Contains all the jquery functions
    <script  type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
于 2013-01-16T06:44:59.267 に答える
2

jqueryの必要な機能を取得できないため、スクリプトは絶対に機能しません。

したがって、このスクリプトのすぐ下にあるスクリプトを使用する必要があります。

<script  type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

<script  type="text/javascript">
  // all your code stuff
</script>

これは従わなければならない順序です。コードをページのどこに配置しても問題ありません。

于 2013-01-16T06:46:10.657 に答える
1

スクリプトは、DOM 1で検出された順序で実行されます

そうです、スクリプト間の順序は重要です。

この場合、スクリプトはjQueryより先に$実行されるため、アクセスしようとするとReferenceError が発生します。それを「修正」するには、スクリプトをjQuery スクリプト要素の下に置きます。スクリプトが:内<head>または下部にあるかどうかは問題ではありませんが、スクリプトの相対的な順序は重要です。<body>

無効な順序付けの簡単なモックアップを次に示します。

<script>
   alert($)  // attempt to use $, but ..
</script>
<script>
   $ = "foo" // .. $ not set UNTIL here (later)
</script>

これらの 2 つのスクリプト要素の順序が逆の場合、予想どおり、"foo" が警告されます。

1 (おそらく、async=true とマークされているものを除きます。これについては説明しません。)

于 2013-01-16T06:45:00.670 に答える
0

この回答は、ライブラリ ソースをページの下部に配置したときに、コードが機能する場合と機能しない場合がある理由が不明な人向けです。

このミステリーにかなり長い間関わった後、私はそれを特集しました。この問題には 2 つの別個の懸念事項があります。1 つはコードの実行に関するもので、もう 1 つはコードのロードに関するものです。

ページの読み込み時にコードを実行しない限り、jquery ソースの配置は問題ではありません。はい、あなたはその権利を読んでおり、それは絶対に正しいです.

例を挙げて詳しく説明させてください。

<script>
    $("#emailInput").change(function(){
        // perform some operations when a change is detected in the input emailInput
    });
</script>

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

上記のコードは、ページが読み込まれたときに実行されます。ご覧$("#emailInput")のとおり、jquery セレクターは、jquery ライブラリーがロードされて実行される前に実行されます (ここで、jquery は $ とそれが行うすべてのことを定義します)。これがエラーUncaught ReferenceError: $ is not defined to throw の原因です。

ただし、ページの読み込み時にコードが実行されない場合、エラーは発生しません。これについても、例を挙げて説明するのが最適です。

<html>
    <head>
        <script>
            function writeMessage(){
                $("#message").html("Surprise ladies!");
            }
        </script>
    </head>
    <body>
        <button onclick="writeMessage()">Click me</button>

        <div id="message"></div>

        <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    </body>
</html>

上記のコードは完全で正しいので、自分で試してみると、まったく問題なく動作します。これはwriteMessage()、ページが読み込まれたときに関数が実行されていないためです。この機能は、ボタンが押されたときにのみ実行されます。これは、ページが読み込まれた後です (その時点までに、jquery ライブラリは既に読み込まれて実行されています)。

コメントで見ました。このリンクでは、ライブラリがロードされたときにコードが機能しています。下部にある jquery src を削除し、再度実行すると、jquery は引き続き機能します。私の最善の推測は、コードはjsfiddleのWebサイトで入手できるライブラリを使用していることです。

これにより、私たち全員が生きてきた謎が明らかになることを願っています。

于 2020-04-24T19:36:32.537 に答える