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

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

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

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

» CSS Framework

jQuery の基本動作

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

ここまでお読みいただき、誠にありがとうございます。SNS 等でこの記事をシェアしていただけますと、大変励みになります。どうぞよろしくお願いします。

© 2024 Web/DB プログラミング徹底解説