jQuery/Javascript初心者TAKAが勉強中であります。迷うです（昔、通った道も、脳みそがすでに忘れているという…シクシク）。
思うように働かない、というようなjQueryを書いてしまいました。
<html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="http://hatenablog.com/.shared.js:a5777345174e5dcd46a6e69601286e18:/js/jquery-1.7.2.min.js"></script> </head> <body> <div class="sample1" style="background:yellow">jQuery文より前に表示</div> <script> // jQuery(function(){ jQuery('.sample1').click(function(){ alert('hi!'); }); // }); </script> <div class="sample1" style="background:pink">jQuery文より後に表示</div> </body> </html>
上のソースは、黄色背景の部分は動くかと…。ピンク背景の方が動かない…かと。ソースをコピーし、a0.htmlとでもしてデスクトップに保管し動かしてみてください…。
で、今度は、下のソースをコピペし、a1.htmlとして同様にデスクトップに保存しお試しください。黄背景、ピンク背景どちらもクリックすると「hi!」が表示されるかと妄想しています～…ボヤ～っ・なんとなく…。
<html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="http://hatenablog.com/.shared.js:a5777345174e5dcd46a6e69601286e18:/js/jquery-1.7.2.min.js"></script> </head> <body> <div class="sample1" style="background:yellow">jQuery文より前に表示</div> <script> jQuery(function(){ jQuery('.sample1').click(function(){ alert('hi!'); }); }); </script> <div class="sample1" style="background:pink">jQuery文より後に表示</div> </body> </html>
「//」を２カ所削除しただけなんですけど…、jQuery記述より後の範囲も動作の対象に含めることができるという…。
はい、昔、習いました。プログラムは上から順に実行される、と。で、黄色背景の部分はjQaueryより前なので働く、ピンク背景の部分はjQueryからは幽霊のような存在…ということか。そして、それを「ページが読み込まれた」というタイミング（イベント）に変更するということか…。
いずれ、JSファイルとして外部ファイルとする場合は、HTMLのhead部に関連付けを書くわけで、その時点ではbody部は読み込まれてない、ということで、え～と…今回のようなことが起こるのか…な？
※ボケた爺が備忘録的に書いていることゆえ、穴が空いていたり見落としが合ったりの連続かと思います。「これNG」「こう書くんだよ～」というのありましたら教えてくださいね・ね・ネ
