- 索引
- 1章:jQuery入門
-
- ├ jQueryのメリット
- ├ readyイベント
- ├ オブジェクトについて
- ├ メソッドについて
- ├ 情報の取得
- ├ イベント(1)
- ├ イベント(2)
- └ 初歩なサンプル
- 2章:jQuery基礎
-
- ├ thisについて(1)
- ├ thisについて(2)
- ├ jQueryとDOM要素
- ├ 簡単な演出
- ├ thisから辿る
- ├ 汎用的なアニメ(1)
- ├ 汎用的なアニメ(2)
- ├ アニメの停止
- ├ アニメを管理する仕組み
- └ 汎用的なアニメ(3)
- 3章:jQuery発展
-
- ├ イベントフロー(1)
- ├ イベントフロー(2)
- ├ イベントフロー(3)
- ├ 画像のプリロード
- ├ jQueryの高速化
- └ メソッドチェーン
- 番外編:研究
-
- ├ イベントを外す
- ├ cssアニメとの連携(1)
- ├ cssアニメとの連携(2)
- ├ cssアニメとの連携(3)
- ├ セレクタの自作(1)
- ├ セレクタの自作(2)
- ├ クロージャ(1)
- ├ クロージャ(2)
- └ クロージャ(3)
jQueryのメリット
ソースコードを短く記述できる
最初のメリットはjQueryのロゴ(左図)の副題「write less, do more」にあるように「より少ない記述で、より多くの処理」でしょう、例えばid属性がtestの要素に「hello world!」と表示するjavaScriptは以下の様になります。
document.getElementById("test").innerHTML = "hello world!";
しかしjQueryを利用すれば、以下の様に記述できます。$("#test")の部分がdocument .getElementById ("test")に相当し、text("hello world!")の部分がinnerHTML = "hello world!"に相当します。
$("#test").text("hello world!");
上記のようにシンプルなサンプルでは差が少ないのですが、複雑なサンプルになればなるほど差が出てきます。例えば特定の要素に外部から読み込んだテキストデータを表示するためには10行ほどコードを書かなければなりません。→参考:おしえてgoo「.txtファイルの読み込み」
しかしjQueryを利用すれば、以下の様に1行で済みます。ブラウザ上で確認できるサンプルはリファレンスのloadメソッドのページにあります。→参考:リファレンス「loadメソッド」
$("#test").load("simple.txt");
ブラウザ間の差異を吸収
javaScriptはブラウザによって利用できるメソッドやプロパティが異なり、クロスブラウザなコンテンツを実現するのが面倒です。しかしjQueryでは簡単にクロスブラウザなコンテンツを実現できます(個人的には「write less, do more」よりも嬉しいメリットです)。
例えば、要素の透明度を変更するのはopacityプロパティを利用して、以下の様に記述します。
document.getElementById("test").style.opacity = 0.5;
しかしIEはopacityが利用できないため、filterプロパティを利用して以下の様に記述しなければなりません。
document.getElementById("test").filter = "alpha(opacity=50)";
ブラウザによって処理を振り分けるのは手間が掛かり、ソースコードも読みにくいものになってしまいます。しかしjQuery(以下)を利用すれば、IEもそれ以外のブラウザも同じように機能させることができます。
$("#test").fadeTo(0, 0.5);
さらにv1.8からは、ベンダープレフィックスも自動で補完してくれるようになりました。
→参考:本家サイト(「Automatic CSS prefixing」の項目を確認してください)
デザイナーにも利用しやすい
上記2項目もデザイナーにとっては非常に嬉しいメリットですが、さらにcssとの共通性もデザイナーやコーダーの方にメリットとなります。
それはjQueryはインタラクションの対象としてcssが利用できるからです。例えば最初に紹介した以下のjQueryのサンプルですが、対象を指定する「#test」はcssと共通で、id属性がtestの要素という意味になります。
$("#test").text("hello world!");
またjQueryのセレクタはcss3のセレクタと共通のものも多く、css3の予行練習としても役立つのではないでしょうか?→参考:W3Cのcss3セレクタの紹介とjQueryのセレクタの紹介
さらに「スライドショー」や「タブメニュー」など、従来はjavaScriptプログラマーに頼まなければならないような処理でも、デザイナーが作成できる点などもデザイナーにとっては嬉しいでしょう。
jQueryをHTMLに組み込む
本格的な説明は次のページから始めるのですが、ここでjQueryの組み込みだけ策に説明しておきます。とはいえhtmlへの組み込み方は他の外部jsファイルと同じで、以下の様にhead領域にscriptタグを書くだけです。
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
では実際に組み込んだサンプルを確認します。サンプル(merit/01.html)を開いてソースを確認し、head領域に上記のようなscriptタグが設定されていることを確認してください 。
今回はここで終了です。次は、ほとんどのjQueryコンテンツで必要になるreadyイベントについて説明します。
次のページ:readyイベント