jQuery関数の配置

最近、jQueryの学習を始めましたが、jQueryのウェブサイトから少し離れたアニメーションプログラムに問題があります。ここに問題があります。このプログラムは動作します：jQuery関数の配置

<HTML> 
<HEAD> 
<script type="text/javascript" src="javascript/jQuery-1.7.1.min.js"></script> 

<STYLE type="text/css"> 

#content { 
    background-color:#6688ff; 
    position:absolute; 
    width:100px; 
    height:100px; 
    padding:3px; 
    margin-top:5px; 
    left: 100px; 
} 
</STYLE> 
</HEAD> 
<BODY> 
<input type="button" id="left" value="Left"/> 
<input type="button" id="right" value="Right"/> 
<div id="content">Move</div> 
<script type="text/javascript"> 
$("#right").click(function() { 
    $("#content").animate(
      {"left": "+=50px"}, 
      "slow"); 
}); 
$("#left").click(function() { 
    $("#content").animate(
       {"left": "-=50px"}, 
      "slow"); 
}); 
</script> 

</BODY> 
</HTML>

しかし、このプログラムはしていません：私はjavscriptを置く場所

は、2つのプログラム間の唯一の違いはある

<HTML> 
<HEAD> 
<script type="text/javascript" src="javascript/jQuery-1.7.1.min.js"></script> 

<script type="text/javascript"> 
$("#right").click(function() { 
    $("#content").animate(
      {"left": "+=50px"}, 
      "slow"); 
}); 
$("#left").click(function() { 
    $("#content").animate(
       {"left": "-=50px"}, 
      "slow"); 
}); 
</script> 

<STYLE type="text/css"> 

#content { 
    background-color:#6688ff; 
    position:absolute; 
    width:100px; 
    height:100px; 
    padding:3px; 
    margin-top:5px; 
    left: 100px; 
} 
</STYLE> 
</HEAD> 
<BODY> 
<input type="button" id="left" value="Left"/> 
<input type="button" id="right" value="Right"/> 
<div id="content">Move</div> 


</BODY> 
</HTML>

、そのためには違いが、なぜ誰も私を説明できますか？ありがとう、それは私を混乱させる原因です。

出典

2012-02-26 Jack Davis

2番目のjQueryコードチャンクが実行されてもドキュメントは準備ができていないため、動作しません。

常に

$(document).ready()声明の中で、あなたのjQueryのコードをラップ：

$(document).ready() { 
    $("#right").click(function() { 
    $("#content").animate({"left": "+=50px"}, "slow"); 
    }); 

    $("#left").click(function() { 
    $("#content").animate({"left": "-=50px"}, "slow"); 
    }); 
});

あなたの2番目のコードチャンクは正しいです。

出典

2012-02-26 05:56:58 Blender

いつも？あなたはあなたのスクリプトブロックを身体の最後に置くことができます... – nnnnnn

なぜあなたはそれをしたいですか？ – Blender

なぜですか？スクリプトを最初に解析することなく、実際のページをレンダリングしてブラウザを立ち上げることができます。本文の最後にあるdocument.ready（またはonload）とスクリプトの先頭にあるスクリプトは、それを実行する最も一般的な方法の2つです。 – nnnnnn

ブラウザはHTMLタグとjavascriptを上から下にロードしますが、これらのhtml要素の前に置くと動作しません。実行時にhtmlタグが見つからない場合、jQueryの準備ができますhttp://api.jquery.com/ready/

出典

2012-02-26 05:58:34

すべての要素が事前にロードされるように、CSSはjavascriptの前に来る必要があります。

出典

2012-02-26 05:58:45

css？あなたはhtmlを意味します。 – nnnnnn

私は、CSSがDOMの上位に表示されることを意味します。js –

CSSがJSの後ろにあるかどうかは関係ありません.HTML要素が重要な場合は重要です。 – nnnnnn

rightが宣言される前に、2番目のコードブロックが#rightを参照しています。

出典

2012-02-26 05:59:29

答えて

関連する問題