jQueryの読み込み方

投稿者: | 2020年5月24日

まずはjQueryを使える状態にしましょう。
jQueryはライブラリを読み込まないと動きません。

まずはサイトからダウンロードする必要があります。
https://jquery.com/

ダウンロードボタンからファイルを入手しましょう。
ダウンロードしたファイルをhtmlのhead内に読み込めば準備完了です!

<!doctype html>
<html lang="jp"><head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title>jQuery</title> 
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
</head>
<body> 
   <p>jQuery</p>
</body>
</html>

jQueryのように頻繁に呼び出す必要があるファイルは「CDN」という効率的に管理する仕組みが用意されています。

https://code.jquery.com/

上のサイトから、コードを取得しましょう。ここから読み込んでいいのですね。
ネットにつながっている環境であれば問題なくうごくので、CDNで読み込むのもいいでしょう。次のような形になります。

<!doctype html>
<html lang="jp"><head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title>jQuery</title> 
<meta charset="utf-8">
<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
</head>
<body> 
   <p>jQuery</p>
</body>
</html>

では、簡単なプログラムを作成し、動くようになったか確認してみましょう。

<!doctype html>
<html lang="jp"><head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title>jQuery</title> 
<meta charset="utf-8">
<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
<script>
$(function(){
 $("#red").click(function(){
  $("#red").css("color","red");
});
});
</script>
</head>
<body> 
   <p id="red">jQuery</p>
</body>
</html>

まずは上記ファイルをテキストとして保存して「ブラウザ」で開いてみてください。
「文字をクリックすると赤くなる」という単純なプログラムが記載されています。

jQueryがない時のエラー

上の読み込み作業をしないとどうなるでしょうか?
読み込みを忘れて、jQueryの記述をしてしまった場合の
「chrome」でのエラーの解決方法です。

右クリックで「検証」をクリックすると「検証ツール」を利用することができます。

青い下線のある「console」を選んでみましょう。
エラーがある場合はここに出てきます。
また、開発者用にプログラムの情報を出力する際にも利用しますので覚えておきましょう。

$ is not defined
となっていますね。これは、ライブラリが読み込まれていないため「$」の記号が理解できなかったという意味です。
このエラーが出た場合はライブラリの読み込み忘れを疑いましょう。
解決方法はもちろん、このスクリプトの前にjQueryライブラリを読み込むことです。