Index
jQuery.com
「jQueryを使うとどんなことができるのか?」をイメージしてもらうためのSAMPLE です。
jQueryの基本的な利用方法を学習しましょう。
jQueryで要素を指定するための "セレクタ" についてのCHAPTERです。CSSでお馴染みのセレクタも多いです。
CSS系メソッドは、要素のスタイルなどを操作するためのメソッドです。直接スタイルを操作するだけでなく、クラスの追加、削除も行えます。
HTML, Attribute(属性)系メソッドを利用すれば、HTMLソースを操作して、ページをダイナミックに変更することができます。
アニメーション系メソッドで、アニメーションを動かす仕組みを作成できます。
トラバース系メソッドを利用すれば、セレクタで指定した要素から、さらに要素を検索することができます。
イベント系メソッドで、クリックしたとき、マウスをのせたときなど、プログラムにきっかけを与えよう!
今まで学習してきたことをおさらいしながら、実際にコーディングに挑戦してみましょう。
クリックで開閉するアコーディオンパネルを作成します。
マウスを乗せると出現するツールチップを作成します。アニメーションや座標の取得がポイントです。後半は変数のスコープというものについても学習します。
マウスを乗せると画像を入れ替えるロールオーバーを作成します。また、画像入れ替え時のちらつきを防止するため、事前に画像を読み込んでおくプリロード機能も付けましょう。
クリックで表示するパネルを切り替える、タブパネルを作成します。後半では作成したタブパネルを、プラグインにまとめてみましょう。
マウスを乗せるとサブメニューが表示される、ドロップダウンメニューを作成します。仕組みを作るだけでなく、使い勝手も考慮してみましょう。後半はオプション設定付きのプラグインにまとめていきます。
今まで作成した UIパーツを、プラグインにまとめてあります。サンプルソースを読み解いてみよう!