Programming Style

メニュー

初心者がアプリ開発者になるためのプログラミング学習サイト

[JQuery] JQueryを導入する

jquery-jquery-import-01

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

 

広 告

 

目次

前提条件

  • 特になし

動作確認端末

  • 特になし

1. JQueryを導入する

 

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

 

jquery-jquery-import-02

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

 

jquery-jquery-import-03

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>

 

 

 

 

2. JQueryのバージョン

 

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

 

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

ブラウザ JQuery 1.x JQuery 2.x
Internet Explorer 6以上 9以上
Chrome 最新版
Firefox 最新版
Safari 5.1以上
Opera 12.1x、最新版
iOS 6.1以上
Android 2.3、4.0以上

 

 

 

3. compressとuncompress

 

 

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

 

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

 

 

 

広 告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です