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 API 1.4.4 日本語リファレンス ●jQuery UI API 1.8.4 日本語リファレンス
実際に実行できる、分かりやすいサンプルを付け、詳細に解説しました。ぜひ参考にして、jQuery を使い倒してください。

準備

ダウンロード

jQuery の Download から、最新版をダウンロードしましょう。︵バージョンが高いほど処理速度が大幅に向上します。特別な理由がなければ、最新版の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();

メソッドチェーン

多くの関数は、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.2	160.0 KB
jQuery(Minified)	1.4.2	70.4 KB
jQuery(Minified and Gzipped)	1.4.2	24.0 KB

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

ページトップヘ

jQuery

jQuery API 1.4.4 日本語リファレンス
jQuery UI API 1.8.4 日本語リファレンス
jQueryと他のライブラリを同時に使用する方法

ページトップヘ

jQuery

jQueryと他のライブラリを同時に使用する方法

Java

Tools

Blog