jQuery読み込みでエラーが発生する理由

2023/11/03 06:22

このQ&Aのポイント

jQueryの読み込みがうまくいかない原因について説明します。
9行目で絶対パスでjQueryを指定しているにも関わらず読み込めない理由について解説します。
英語が読めなくてもエラーの内容を理解する方法についてもご紹介します。

ベストアンサー

jQuery 読み込み

2017/02/07 17:25

jQuery 読み込みソースなのですが <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jqueryの練習</title> </head> <body> <p>jQueryの練習</p> <script src="http://code.jquery.com/jquery-1.10.1min.js"></script> <script> $(function(){ $('p').css('color','red').hide('slow'); }); </script> </body> </html> で9行目と11行目がエラーになります。英語読めないのでエラーの内容はわかりませんが jQueryが読み込めてないのだと思っていてそこで質問なのですが 9行目で「http:～」と絶対パスで指定してるのにも関わらず jQueryを読み込めない理由って何かありますでしょうか？（全く的外れな事を言い出していたらごめんなさい。）

shin11shin
お礼率19% (100/511)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

t_ohta
ベストアンサー率38% (5068/13243)

2017/02/07 17:36 回答No.1

9行目に書いてあるURLをブラウザのアドレスバーに入れてアクセスしてみてください。「404 Not Found」というページが表示されます。そのURLは存在していないと言う意味です。無いモノは読み込めません。正しいURLを設定してください。 1.x系の最新版は 1.12.4 ですので https://code.jquery.com/jquery-1.12.4.min.js か http://code.jquery.com/jquery-1.12.4.min.js になります。

その他の回答 (1)

kteds
ベストアンサー率42% (1876/4424)

2017/02/07 18:08 回答No.2

>http:～」と絶対パスで指定してるのにも関わらず・・・ URLが間違っていませんか。 minの前のピリオドが抜けている。 http://code.jquery.com/jquery-1.10.1.min.js

関連するQ&A

