jQuery逆引きリファレンス
jQueryを利用するには？
jQueryの特徴を簡単に紹介。jQueryライブラリをCDNから、もしくはローカルにダウンロードしてから利用する方法を説明する。
このシリーズでは、何回かにわたって、jQueryの基本機能を目的別リファレンスの形式でまとめていきます。
jQueryとは、John Resig氏によって開発されたJavaScriptライブラリで、以下のような特徴を持っています。
- 「Write less, do more」（より少ないコードで、もっとたくさんのことを）がモットー
- 基本的なページ操作から、イベント処理、エフェクト、非同期通信、標準JavaScriptの拡張など、JavaScriptによるWebページ開発に必要な機能をあまねくサポート
- Internet Explorer 6以上、Chrome、Firefox、Safari 5.1以上、Opera、iOS 6.1以上、Android 2.3／4.0以上など、主要なブラウザーをサポート*1
- ダウンロードサイズは32KBytesと、ごく軽量（minified版をGzip圧縮した場合）
- jQuery UI、jQuery Mobileをはじめ、プラグインが豊富
- *1 バージョンを明記していないものは、最新バージョン-1、最新バージョンをサポートします。
ちなみに、「BuiltWith」というサイトで提供されているJavaScriptライブラリの利用統計を見てみると、じつにインターネット全体の35％ものサイトでjQueryが利用されており*2、jQueryがJavaScriptライブラリのデファクトスタンダードとしての地位を占めていることが実感できます。
- *2 jQueryとjQuery Cycleプラグインを合わせた数字です。
jQueryの導入
jQueryでは、動作に必要なライブラリをCDN（Content Delivery Network）で提供しています。「事前準備が不要」「（一般的には）パフォーマンスに優れる」という理由から、まずはこちらでの利用をお勧めします。
CDNを利用するには、ページに以下のようなコードを含めるだけです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
……ページ本体……
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
……jQueryを利用したコード……
</script>
</body>
</html>
|
「1.11.1」の部分はバージョン番号なので、利用するバージョンによって置き換えてください。
src属性が「http://～」ではなく、「//～」で始まるのは、現在のページで利用しているプロトコルに応じて、ライブラリをインポートするプロトコルも切り替えるためです（＝ページが「https://～」であれば、ライブラリも「https://～」でインポートしようとします*3）。
「//～」に対応したCDNには、以下のようなものがあります。
| CDN | URL |
|---|---|
| jQuery CDN | //code.jquery.com/jquery-1.11.0.min.js |
| Google CDN | //ajax.googleapis.com/ajax/ |
| Microsoft Ajax CDN | //ajax.aspnetcdn.com/ajax/ |
- *3 ただし、以降のサンプルではWindowsエクスプローラーから.htmlファイルを直接開いたときに正しく動作するよう、「http://～」でインポートするようにしています。さもないと、「file://～ 」でアクセスしようとするからです。
オフラインでの利用
もちろん、あらかじめダウンロードしたライブラリをインポートすることで、オフライン環境でjQueryを利用することもできます。ダウンロードページは、以下です。
ダウンロードするのは［Download the compressed, production jQuery 1.11.1］（圧縮版）です。圧縮（minified）版は、オリジナルのソースコードから改行や空白／コメントなどを取り除いた小サイズの形式であることから、ダウンロード時間も短く、実運用に向いています。半面、開発時にソースコードを確認したいなどの用途には不向きなので、そのような場合には［Download the uncompressed, development jQuery 1.11.1］（非圧縮版）をダウンロードしてください*4。
- *4 CDNでも「～/jquery-1.11.0.js」（
.minなし）にアクセスすることで非圧縮版を取得できます。
ダウンロードした「jquery-1.11.0.min.js」ファイルは、任意のフォルダーに配置した上で、以下のようにインポートします。パスは配置先に応じて読み替えてください。
|
<script src="jquery-1.11.1.min.js"></script>
|
障害時のフォールバック
ダウンロードパッケージを利用するのは、オフライン環境の場合だけではありません。CDNに障害があってファイルを取得できなかった場合に備えて、以下のようなフォールバック（＝ある機能が使えないときに代替機能に切り替えること）用のコードを記述すると、より安全です。
|
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
window.jQuery || document.write('<script type="text/javascript" src="jquery-1.11.1.min.js"><\/script>');
</script>
|
これによって、window.jQueryオブジェクトが存在しない場合（＝CDNからのデータ取得に失敗して、jQueryを利用できない場合）に、ローカルからライブラリをインポートできます。
処理対象：ライブラリフォールバック カテゴリ：コア
API：window.jQueryオブジェクト カテゴリ：Types（型）
※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
1. 【現在、表示中】≫ jQueryを利用するには？
jQueryの特徴を簡単に紹介。jQueryライブラリをCDNから、もしくはローカルにダウンロードしてから利用する方法を説明する。
2. 現在利用しているjQueryのバージョンを確認するには？
現在利用しているjQueryライブラリのバージョンを、JavaScriptコードから実行中に確認する方法を説明する。また、ライブラリのバージョンの使い分けや、旧バージョンの入手方法も紹介。
3. 以前のバージョンで開発したアプリを最新のjQueryで動作させるには？
基本的に旧バージョンのjQueryで作成したページは最新版でも動作するが、jQuery 1.9以前から最新化する場合には動作しない場合がある。その問題を回避できるjQuery Migrateプラグインの基本的な使い方を説明する。
4. 要素配下のテキストを取得／設定するには？（text／html）
textメソッドやhtmlメソッドを使って要素配下のテキストやHTMLソースを取得する方法を解説。それぞれの使い分けについても説明する。
5. 要素のスタイルプロパティを変更するには？（css）
背景色を変えるなど、要素のスタイルを変更できるcssメソッドの基本的な使い方を解説。相対値の指定や複数まとめて指定、現在の値の取得なども説明する。
