[初心者向け] jQueryを使う時のファイルの読み込み方

jQueryを使う時に必要な下準備を整理する。

0.1 jQueryのスクリプトをHTMLファイルに読み込む。
0.2 jQueryを書き込むファイルもHTMLファイルに読み込む

1 全体像を把握する

jQueryのスクリプトをHTMLファイルに読み込む。

下記のスクリプトをHTMLへ埋め込む。

バージョンについては最新版を常に確認しておく。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

HTMLへの埋め込みはhead内に埋め込むこと。

<!DOCTYPE html>
<html>
 <head>
  <title>ページのタイトル</title>
  <meta charset="UTF-8">
　<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 </head>
 <body>
   <h1>Hello World!</h1>
 </body>
</html>

jQueryを書き込むファイルもHTMLファイルに読み込む

jQueryを書き込むファイルも、HTMLファイルに読み込む。

今回jQueryを各ファイル名を「script.js」とする。

script.jsは<body></body>内に記述する。

<!DOCTYPE html>
<html>
 <head>
  <title>ページのタイトル</title>
  <meta charset="UTF-8">
　<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 </head>
 <body>
   <h1>Hello World!</h1>
　　<script src="script.js"></script>
 </body>
</html>

この２ステップで、script.jsで記述したjQueryが読み込まれるようになる。