Technology

[jQuery] jQueryを使う際の下準備

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


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が読み込まれるようになる。

-Technology