- ベストアンサー
jqueryの組み込みができない！？ダウンロードしても動かない！？
- jqueryのダウンロードサイトから最新版のjquery-1.8.2.min.jsをダウンロードし、組み込んだり配置を変えたりしても動作しない。
- buttonをクリックしても非表示範囲が表示されない問題について、ソースコードを掲載。
- smoothな動作を実現したいが、どのような原因で動作しないのかを知りたい。
- ks_okwaveid
- お礼率100% (9/9)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
4つの誤りがありました。 最初の3つは、修正しないと動きません。 最後の4つ目は、修正しないと、ブラウザにゴミが表示され、意図した動作(古いブラウザのHTML5擬似互換)が実現されません。 ＞何がいけないのかさっぱりわかりません…。 このような誤りを見つけるためには、疑わしい部分のみから成る、なるべく単純なテストコードを書いて原因を絞り込んだり、最近のWebブラウザに搭載されているJavaScriptのデバッガ機能を使用すると良いです。 今回の例で言いますと、 ・イベントハンドラが登録されているかを確認。 イベントハンドラの内容を、「alert("OK");」などの、必ず上手く行く筈のコードに置き換えたり、JavaScriptデバッガでイベントハンドラの最初の行にブレークポイントを設定すれば、イベントハンドラが実行されるようになっているか(イベントハンドラが正しく登録されいる)かが判ります。 → 今回の場合、ここがまず正しく登録されていないことが判ります。 ・イベントハンドラの中身が直接実行されるテストコードを書いて確認。 → ここも、エラーになって動かない事が判ります。 では、どこに問題があるかをご説明の上、修正後のコードを示します。 まず、次の記述部分について。 ---------------- <script type="text/javascript"> $("button").click(function(){ $("p").show(slow); )}; </script> ---------------- 1. このコードの実行タイミングの問題 現状の記述位置では、まだブラウザがbuttonタグやpタグを解析していないうちに、このイベントハンドラ登録が実行されてしまうため、ボタンにイベントハンドラが登録されません。 対策方法は幾つかありますが、「jQueryクックブック」という文献で推奨されている方法は、bodyエレメント内の末尾部分に、このように起動時に実行したいコードを置く方法です。 この方法が推奨されている理由を知りたい場合は、参考URLの本を読んでください。 2. 「slow」という記述の誤り ---------------- $("p").show(slow); ---------------- 「slow」がダブルクォートまたはシングルクォートで囲まれていないため、変数とみなされます。 今はイベントハンドラの登録に失敗しており、このコードが実行されていないためエラーになりませんが、実行されるように修正すると、この変数が初期化されていないため、そこでエラーになる筈です。 速度指定をキーワードで指定する場合に、渡す引数値は「文字列」です。 jQueryのshowメソッドの仕様をご確認ください。 3.その次の行の記述の誤り 「 )}; 」 → 「 }); 」です。 これは、メソッドの引数として無名関数を渡している記述です。 それから、次の部分に誤りがあります。 ---------------- <!--[if it IE9]> ---------------- 4. ↓修正後 ---------------- <!--[if lt IE 9]> ---------------- 「lt」は「lower than」の意味でしょう。 このページを閲覧しているブラウザがIE9未満の場合に、「<![endif]-->」までの部分が有効になる、というIEの独自拡張の記述方法です。 IE以外のブラウザでは、ここまでの記述が結果としてHTMLの「コメント」の扱いになり、無視されます。 「IE」と「9」の間には、スペースが必要のようです。 以上の修正をした後のコードは、次のようになります(IE10で動作確認済) ---------------- <!DOCTYPE HTML PUBLIC > <html> <head> <title>notitle</title> <meta charset="shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="cntent-script-type" content="text/javascript"> <meta name="keywords" content=""> <meta name="description" content=""> <script type="text/javascript" src="./jquery-1.8.2.min.js"></script> <style type="text/css"> <!-- *{ margin:0px; padding0px; outline:none; } p { width:200px; height:200px; background:red; display:none; } --> </style> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <button>Show it</button> <p></p> <script type="text/javascript"> $("button").click(function(){ $("p").show("slow"); }); </script> </body> </html> ---------------- 以上です。
その他の回答 (2)
- tracer
- ベストアンサー率41% (255/621)
回答は出ているので補足になりますが、 1.実行のタイミング HTML内の記述は、基本的には上から順に下に向かって読み込まれます。 従って、対象となるp要素が読み込まれる前に、javascript側でpを指定しても認識してくれません。それに対応するには、前にある回答のように、pが登場してから<script>を書くという方法が一番わかり易いですが、反面、管理が煩雑になります。jQueryでは、HTML要素が全て読み込まれてから実行するready関数というものがあります。それを使うと<head>内の<script>ですべての記述を管理できます。 2.$.showの引数 既に回答ある通り、引数はコーテーションで囲む必要があります。 3.結果(全角空白でインデントをつけたのでコピペでは動きません) <script type="text/javascript"> $(function(){ $("button").click(function(){ $("p").show("slow"); )}; }); </script>
お礼
回答有難うございます。 jqueryの初心者向けサイトで.ready()関数が良く説明されてる意味はそういうわけだったんですね♪ 「実行タイミング」と説明されていていまいち意味が解らなかったのですが、やっと納得出来ました。 とても勉強になりました♪ 有難うございます♪
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 試したわけではないのですが $("button").click(function(){ $("p").show(slow); )}; ではなくて $("button").click(function(){ $("p").show('slow'); }); ではないでしょう？ 違いはよく見比べてみてください。 (きちんとjQueryは読み込めている前提です。今の指定ですと同一フォルダ内にjquery-1.8.2.min.jsがある状態)
お礼
回答有難うございます。 クオート忘れ…、気付けませんでした。 これから確認をもっと慎重にしていきたいと思います。
お礼
回答有難うございます。 お陰様で明確にどこがいけないのか、何がいけないのかがはっきり分かり、とても感謝です♪ Script正直舐めてました。 読み込みのタイミングまで指定しないとダメなんですね…。 ＄（）.ready（function（）｛ ｝）；←これが必要なんですね 。 多少自信有ったんですがやっぱりまだまだです、とても勉強になりました。 if it IE ９ が if lt IE ９ … 全く気付きませんでした。 本気でどこも間違ってないと思い込んでたので間違いを正して頂き、心から感謝です。 有難うございます♪