jQueryの導入方法と、導入後の確認方法

jQuery

こんにちは、ゆんつです。

Webページを作るにはHTMLとCSSが必要になります。

そのHTMLとCSSで作ったWebページに、HTMLやCSSだけでは実現出来ないような動きを付けたり色々な仕掛けをするためにjQueryというプログラムが良く使われています。

jQueryはJavaScriptを簡単に扱えるようにしたプログラムで、僕のようなプログラミングの初心者でも少し勉強するだけで、数行のコードを書くだけで動きのあるページを実現することが出来て便利です。

See the Pen jquery by konpure (@yuntu) on CodePen.0

今日はjQueryの導入方法について書きたいと思います。

スポンサーリンク

2種類の導入方法

jQueryの導入方法は外部からファイルを読み込む方法と、jQueryのファイルをダウンロードし、そのファイルを読み込む方法の2種類の方法があります。

外部からファイルを読み込む方法

とても手軽で簡単な方法です。

headタグの中、又は</body>タグの直前に以下のコードを貼り付けるだけです。

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

たった、これだけでjQueryの導入は完了です。

例)head要素内に書く場合

 
    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
 

例)</body>の直前に書く場合

 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JQuery</title>
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
 

ファイルをダウンロードしなくても、URLをHTMLにコピペするだけで外部からjQueryが読み込まれてすぐに使い始めることができます。

ゆんつ
ゆんつ

とても手軽に導入できますが、外部から読み込んでいるため

オフラインの状態ではjQueryが機能しません

jQueryのファイルをダウンロードしてそのファイルを読み込む方法

jQueryの公式サイトのダウンロードページに行きます。

Download jQuery | jQuery
jQuery: The Write Less, Do More, JavaScript Library

すると「Download the compressed, production jQuery 3.3.1」というリンクがあります。

jQueryのダウンロードページ

そのリンクを右クリックして出てきたメニューから「名前をつけてリンク先を保存」を選択し、jQueryファイルを任意の場所にダウンロードします。

右クリックでファイルをダウンロード

ダウンロードしたjQueryファイル

後は外部のファイルを読み込むときと同様に、head要素内か</body>タグの手前でscriptタグの中でダウンロードしたjQueryのファイルを読み込んであげれば完了です。

 
<script src="jQueryファイルへのパス"></script>
 
ゆんつ
ゆんつ

外部から読み込むよりも導入にひと手間多くかかりますが

オフラインでもjQueryを利用することが出来ます

jQueryが読み込まれているかどうかのチェック

jQueryの導入は終わったものの、きちんとjQueryファイルが読み込まれているか不安な場合は次の方法で読み込まれているかどうか確認することが出来ます。

Chromeを使っている場合

キーボードのF12をクリックして開発者ツールを開き「Source」をクリック。

chromeの場合はsourceで導入出来ているか確認できます

jQueryが読み込まれている場合には、ツリーの一覧に読み込まれているjQueryが表示されます。

FireFoxを使っている場合

キーボードのF12をクリックして開発者ツールを開き「デバッガ―」を選択

FireFoxの場合にはデバッガーで導入の確認が出来ます

jQueryが読み込まれている場合には、ツリーの一覧に読み込まれているjQueryが表示されます。

 

ちゃんとjQueryが読み込まれていることが確認出来たら、後はコードを書いて使うだけです。

ゆんつ
ゆんつ

本日は以上です

それでは、またー。

jQuery
ゆんつをフォローする
スポンサーリンク
スポンサーリンク
こんぷれ

コメント

タイトルとURLをコピーしました