SnowNotes
archive

[初心者向け] 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が読み込まれるようになる。

全体像を把握する

下記にHTMLとCSS、Javascriptを使ったwebサイトの作り方についての記事をまとめた。

[st-card myclass="" id=3358 label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore=“on”]

また、コンピューターについての全体像も把握しておくと、web制作の理解にも役立つ。

[st-card myclass="" id=4587 label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore=“on”]