jQuery


jQuery とは、John Resig によって開発された JavaScript ライブラリです。

Ajax や DOMプログラミングを「簡潔に」「簡単に」書くことができる、軽量で強力なフレームワークです。


jQueryプロジェクトは、4つのプロジェクトで構成されています。

jQuery Core
jQuery のコアライブラリを開発するプロジェクトです。Ajax や DOMプログラミングフレームワークを提供します。
jQuery UI
jQuery Core上に構築された強力なユーザインターフェースライブラリです。
Sizzle
高速なセレクタエンジンです。jQueryでも使用されています。単独でも使用可能です。
QUnit
使いやすいJavaScriptのテスティングフレームワークです。
ぱかっす

このサイトでは、jQuery Core、jQuery UI の日本語リファレンスを公開しています。


実際に実行できる、分かりやすいサンプルを付け、詳細に解説しました。
ぜひ参考にして、jQuery を使い倒してください。


準備

ダウンロード

jQueryDownload から、最新版をダウンロードしましょう。
(バージョンが高いほど処理速度が大幅に向上します。特別な理由がなければ、最新版の1.4系以上を使用しましょう。)

簡単な使用方法

ダウンロードしたjQueryのファイルを、JavaScriptの外部リソースとして指定するだけです。 あとは、好きなところで jQuery を使うことができます。

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        // jQueryを利用してコードを書く
    </script>
</head>
<body>

</body>
</html>

特徴

強力なセレクタ

$() の引数には、HTML、DOM、CSSセレクタなど、可能な限りの引数を受け入れ、走査してくれます。これはとても強力です。
(Ver 1.2から、XPathセレクタは Pluginとして提供されます。XPath Compatibility Plugin)

idが test_result の子要素である img 要素のうち、偶数番目(0から始まる)の全ての要素の width 属性を 2倍にする。

$("#test_result > img:even").attr("width", function(){return this.width*2});

idが test_result の子要素である img 要素のうち、0番目以降(0番目を含まない)で、表示されている全ての要素を非表示にする。

$("#test_result > img:gt(0):visible").hide();

テスト結果 (#test_result)





メソッドチェーン

多くの関数は、jQueryオブジェクトを返すので、関数を連鎖して実行することができます。
この機能により、コードを簡潔に、直感的に記述することができます。

$("p.test")    // p.test 要素の jQuery オブジェクト
    .css("backbround", "green")                   // 背景を green に
    .click(function(){ alert($(this).text()); })  // クリックされたらテキストを表示
    .find("div.yellow")                           // 子孫要素の div.yellow を取得
        .css("border", "5px solid blue");             // 枠線を 5px 実線 青 に

プラグイン

jQueryは、プラグインによって機能を拡張することができます。
Plugin Repositoryには、世界中のjQueryユーザが作成した多くのプラグインが登録されています。
そして、あなたも作成することができます!

クロスブラウザ

IE 6.0以上、FF 2 以上、Safari 3.0以上、Opera 9.0以上、Chromeに対応しています。(Ver1.4)
現在の主要なブラウザをカバーしています。

軽量

jQueryには、Minified(縮小版)、Uncompressed(非圧縮版) があります。

  • Minified
    変数名を短くしたり、動作に必要のないコメントや空白を除去して、ソースコードをMinify(縮小)したものです。
  • Uncompressed
    ソースコードそのものです。当然、可読性が最も高く、主に開発者向けです。

ライブラリバージョンサイズ
jQuery(Uncompressed)1.4.2160.0 KB
jQuery(Minified)1.4.270.4 KB
jQuery(Minified and Gzipped)1.4.224.0 KB

  • *Gzipped とは、ファイルを gzip 形式で圧縮したものです。 gzip に対応したクライアント(Accept-Encoding: gzip)であれば、このファイルを展開して使用することが可能です。
    Content Negotiaionや、mod_rewrite 等を使用して、Accept-Encoding に応じたファイルを返すよう Webサーバを設定します。