jQuery の使い方概要～ prototype.js を知っている人の jQuery 入門

入手方法

jQuery のダウンロードサイトから入手すればよいです。私は jQuery UI を利用することを前提としていますので、jQuery UI をダウンロードして、ついでについてくるバージョンの jQuery を利用することにします。

jQuery UI はこちらからダウンロードします。

» jQuery UI のダウンロード
(この資料では使い方を学ぶことを目的としているので、全てダウンロードしてください)

ここでディレクトリの命名規則などは、単に私がそのように設定した、というだけであり、必須ではありません。あなたの好きなようにしていただいて構いません。

ダウンロードした zip ファイルを展開し、生成された development-bundle ディレクトリを jquery-ui-<バージョン> という名前で配置します。 (私は jquery-ui-1.7.2 としました)

さらに、紛らわしいので demos, docs, external ディレクトリを削除しました。

さらに、テーマローラー (jQuery Themeroller) でオリジナルのテーマを作成し、 themes ディレクトリ以下に keicode-test という名前で配置しました。

さらに、IE6 の不具合を解決するために BGIFRAME プラグインもダウンロードして、配置しておきます。

さらに、コンテキストメニューも必要なので jQuery Context Menu Plugin (jQuery コンテキストメニュープラグイン) をダウンロードして配置します。

さらに、JSON の stringify などが見当たらなかったので、JSON 本家から json2.js を取得。

まずはちょっと変則的ですが、必要に迫られているので jQuery UI の動作確認をします。 YUI よりコードがシンプルで、サイズが小さいように思えたので (ライブラリ自体も使うほうも)、いくつか試してみました。

どれもコード量が少なく、扱いやすいことがわかりました。

ちなみに CSS の規則は次の資料に載っています。

私が prototype.js でよく使っていて、jQuery で同様のことをするにはどうしたらよいか、という視点でテストした内容です。