【jQuery入門】jQueryファイルを読み込む２つの方法

今回は、jQueryを導入して利用するためにjQueryファイルを読み込む方法を説明します。

jQueryファイルを読み込む方法

jQueryファイルを読み込む方法は、2種類あります。

1. jQueryのサイトからファイルをダウンロードし読み込む方法

ダウンロードしたjQueryファイルを使用するサーバーにアップして読み込む方法です。

jQuery公式ページからダウンロードすることができます。jQuery2.xでは、IE9以上のサポートとなっているので、IE6, 7, 8をサポートする場合はjQueryのバージョン1.xを利用してください。

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

2. jQueryが提供しているCDNを利用する

GoogleなどがCDNで提供しているjQueryファイルを読み込む方法です。

Googleがホストしているファイル

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

jQueryがホストしているファイル

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

jQueryファイルを読み込む時の注意点

jQueryファイルは、必ずjQueryファイルを読み込んだ後にjQueryを使用したコードを書いてください。

jQueryファイルを読み込まずにjQueryを使用したコードを記述しても正常に動作しません。そのため、head要素内でファイル読み込みすることを推奨します。

○正しい順番

<script src="jquery-1.12.0.min.js"></script>
<script>
$("#parent p").css("color", "red");
</script>

×間違った順番

<script>
  $("#parent p").css("color", "red");
</script>
<script src="jquery-1.12.0.min.js"></script>

間違った順番の場合、コンソールで「Uncaught TypeError: $ is not a function()」といったエラーがでます。