jQueryについて教えてください
現在ドットインストールでjQueryを勉強していますいきなりつまずいたといいますかエラー？があります以下のコードなのですが文字色（<p>）が赤色になりませんなぜでしょうか？このコードではjQueryはDLせずに読み込ませています DLしたほうがいいでしょうか？ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <head> <body> <p>jQueryの練習</p> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function () { $('p').css('color', 'red'); }); </script> </body> </html>
- ベストアンサー
- JavaScript
（jQuery)どこがエラーなのか分からない
●質問の主旨下記のコードはどこが間違いでしょうか？ Javascriptコンソールでも特にエラー表示がされません。ご存知のかたご教示願います ●コードの意図 1．ボタン要素（button）をクリック 2．非表示(none)にされていたdiv要素（赤い正方形）が出現する ●コード（click.html) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptの勉強</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <h1>JavaScriptの勉強</h1> <script> $(function() { $("button").click(function() { $("target").show('slow'); }); }); </script> <p><button id='button'>クリック</button></p> <div id="target" style="display"; none; width: 150px; height:150px; background-color: red;></div> </body> </html>
- ベストアンサー
- JavaScript
ｊQueryが使用できません
現在JavasscriptのｊQueryの学習をしているのですが、ｊQueryがうまくページ上で反映されず、さっそく困っています。下記コードのようにカラー、フォントを指定しているのですが、反映されません。方法としてはgoogleからｊQueryファイルを読み取って利用しようとしています。ブラウザはgooglechoromeを使用しています。 <doctype! html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="http://code.jquery.com/jquery-1.10.1.min.js"> $(function(){ $("h1").css("background-color", "yellow"); $("strong, em").css({ "font-size": "150%", "font-style": "italic", "color": "blue"　}); }); </script> </head> <body> <h1>jQuery</h1> <p><strong>jQury</strong>は便利なJavascriptの<em>ライブラリ</em></p> </body> </html> 解決方法に心当たりのある方、どうかよろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
jqueryでtoggleを無制限に繰り返したい
下記のhtmlテキストのjquery記載部分について質問させていただきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>toggle繰り返し</title> </head> <body> <p>toggle繰り返し</p> <div id="box" style="width:150px;height:150px;background:blue;"> </div> <script src="http://code.jquery.com/jquery-1.10.1.min.js"> </script> <script> $(function() { $('#box').toggle(1000); $('#box').toggle(1000); $('#box').toggle(1000); $('#box').toggle(1000); $('#box').fadeOut(1000, function() { }); }); </script> </body> </html> 上記のhtmlの上から14行目～17行目に記載してあるにあるscript部分に、 $('#box').toggle(1000); を4回記載しているため、 4回、繰り返しフェードアウトが実行されています。 DreamWeaverCS6で作成し、ブラウザIE10、firefox24.0で動作確認しています。ここで質問ですが、この回数を無制限に、つまり永久に繰り返すようにするには、どのようにすればよいのでしょうか？具体的なコードを記載していただけると助かります。詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
DreamWeaverでJS
Webデザイン初心者です。 jQuery初チャレンジということで、DWにてJSファイルを作って、JSのコードを入力したところ結果がHTMLの画面に反映されませんでした汗 "jQuery練習"を赤文字にするだけというロジックのかけらもほとんどないようなコードなんですが、sublimeでは結果は出ました。ですがDWでは駄目でした。『HTMLのファイル』 <!DOCTYPE html> <html lang= "ja"> <head> <meta charset="utf-8"> <title>jQueryの練習</title> <script type="javascript" src="JS練習.js"></script> </head> <body> <p>jQueryの練習</p> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </body> </html> 『JSファイル』 $(function(){ $('p').css('color' , 'red'); }); 何が足りないのでしょうか。ググってもピンポイントででませんでした。すみませんがわざわざお時間を割いていただけるかた、お助けお願いいたします。どなたか教えてください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
Ajaxを使った読み込みができない
●質問の主旨 Ajax（非同期通信）を使って、ブラウザ上でテキストファイルの読み込みをさせたいのですが、できません。 Ajaxにお詳しい方、ご指導願います。 ●質問の補足 HTML5とjqueryの技術を使って、テキストファイルの中身（Hello,World)の読み込みをさせたいと考えております。参考サイトにもとづいてやってますが、画像の表示ができません。表示させるためにはどうしたら良いでしょうか？ ●コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQueryの練習</title> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <body> <h1>jQueryの練習</h1> <div id="main"></div> <input type="button" id="kick_ajax" value="Ajax!"> <script> $(function() { $('#kick_ajax').click(function() { $('#main').load('contents.txt', function() { alert('読み込み終了！'); }); }); }); </script> </body> </html> ●テキストファイルのファイル名 contents.txt ●参考サイト（ドットインストール） http://dotinstall.com/lessons/basic_jquery/519
- ベストアンサー
- AJAX
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">  </style>  </head> <body> <button>Show it</button> <p></p> </body> </html> あのなめらかな感じで動作させてみたいんです。
- ベストアンサー
- JavaScript
jqueryのcolorboxを読込直後に開きたい
ある書籍に記載されていた、以下のサンプルがあります。このサンプルは、画像をクリックすると、colorboxプラグインを使用してモダルダイアログが開きます。これを、ページを開いた直後（クリックせずに、自動的）に開きたいのです。その方法をお教えいただけませんでしょうか。よろしくお願いいたします。 <!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> <title>jQuery - colorbox plugin (Flash Video : Embedded)</title> <link href="base.css" rel="stylesheet" type="text/css" />  <script src="../../scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jquery.colorbox-min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('a.youtube').colorbox(); }); </script> </head> <body> <p> <a class='youtube' href="content/flash.htm" title="Martin Luther King, Jr.'s last speech"> <img src="http://i4.ytimg.com/vi/o0FiCxZKuv8/default.jpg" alt="YouTube (Embedded)" /> </a> </p> </body> </html>
- ベストアンサー
- JavaScript
アコーディオンjquery
ロリポップのサーバーにアコーディオンjqueryをおいています。以下のように設置すると、項目をクリックしたときに下に展開されるのですが chromeだと、左に余白ができてしまいます。 ie9だと、変に余白ができて、テキストがおかしな挙動します。。。なぜでしょうか？ --------------- <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <script type="text/javascript" src="../jq01/jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function() { $("dd").hide(); $("dt").click(function() { $(this).toggleClass("bg2"); $(this).next().slideToggle(); }); }); </script> </head> <body> <dt class="bg1">ああああああああああああああああああああああああああああ</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd> <dt class="bg1">うううううううううううううううううううううううううう</dt> <dd>えええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええ</dd> <dt class="bg1">おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</dt> <dd>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</dd> </body> </html>
- 締切済み
- JavaScript
jqueryが動作しない
jqueryが動作しません。私が行った手順を書きます。jqueryのサイトからdownloadをします。英文だったのでDreamweaverで開いて名前を付けて別名で保存しました。jquery-1.8.0.js拡張子で保存。ソースコードをかいてみました。 <html> <head> <script src="jquery-1.8.1.min.js"></script> // urlを指定した場合です。 <script src="http]//jquery-1.8.1.min .js"></script> </head> <body> <h1>Jquery</h1> <script> $(function(){ $('h1').css('color'.'red'); }); </script> </body> </html> これを保存します。（拡張子は.navi.html) 実行しても動作しません。どうしてでしょうか？
- ベストアンサー
- その他（プログラミング・開発）