1

javascript/jquery を外部に保持すると、コードが機能しません。しかし、それらをhtmlファイルに結合すると、すべて問題ありません。

これがなぜなのかについての提案はありますか？

コードは次のとおりです。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
       <script type ="text/javascript" src="jquery.js"></script>  
       <script type ="text/javascript" src="program.js"></script>
</head>
<body>
    <div id="clickme">
    Click here
    </div>

    <img id="book" src="book.png" alt="" width="100" height="123" />

    <p>First Paragraph</p>
    <p>Second Paragraph</p>
    <p>Yet one more Paragraph</p>

</body> 
</html>

外部JavaScriptで

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});
$("p").click(function () {
     $(this).slideUp();
   });

対

<!DOCTYPE html>
<html>
<head>
    <script type ="text/javascript" src="jquery.js"></script>  
</head>
<body>

    <div id="clickme">
        Click here
    </div>
    <img id="book" src="book.png" alt="" width="100" height="123" />

    <p>First Paragraph</p>
    <p>Second Paragraph</p>  
    <p>Yet one more Paragraph</p>


    <script>
        $('#clickme').click(function() {
      $('#book').fadeOut('slow', function() {
     // Animation complete.
     });
     });

    $("p").click(function () {
    $(this).slideUp();
     });


    </script>

</body>
</html>
4

4 に答える 4

14

DOMの読み込みが完了する前にクリックイベントを実行すると思います。コードをdomreadyイベント内にラップすると、外部javascriptファイルへのパスが正しいと仮定して機能するはずです。

$(function(){

   $('#clickme').click(function() {
     $('#book').fadeOut('slow', function() {
       // Animation complete.
     });
   });
   $("p").click(function () {
      $(this).slideUp();
   });
});

スクリプトエラーが発生した場合は、常にfirebug（コンソール）を使用してスクリプトの何が問題になっているのかを確認してください。

于 2012-06-05T21:44:04.883 に答える
7

ページに要素が表示される前に、JavaScriptが実行されます。これを回避する$(document).ready(function(){...});には、外部のjavascriptファイルを使用するか、下部に移動します。

于 2012-06-05T21:44:54.663 に答える
5

jsコードを外部ファイルにラップします

$(document).ready(function(){

    //your code goes here

});

現在、ヘッダーに外部jsファイルを含めて実行しています。この時点では要素がないため$('#clickme')、$("p")空のセットです。2番目の例では、その要素を使用してhtmlをレンダリングした後にこのコードを実行します。

于 2012-06-05T21:44:51.770 に答える
2

違いがある理由は、ブラウザが DOM を完全に解析する前に外部ファイルでコードが実行されているため、ブラウザがまだ認識していないページの要素にプログラムでアクセスしようとしているためです。これはすでにほとんどの人が言っていることですが、もう少し詳しく説明しましょう...

多くの人が jQuery のドキュメント対応ハンドラーの使用について言及していますが、実行可能な解決策は単にスクリプト タグをページの下部に移動することであることを指摘したいと思います。

これにより、問題が解決されるだけでなく、ブラウザーがスクリプトを処理する方法により、ページの読み込み時間も改善されます。ブラウザーがスクリプトに遭遇すると、実行中の他のすべての操作を停止し (「ブロッキング」操作と呼ばれます)、スクリプトを解析して実行します。これにより、ユーザーの視点からはページが停止しているように見え、ユーザー エクスペリエンスが低下します。このように、スクリプトは検出されたときにのみ解析および実行されるため、スクリプトを一番下に移動することで、JavaScript がレンダリングをブロックしないように、ブラウザがページを完全にレンダリングできるようになります。

ただし、スクリプトをページの下部に移動するだけでなく、他の人が推奨する方法に従い、コード全体をドキュメント対応ハンドラーにラップして、コードが常に正しいタイミングで実行されるように安全を確保します。

また、インラインまたは外部の議論では、外部スクリプトの方が保守が容易であり、ブラウザーがページとは無関係にキャッシュできるため (正しい HTTP ヘッダーが存在する場合)、一般に外部スクリプトが好まれます。

要約すると、ここにいくつかのサンプルコードがあります:

<html>
<head></head>
<body>
<!-- all your markup here -->

<!-- script at bottom, markup already rendered by this point -->
<script type="text/javascript" src="jquery.js"></script>

<!-- inline or external, still wrap in document ready handler -->
<!-- though external is better because the browser can cache it independently of the page -->
<script type="text/javascript">
    //wrap in document ready to be extra safe
    $(function() { /*code here*/ });
</script>

</html>
于 2012-06-05T23:30:29.357 に答える