jQueryを読み込むことができない問題を解決したい。
jQueryを読み込むことができない問題を解決したい。
ただいま参考書をもとにjQueryの学習をしています。
参考書の通りにVSコードにコーディングをしましたが、ブラウザに反映されません。
コーディングの様子はスクショに添付した通りです。
解決策が分かる方がいらっしゃいましたら、教えていただきたいです。
（スクショ１枚目:私が書いたコード ２枚目：参考書のコード）
0
6Answer
VSCodeのスクショのファイルツリーを見ると、index.htmlから見たjquery-3.4.1.min.jsの相対パスは
../../_common/scripts/jquery-3.4.1.min.js ではなく
_common/scripts/jquery-3.4.1.min.js ではないかと思います。
0Like
Comments
@Web46383241
Questioner
ご回答ありがとうございます。いただいたアドバイスの通りにしてみましたが、直らず…です。コンソールにエラーは表示されず、またjQueryを複数回読み込んでいる様子でもないので不思議で…
VSCodeでリンク（下線部）をCtrl+クリックすればリンク先が開くのですが、それは問題ないでしょうか？
0Like
Comments
@Web46383241
Questioner
いつもご回答ありがとうございます。リンクは表示されております…。
- 多分解決策
index.htmlから見てscriptsの中にあるので
多分これじゃないですか?
<script src="./scripts/jquery-3.4.1.min.js"></script>
- vscodeの拡張のすすめ
vscodeを使っているなら、こちらのパスを補完してくれる拡張を入れるのもおすすめします。
Path Autocomplete - Visual Studio Marketplace
- 最終手段
どうしても解決できない場合はCDNを使用するのもいいかと思います。
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
0Like
Comments
@Web46383241
Questioner
ご丁寧にご回答いただきまして、ありがとうございます。CDNという手があることを知らず、さっそく試してみました。しかしながら、解決することができず…。葛藤しながら解決に励んでおります。
もしかしたらjQuery自体は読み込めているのではないでしょうか？
console.log(jQuery)で何が表示されますか？
$('document').ready() // ←が気になります
$(document).ready() // ←ではないですか？
0Like
ちなみにどのようにして実行（ブラウザへの表示）をおこなっていますか？
スクショ3枚目で「C:\Users\～」となっていることが気になります。
（htmlファイルをダブルクリック等しての実行かなと推察）
fileスキーマでhtmlファイルをブラウザに表示させた際、html外のjsファイルはCORS(オリジン間リソース共有)によって実行が止められた記憶があります。
ではどうするかですが、Webサーバを立てhttpスキーマで実行すればよいです。
既にWebサーバを立てて実行されているようでしたら上述の内容は無視してください。
0Like
単純にindex.htmlを下に一旦書き換えてみて、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="_common/scripts/jquery-3.4.1.min.js"></script>
</body>
</html>
該当のindex.htmlをブラウザで開いて、
こういう風にコンソールで$をenterしてみて関数が返ってくるかどうかですかね。
これで関数が表示されないのならちょっと何が原因かわからない。
0Like