【jQuery】入門2. jQueryをHTMLに組み込む

Posted on 2016-03-08
Last updated on 2018-04-13

こんにちは（・∀・）

jQueryについての超簡単入門講座です。二回三回に分けてご紹介していきます。今回はjQueryを始めるためのStep1「jQueryをHTMLページに組み込む」について簡単に解説していきます。

JavaScriptのオープンソースのライブラリ「jQuery」を使うにはHTMLにjQuery本体を読み込まなければなりません。そうなんです、jQueryを使うには自分で書いたjQueryプログラム(スクリプト)以外にjQueryライブラリという本体も必要となります。ちなみにライセンスはMITとGPLです。

jQueryを読み込む

jQuery本体を読み込むには二つの方法があります。一つはjQueryのサイトからjQuery本体をダウンロードしてきてHTMLに組み込む方法です。

https://jquery.com/download/

jQueryには圧縮版のMinifiedと非圧縮版のUncompressedがあり、通常は改行などが取り除かれた読み込みが早い圧縮版が使われることが多いです。また、現在jQueryには1.x系と2.x系がありますが、使用したいプラグインに合わせると良いと思います。ちなみにjQuery 2.x系はIE8に対応しておりませんので特に必要がなければ1.x系を選んでおけば問題無いと思います。

jQueryをダウンロードして使用する方法

ダウンロードしたjQueryを任意の場所(ここではjsディレクトリ)に保存して、そこから<head>内に読み込みます。


<head>
<script src="/js/jquery-1.12.4.min.js"></script>
</head>

もう一つはWeb上にあるjQueryを直接読み込んで使用する方法です。

ネット上のjQueryにリンクを貼って使用する方法

CDN(Contents Delivery Network)で配信されているjQueryにリンクを貼ればjQueryファイルをダウンロードしなくても直接jQueryを使うことができるようになります。

jQuery CDN


<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>

その他のCDN

Google CDN
Microsoft CDN
CDNJS CDN
jsDelivr CDN

例：Google CDNを利用する場合

Google CDNからjQueryを<head>内に読み込みます。


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

このどちらかの方法でHTMLとjQueryを関連付けたらjQueryを使う準備はできました。続いては自分で書いたjQueryをHTMLと関連付けさせます。

HTMLにjQuery本体を組み込ませただけでは何も起こりません。「ボタンが動いたり色が変わったり」や「テキストが表示されたり消えたり」などの動きのある表現をしたければ(どちらもCSSでできますね、ほかに思いつかなかったもので…)jQuery本体とは別に自分でそういう動きをするjQueryプログラムを書いてHTMLに組み込まないと実現しません。

続いては自分で書いたプログラムをHTMLに組み込む方法についてです。なおjQuery本体はGoogle CDNを使って読み込むパターンで解説していきます。

自分で書いたjQueryプログラムをHTMLに読み込む方法

HTMLに直接書き込む方法

HTMLにjQueryで書いたプログラムを読み込む方法も二つあり、一つはHTMLに直接書き込む方法です。先程読み込んだjQuery本体の後ろに書いていきます。jQuery本体は必ず最初に読み込ませるようにします。


<!--jQuery本体-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!--自分で作るjQueryプログラム-->
<script>
/*ここに「ボタンが動いたり色が変わったり」や「テキストが表示されたり消えたり」などのプログラムを書いていきます。*/
</script>

jQueryを別ファイルに書いてHTMLに読み込む方法


<!--jQuery本体-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!--自分で作るjQueryプログラム-->
<script src="/js/別ファイル.js"></script>

どちらの方法でも良いですが、ここでは別ファイルに書いていく方法で解説していきます。ちなみにjQueryの拡張子は「.js」です。jQueryはJavaScriptのライブラリの一つなのでJavaScriptの拡張子「.js」と同じになります。

続いてはjQueryでプログラムを書いていきます。

次回は【jQuery】入門3. jQueryを書いてみる前の予備知識です。

9月更新・前月(8月)の人気記事トップ10 09/02/2024