[JQuery] JQueryを導入する

2016-01-31 JQuery コメント

ここではJQueryをHTMLに組み込む方法について説明します。

JQueryを導入するためには、あらかじめダウンロードしたJQueryファイルを読み込むか、ホストされているJQueryファイルを読み込むかの2通りがあります。

JQueryファイルは、JQuery公式ページからダウンロードすることができます。ページ右上の「Download JQuery」ボタンをクリックします。

JQueryファイルのダウンロードページが表示されるので、導入したいバージョンのリンクをクリックしてダウンロードします。

JQueryをHTMLファイルに組み込むためには以下のように<script>タグを使用します。src属性に設定する値はHTMLファイルから見た相対パスになります。

ダウンロードしたJQueryファイルを組み込む

<!doctype html>
<html>
  ...
  <script src="jquery-2.2.0.min.js"></script>
  ...
</html>

ホストされているJQueryファイルを利用する場合は、<script>タグのsrc属性に、そのURLを設定することで組ことができます。

ホストされているJQueryファイルを組み込む

<!doctype html>
<html>
  ...
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  ...
</html>

JQueryには、1.x系と2.x系の2種類のバージョンが用意されています。各々の違いは主に動作サポートするブラウザにあります。2.x系の方が軽量かつ高速で動作も安定していますが、IE6/7/8はサポート対象外になっています。

対象ブラウザバージョン一覧

JQuery1.x系とJQuery2.x系には、どちらにもcompress版とuncompress版の2種類があります。

compress版は「圧縮版」で、uncompress版は「非圧縮版」になります。前者の方が軽量化されているため、特別な理由がない限りは、compress版を利用した方がよいです。

Programming Style