WEB制作の学習帳

WEB制作を様々な視点から学ぶブログ

jQueryとは

jQueryとはアメリカのJohn Resig氏が中心となって開発したJavaScriptのライブラリ。

jQueryには各種API(Application Program Interface)とプラグインが豊富に用意されていて生産性を飛躍的に向上させることが出来る。

 

jQueryの特徴

jQueryは2006年に最初のバージョンがリリースされて以降、定期的にバージョンアップが繰り返されている。

 

・HTML要素を検索するときCSSセレクタを使用。jQyeryのセレクタCSSと同様、要素セレクタIDセレクタクラスセレクタユニバーサルセレクタグループセレクタ子孫セレクタなどをサポート。他、擬似クラス属性セレクタなどを使用出来る。

 

HTML要素のclass属性にCSSクラスを追加したり削除するためのAPIがサポートされている。またstyle属性に直接CSSプロパティを追加するAPIなどデザイナーにとって便利な機能が用意されている。これらのAPIは【.】で結合させて記述。

 

jQueryAPI

Core(コア)・Selectors(セレクタ)・Attributes(属性)・Traversing(トラバース/横断)・Manipulation(操作)・CSS(スタイルシート)・Events(イベント)・Effects(エフェクト)・Ajax(エイジャックス)・Utilities(ツール)のカテゴリに分類されている。

 

jQueryのダウンロード

http://jquery.com

 

※DL方法は教科書P18参照

 

読み込みと記述場所

どこに記述しても良いが基本的にhead内に記述(DLした場合)する。またその際にcssの読み込み記述後に記述する。(処理速度でページの表示の妨げにならないようにする)

<script src="js/jquery-バージョン.min.js></script>

 

バージョンの違い

f:id:s19biz:20150818200619j:plain

f:id:s19biz:20150818200633j:plain

 

Download jQueryをクリックすると上記のようにバージョンの違いに気付く。

 

1.x系/2.x系の違い

1.x 系は IE8 以前をサポートするレガシーブラウザ向けのバージョン。
2.x 系は IE8 以前のサポートは捨てて、高速に安定して動作させることを目指したバージョンという認識。

 

compressed(圧縮済)

uncompressed(非圧縮)

の意味でコアをいじらない場合、通常、compressedをDLして使う。またcompressedをDLするとjquery-バージョン.min.jsというファイルになる。

min(minifiedの略で小さくされたという意でJQueryの場合、改行されていない圧縮版)

 

1.9以降の注意点

1.9.x系から、削除や変更されたコードがありプラグインが動かない場合があるので対処法として以前のバージョンを使用する方法とjQuery Migrate pluginを使用する方法がある。※1.8までのバージョンで作成したものが1.9以降で動かなくなるおそれがあるのでその場合の対処方法

 

jQuery Migrate pluginを読み込むことにより、 削除された機能や変更された部分をある程度修復してくれる。ただし全部ではなくある程度までは。ということは忘れないこと。

 

jQuery Migrate pluginの使用方法

f:id:s19biz:20150818201633j:plain

画面を下にスクロールさせるとjQuery Migrate pluginという場所があり通常、上のcompressedをDL

 

1.8までで制作したアプリを1.9以降を使って動かす場合の記述方法(ローカル)

 

<script src="js/jquery-バージョン.min.js></script>

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

2行記述する。

 

CDNの利用

Content Delivery Networkの略でネットワーク経由でコンテンツを利用できる。

MicrosoftGoogleが提供している。

 

例)

Google Hosted Libraries

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/使いたいバージョン/jquery.min.js"></script>

 

でローカルにjQueryをDLせず使用出来る。バージョン(2015 8/18現在1.11.3または2.1.4)は使いたいバージョン(過去のバージョンでもOK)で指定可能なので現在のバージョンではないバージョンを使用したい場合、CDNを使うと便利。

またhttp:を除いて記述すればページに合わせた通信形式でライブラリを読み込める。