歴史
今や、JavaScriptライブラリのディファクトスタンダードになったjQueryですが、1,2,3系とそれぞれバージョンがあるので、どのような変革を追ってきたかまとめてみます。
1系は、1.12と2系は、2.2で機能追加はなくなり、今後はバグ修正のみのリリースとなるようです。
1系
- IE8以下でも動きます。
| バージョン | リリース日 | 特徴 |
|---|---|---|
| 1.0 | 2006年8月 | 最初の安定版 |
| 1.1 | 2007年1月 | |
| 1.2 | 2007年9月 | |
| 1.3 | 2009年1月 | |
| 1.4 | 2010年1月 | |
| 1.5 | 2011年1月 | jQuery Deferredが実装された。 |
| 1.6 | 2011年5月 | 大幅にパフォーマンスが改善した。 |
| 1.7 | 2011年11月 | bind(),live(),delegate()メソッドが、on、offメソッドに統合された。（とは言っても、非推奨なだけで存在はします。） |
| 1.8 | 2012年8月 | |
| 1.9 | 2013年1月 | |
| 1.10 | 2013年5月 | |
| 1.11 | 2014年1月 | |
| 1.12 | 2016年1月 |
2系
- IE6～8は非対応
- 1系で廃止された機能もあるため、ある程度互換性はありますが、完全ではありません。
| バージョン | リリース日 | 特徴 |
|---|---|---|
| 2.0 | 2013年1月 | |
| 2.1 | 2014年1月 | |
| 2.2 | 2016年1月 |
3系
- パフォーマンスが向上した。
- 今後も新機能の追加に期待される。
| バージョン | リリース日 | 特徴 |
|---|---|---|
| 3.0 | 2016年6月 | |
| 3.1 | 2016年7月 | |
| 3.2 | 2017年6月 |
live、bind、delegate、on、clickの違い
live
ajax等で動的に変更した要素にもイベントが動く。バージョン1.9で削除済み。イベント委譲で動く。document（DOMの最上位の要素）をに対して設定するのでパフォーマンスが悪くなる。
bind
ajax等で変更した要素にはイベントが動かない。3.0で将来廃止予定と位置付けられた。
delegate
3.0で将来廃止予定と位置付けられた。イベント委譲、委譲する親要素を選べるので、liveよりパフォーマンスが良い。
1.4.2
|
1 |
$(親セレクタ：委譲された監視役).delegate(監視対象セレクタ,eventType,handler) |
1.4.3
|
1 |
$(親セレクタ：委譲された監視役).delegate(監視対象セレクタ,eventType,eventData,handler) |
|
1 |
$(親セレクタ：委譲された監視役).delegate(監視対象セレクタ,event) |
on
1.7.0から登場したメソッドです。
|
1 2 3 |
$(セレクタ).on("click",function () { 処理; }) |
click
on(1.7.0以前ならbind)のショートカットの記述です。1.7.0以前でも使えます。なので、onやbindどっちを使っても同じ。一般的にはonなどを使った方が良いらしい。
|
1 2 3 |
$(セレクタ).click(function () { 処理; }) |
基本構文について
jQueryの基本構文としては、下記になります。
$(function(){
…
});
普通のJavaScriptと異なり、上記構文で囲まれたコードは、ページが全て読み込まれた後に実行されます。
ちなみに、この書き方は、イベントの一種で、「ページをロードされたタイミングで動かす」という構文でもあります。
省略しないで書くと…
「ページをロードされたタイミングで動かす」というイベントを省略しないで記述すると下記のようになります。
$(document).ready(function(){
…
});
「$(document).ready」は、「$」と省略されているのですね。
「document」は、ブラウザに表示されているページそのものを指します。「$(document)」とすることで、ページそのものを、「jQueryオブジェクト」とすることができます。
$()関数について
jQueryで、操作したいセレクタを指定する場合は、「$()関数」を使います。例えば、下記のような感じですよね。
$('li').css('border-top','1px solid');
「$()関数」の戻り値は、「jQueryオブジェクト」になります。この「jQueryオブジェクト」のメソッドとして「cssメソッド」なり、「removeメソッド」なり様々なメソッドが用意されているというわけですね。
また、当たり前のように使っていますが「jQueryオブジェクト」は自動的に繰り返し処理を行ってくれる性質を持つので、特に利用者は繰り返しを意識する必要がなく簡潔なコードを書くことができるのです。(JavaScriptで書く場合は、要素一個一個ループを書いて、処理しないといけないのでどうしても冗長なコードになってしまいますよね。)
$(function() {});の中に「$()関数」を書く理由
これは、jQueryをやっていく上で、非常に重要な概念なので、必ず理解するようにしましょう！
「$(function(){};」は、「ページが全て読み込まれるまで待って実行するというイベントの省略形」ということはお伝えさせて頂きました。では、「$()関数」を「$(function(){});」の中に記述する理由はなんでしょうか。
理由としては、「$()関数」は、ページ全体が読み込まれていないと正しく目的の要素を取得できないためです。
「$」と「jQuery」について
jQueryの世界では同じ意味を示します。
$('li').css('border-top','1px solid');
なので、上記のようなサンプルの場合は、下記のように書き直すことができます。
jQuery('li').css('border-top','1px solid');
これは、「$」が「jQuery」の別名(エイリアス)を示しているためです。実務経験のある方なら分かると思いますが、世の中のほとんどのコードが「$」で書かれていますが、たまに「jQuery」という表記も見るので、一応理解しておきましょう。
この記事へのコメントはありません。