jQuery逆引きリファレンス
現在利用しているjQueryのバージョンを確認するには？
現在利用しているjQueryライブラリのバージョンを、JavaScriptコードから実行中に確認する方法を説明する。また、ライブラリのバージョンの使い分けや、旧バージョンの入手方法も紹介。
現在利用しているjQueryのバージョンを確認するには、$.fn.jqueryにアクセスします。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
window.alert($.fn.jquery);
</script>
</body>
</html>
|
どのバージョンを利用するか
執筆時点でjQueryの最新バージョンは3.2.1、サポートするブラウザーは以下の通りです。
- Chrome、Firefox、Safari、Edge（最新バージョンとひとつ前のバージョン）
- Internet Explorer 9以降
- Opera（最新バージョン）
- Android 4以降の標準ブラウザー
- iOS版Safari 7以降
現在ではマイクロソフトによるサポートも終了していますので、ほとんどその必要もないはずですが、Internet Explorer 8以前のサポートを求められる場合には、jQuery 1.xを利用してください（最新版は1.12.4）。ただし、執筆時点でjQuery 1.x、2.xの更新は止まっているので、原則は3.x系の一択と考えた方がよいでしょう。
jQuery 3では、以下のようなパッケージが用意されています。
| 圧縮版 | 非圧縮版 | |
|---|---|---|
| 通常版 | jquery-3.x.x.min.js | jquery-3.x.x.js |
| スリム版 | jquery-3.x.x.slim.min.js | jquery-3.x.x.slim.js |
圧縮（compress）／非圧縮版（uncompress）版は、オリジナルのソースコードから改行や空白／コメントなどを除去しているかどうかの違いです。本番環境では、サイズも小さく、ダウンロード時間も短い圧縮版を、開発時にはコードを視認しやすい非圧縮版を利用します。
そして、通常版／スリム版は機能が異なります。スリム版はjQuery 3で新たに提供されました。Ajax、エフェクトなどの機能、非推奨機能を除去しており、より軽量になっているのが特徴です。Ajaxを利用しない（別のライブラリに委ねる）、スタイルシートだけでエフェクトを実装するような状況ではスリム版を利用することで、ダウンロード時間をより短縮できます。
旧バージョンを入手する方法
jQueryは、基本的に後方互換性を強く意識したライブラリです。従って、例えばjQuery 1.4で動作していたコードは、大部分、最新のjQueryでも動作します。ただし、バージョン／機能によっては、挙動が変化しているもの、そもそも削除されたものもあります*1。予期せぬ不具合を回避するためにも、まずは開発／本番時のバージョンを一致させるのが無難です。
- *1 例えばjQuery 1.9では、肥大化したコードを整理するために、あまり利用されていない機能を中心に、いくつかのメソッドが削除されていますし、jQuery 3でもイベント周りで非推奨になっていたメソッドが削除されました。
以前のバージョンは、「jQuery Core - All Versions」から入手できます。
古いバージョンになると、uncompressed（非圧縮）版、minified（圧縮）版の他、packed版と呼ばれるパッケージがありますが、これはPackerというツールで圧縮されたパッケージです。基本はminified版と等価ですが、環境によっては動作が不安定になる場合がありますので、minified版がある場合はこちらを優先して利用してください。
カテゴリ：Core API：$.fn.jquery
※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
2. 【現在、表示中】≫ 現在利用しているjQueryのバージョンを確認するには？
現在利用しているjQueryライブラリのバージョンを、JavaScriptコードから実行中に確認する方法を説明する。また、ライブラリのバージョンの使い分けや、旧バージョンの入手方法も紹介。
3. 以前のバージョンで開発したアプリを最新のjQueryで動作させるには？
基本的に旧バージョンのjQueryで作成したページは最新版でも動作するが、jQuery 1.9以前から最新化する場合には動作しない場合がある。その問題を回避できるjQuery Migrateプラグインの基本的な使い方を説明する。
4. 要素配下のテキストを取得／設定するには？（text／html）
textメソッドやhtmlメソッドを使って要素配下のテキストやHTMLソースを取得する方法を解説。それぞれの使い分けについても説明する。
5. 要素のスタイルプロパティを変更するには？（css）
背景色を変えるなど、要素のスタイルを変更できるcssメソッドの基本的な使い方を解説。相対値の指定や複数まとめて指定、現在の値の取得なども説明する。
