jqueryの組み込みができない！？ダウンロードしても動かない！？
- jqueryのダウンロードサイトから最新版のjquery-1.8.2.min.jsをダウンロードし、組み込んだり配置を変えたりしても動作しない。
- buttonをクリックしても非表示範囲が表示されない問題について、ソースコードを掲載。
- smoothな動作を実現したいが、どのような原因で動作しないのかを知りたい。
- ベストアンサー
jqueryの組み込みが出来ません…
jqueryのダウンロードサイトから最新番（current？）のjquery-1.8.2.min.jsをダウンロードして、head間に組み込みして、buttonをクリックしたら非表示範囲が表示されるという動作を練習しているのですが、機能してくれないです（涙 何がいけないのかさっぱりわかりません…。 jsファイルを外部かしてみたり、bodyとhtmlタグの間に記述してみたりしたのですが、それでも動作してくれません…。 何がいけないんでしょうか？？ 下記にソースを書いておきますので、わかる方いらっしゃったらご教授おねがいします<m(_ _)m> <!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> <script type="text/javascript"> $("button").click(function(){ $("p").show(slow); )}; </script> <style type="text/css"> <!-- *{ margin:0px; padding0px; outline:none; } p { width:200px; height:200px; background:red; display:none; } --> </style> <!--[if it IE9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <button>Show it</button> <p></p> </body> </html> あのなめらかな感じで動作させてみたいんです。
- 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がある状態)
お礼
回答有難うございます。 クオート忘れ…、気付けませんでした。 これから確認をもっと慎重にしていきたいと思います。
関連するQ&A
- Jquery と JqueryUIについて
現在、Jquery と JqueryUIを使ってプログラムを書いています。上手く動作しないので以下について教えてください。 やりたいことは、ボタンを押すと文字があらわれたり消えたりするという動作を実現したいと思っていますが、今は、ボタンと文字が表示されるのみで、ボタンを押しても全く動きません。 現在書いているコードは以下のとおりです。 ---- <html> <head> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <script> $(function() { $('#button').click(function(){ $('#sample-text').show(); }); }); </script> </head> <body> <input type="button" id="button" value="ボタン"> <p id="sample-text">Hello World!</p> </body> </html> ------------------- Jqueryのバージョンは、最初、UIとの互換性を考え、1.3.2を使っていましたが、動かないため、現在は新しいバージョンで試してみたところです。(１．４．４でもだめでした） JSファイルの場所は、上記htmlファイルと同じ階層のjsディレクトリ内です。 また、補足ですが、これが上手くいけば、script内の show メソッドのかわりに ｔoggleを使いたいと考えています。 上記コードで間違っている部分がわかる方がいらっしゃいましたら教えてください。 よろしくお願いいたします。
- ベストアンサー
- AJAX
- jqueryとlightboxが一緒に動作しない
jqueryとlightboxを1頁内に記述しているのですが、どちらか一方だけしか動作しません。 jqueryの記述の箇所とlightboxの記述の箇所を上下させると片方が動作し、片方が動作しないという具合です。 最後に設定した方が実行されるようです。どこを修正すればいいのかまったくわかりません。 両方動作させることはできませんか？ ソースコードは以下のようになっています。 <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta name="Keywords" content="XXX,XXX" /> <meta name="Description" content="XXX,XXX" /> <title>XXXXXX</title> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="XXX.css" type="text/css" /> <script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> <!--menu_headクラスを持つp要素にマウスオーバーされた時に、menu_bodyクラスを持つ要素をスライドする--> $(function() { $("#menu_list p.menu_head").mouseover(function() { $(this).css({backgroundImage:"url(img/left-side-a.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow"); $(this).siblings(); }); }); </script> <!-- コメント --> <link href="css/lightbox.css" type="text/css" rel="stylesheet" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> <!-- コメント --> <style type="text/css"> /* */ }/* <![CDATA[ */ a img{border:0 none} /* ]]> */ </style> </head> 宜しくお願いします。
- ベストアンサー
- インターネットビジネス
- jQueryでajax
ajax（jQuery使用）を使った以下のサンプルは、 セレクトボックスを選択すると、ボタンを表示するのですが、 そのボタンをクリックしても、アラート（This is success!）が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが 検知しないような感じですが、いったいどこが間違っているのかわかりません。 どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目１</option> <option value="2">項目２</option> </select> <p>結果：</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>
- ベストアンサー
- AJAX
- jquery.bgSwitcherが設置できない
私は、いまbgSwitcherの設置ができなくて悩んでいます。 「fadeOut」を利用したいのですが、画像は表示されるのですが、そこから何も動きません。 だれか分かる方がいらっしゃれば是非教えていただきたいので、宜しくお願いします。 ▼私の現在の状況************************************************************ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <TITLE>○○○</TITLE> <META name="keywords" content="○○○"> <META name="description" content="○○○"> <meta name="robots" content="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/lightbox/js/prototype.js"></script> <script type="text/javascript" src="js/lightbox/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="js/lightbox/css/lightbox.css" type="text/css" media="screen"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.bgSwitcher.js"></script> <script> jQuery(document).ready(function($) { $('#fadeOut').bgSwitcher({ images: ['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg'], interval: 2000 }); }); </script> </head> <body> <div id="wrap"> <div id="container"> | 途中は省略 ↓ <div id="fadeOut" class="bg"><p><img src="images/top_main.png" width="670" height="450" /></p></div> | ↓ 以下省略。 ちなみに「class="bg"」は、 .bg { width: 640px; height: 415px; margin: 0; padding: 0; } こういった感じです。 *************************************************************************** これで、なぜ動かないのでしょうか？ このプラグインは、jquery.bgSwitcher.js 自体を何か編集する必要があるのでしょうか？ 開発された方のサイトを隅から隅まで見ても分かりませんでした。 ▼開発者様のサイト http://rewish.org/javascript/jquery_bg_switcher ちなみに、jQueryのバージョンは、jquery-1.7.1.minです。 どなたか、ご助力をお願い致します。
- 締切済み
- JavaScript
- jquery uiが動かない
jquery uiが動きません。 何度も見直し、プログラムを書いてもどこがいけないかわかりません。 教えていただけたら幸いです。お願いいたします <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> </head> <body> <div id="box">box</div> <style> #box{ width:100px; height:100px; background:red; } </style> <script> $(function(){ $("#box").draggable( axis: 'x'; ); }); </script> </body> </html>
- ベストアンサー
- JavaScript
- jQueryで質問です。
jQueryで質問です。 オブジェクトA、Bがあるとします。 Aをドラッグすると、mousedownかdragstartの段階で要素がBに置き換わってドラッグさせるような動きは可能でしょうか。 作成中のソースを記載します。 <html> <head> <title>test</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./ui/jquery.ui.core.js"></script> <script type="text/javascript" src="./ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="./ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="./ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="./ui/jquery.ui.droppable.js"></script> <script type="text/javascript"> $(function(){ obj1 = $("#box"); obj2 = $('<div style="width:200px;height:200px;background:red;">B</div>'); obj1 .mousedown( function(){ obj1.replaceWith(obj2); obj2.draggable(); } ); }); </script> </head> <body> <div style="width:200px; height:100px; background: #cccccc;" id="box">A</div> </body> </html> これだと、Aのドラッグを一度解除して、Bをドラッグすると上手くいきますが、1回のモーションでBをドラッグさせたいのです。 宜しくお願いします。
- ベストアンサー
- JavaScript
- jqueryを使った共通html埋め込みができない
各ページに共通なヘッダ部分を、jqueryを使って読み込みたいと以下のコードを書いたのですが、なぜか読み込まれません。 test.htmlとheader.htmlは同階層（トップレベル）にあって、jsディレクトリにjquery-1.7.1.min.jsを置いています。 どうか知恵をお貸しください。 よろしくお願いします。 test.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> <!–- $(function(){ $("#header").load("header.html"); }); // -–> </script> <title>test</title> </head> <body> <div id="header"></div> main </body> </html> header.html <div id="header">header</div>
- ベストアンサー
- JavaScript
- jqueryを使ったスクロール画面が正しく作動しません。
jqueryを使ったスクロール画面が正しく作動しません。 HTMLに関する質問コーナーにはふさわしくない質問かもしれませんが、jquery.jstocktickerを使ったスクロール画面に関して教えて欲しいことがあります。 以下のようなものを書いてみました。しかし、スクロールされるべき文字（この場合は「テスト」）が右からでてきません。左端に現われてすぐに消えてゆきます（一様左にスクロールされながら消えるのですが）。 どこが間違っているのかをご指摘していただければと思い、投稿させていただきました。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>スクロール</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jstockticker-1.1.js"></script> <link href="jQuery/innerFade/css/reset.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/fonts.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/jq_fade.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() {$("#ticker").jStockTicker({interval: 5});}); </script> <style type="text/css"> div#tickercontainer{width: 680px;margin-left:auto;margin-right:auto;position:relative} div#wrap{position:relative;padding:5px; overflow: hidden} div#ticker{position:relative} div#ticker span{padding-right:20px} </style> </head> <body> <div id="tickercontainer"> <div id="wrap"> <div id="ticker"> <span> テスト</span> </div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- JQuery のCSVについて
JQuery のCSVについて JQCSV というプラグインを検討していますが、動作が不安定なことが見出されました。状態・対応の方法をお教えください。（IE6.0) <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="subf/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="subf/jQCSV.js"></script> <script type="text/javascript"> var qRec; $(function (){ $.get("camData.csv",function(text){ qRec =$.csv()(text); }); alert("AAA"); alert(qRec[1][0]); $.get("refA.txt",function(text){ alert(text); $('#tell').html(text); }); }); </script> </head> <body> <div id="tell">aaa</div> </body></html> 上のコードで、alert("AAA") をコメント行とすると、alert(qRec[1][0]); 以下が動作しません。 これはどのような現象でしょうか。対応法はありますでしょうか。
- 締切済み
- JavaScript
- Ajaxを実装しても、どれもうまく作動しない
下記の内容のhtmlファイルと、以下のコードで読み込んだjsファイルをサーバにアップしたところ、各ブラウザともAjaxが作動しませんでした。 jsファイルは正しく読み込まれており、スクリプトエラーも発生していません。 原因がお分かりになる方、ご回答願います。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>サンプル</title> <style type="text/css"><!-- .mainText { background-color:#ffd; color:red; border:1px solid black; visibility:hidden; } .showText { visibility:visible; } --></style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"><!-- $(document).ready(function(){ $("#btn").click(function(){ $("p").addClass("showText").fadeIn("slow"); }); }); // --></script> </head> <body> <h1>jQuery : サンプル</h1> <form> <input type="button" value="Click" id="btn"> </form> <p class="mainText">ここの段落がエフェクトにより表示されます。</p> </body> </html>
- 締切済み
- AJAX
お礼
回答有難うございます。 お陰様で明確にどこがいけないのか、何がいけないのかがはっきり分かり、とても感謝です♪ Script正直舐めてました。 読み込みのタイミングまで指定しないとダメなんですね…。 ＄（）.ready（function（）｛ ｝）；←これが必要なんですね 。 多少自信有ったんですがやっぱりまだまだです、とても勉強になりました。 if it IE ９ が if lt IE ９ … 全く気付きませんでした。 本気でどこも間違ってないと思い込んでたので間違いを正して頂き、心から感謝です。 有難うございます♪