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は【.】で結合させて記述。
jQueryのAPI
Core(コア)・Selectors(セレクタ)・Attributes(属性)・Traversing(トラバース/横断)・Manipulation(操作)・CSS(スタイルシート)・Events(イベント)・Effects(エフェクト)・Ajax(エイジャックス)・Utilities(ツール)のカテゴリに分類されている。
jQueryのダウンロード
※DL方法は教科書P18参照
読み込みと記述場所
どこに記述しても良いが基本的にhead内に記述(DLした場合)する。またその際にcssの読み込み記述後に記述する。(処理速度でページの表示の妨げにならないようにする)
<script src="js/jquery-バージョン.min.js></script>
バージョンの違い
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の使用方法
画面を下にスクロールさせると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の略でネットワーク経由でコンテンツを利用できる。
例)
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:を除いて記述すればページに合わせた通信形式でライブラリを読み込める。