jQuery


jQueryとは、John Resig によって開発された Javascriptライブラリです。 AjaxやDOMプログラミングコードを「簡潔に」「簡単に」書くことができます。
使用感は「もう手放せない」の一言。 かつて、AjaxやDOMプログラミングは複雑でした。ブラウザやバージョン依存を吸収するのも大変で敬遠していましたが、 jQueryを使用してからは楽に実装できるようになりました。

準備

ダウンロード

jQueryのWebsiteのDownloadから、最新版をダウンロードしましょう。
（基本的にバージョンが高いほど処理速度が大幅に向上しています。特別な理由がなければ、最新版の1.2系以上を使用しましょう。）

使用方法

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

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

</body>
</html>

特徴

強力なセレクタ

CSS1～3のセレクタや、XPath(Ver1.2からはプラグインにて提供)による指定が可能です。これはとても強力です。

idが test_result の子要素である img 要素のうち、width 属性が 16 の全ての要素の width 属性を 2倍にする。 

$("#test_result > img[width='16']").attr("width", function(){return this.width*2});

jQuery独自のセレクタも強力です。

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

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






プラグイン

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

クロスブラウザ

IE 6.0以上、FF 1.5以上、Safari 2.0以上、Opera 9.0以上に対応しています。 現在の主要なブラウザをカバーしています。（Ver1.2）

軽量

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

  • Minified
    変数名を短くしたり、動作に必要のないコメントや空白を除去して、ソースコードをMinify(縮小)したものです。安全な縮小方法です。
  • Packed
    Packerで圧縮したものです。 圧縮方法によっては、実行時に展開(unpack)と評価(eval)が必要です。 動作環境によっては、動作が不安定になることがありますが、高い圧縮率を誇ります。
  • Uncompressed
    ソースコードそのものです。当然、可読性が最も高く、主に開発者向けです。

jQueryと双璧をなすPrototypeと比べてみましょう。

ライブラリバージョンサイズ
jQuery(Uncompressed)1.277.4 KB
jQuery(Minified)1.244.6 KB
jQuery(Packed)1.226.2 KB
jQuery(Minified and Gzipped)1.214.1 KB
Prototype1.5.1.194.0 KB
Prototype(Minified/YUI Compressor)1.5.1.156.5 KB
Prototype(Minified and Gzipped)1.5.1.116.2 KB

  • ＊Gzipped とは、ファイルを gzip 形式で圧縮したものです。 gzip に対応したクライアント(Accept-Encoding: gzip)であれば、このファイルを展開して使用することが可能です。
    Content Negotiaionや、mod_rewrite 等を使用して、Accept-Encoding に応じたファイルを返すよう Webサーバを設定します。（例）
  • ＊YUI Compressor とは、JavascriptとCSSファイルを Minify(縮小) するツールです。 Yahoo! が提供しています。詳しい使用方法はこちら。
ページトップヘ

jQuery
jQuery 1.2.6 リファレンス
jQuery UI 1.5.2 リファレンス
jQueryと他のライブラリを同時に使用する方法


ページトップヘ
スポンサードリンク