ただいま新デザインバージョンのプレビュー中です。旧バージョンはこちら。不具合等はお問い合わせより報告お願いいたします。

実践、jQuery

全10回

jQueryを使った実装がある程度できるエンジニアが、さらにjQueryへの理解を深めるためのシリーズ。jQueryの実装の仕組みなどを含め、根本からの理解を目指します。不定期連載です。

第1回を読む

最終回 位置とサイズの取得 6

これまで要素の位置やサイズの取得、設定のための、さまざまなメソッドを解説しました。今回は、サイズ取得メソッドを利用した具体的な実装例を紹介します。ドロップダウンメニューの見切れを防ぐ実装を考えます。

第9回 位置とサイズの取得 5

jQueryを使った要素のサイズ取得と設定に関わるメソッドを解説します。位置と同じく、どのようなメソッドで、どのような範囲のサイズを捕捉できるのか、またOS XやWindowsなどOSごとの相違を把握することも重要です。

第8回 位置とサイズの取得 4

前回解説したスクロール位置の取得/設定するメソッドをどのように実装に活かせるか解説します。デモを通して、メソッドの特徴やそれぞれの違いがよりクリアに理解できるでしょう。

第7回 位置とサイズの取得 3

スクロール位置の取得と設定、イベント発生位置の取得について解説します。特にブラウザのスクロール位置の取得に関しては、ブラウザごとの差異があります。実装時には注意が必要です。

第6回 位置とサイズの取得 2

offset()メソッドを利用し、html要素をオフセット要素とした相対的位置の取得、また位置の設定を解説します。シンプルな例だけでなく、疑似フレーム内に要素があった場合の挙動についても扱います。

第5回 位置とサイズの取得 1

要素の位置に関する操作は、jQueryの本領発揮の場面。目的に沿った操作を行うためには仕様のほか、ブラウザごとの細かいクセを把握する必要があります。まずは位置の操作から詳細に解説します。

第4回 .on()と.off()を使いこなす 4

.triggerHandler()とカスタムイベントについて解説します。メソッドの特徴や使いどころを併せて理解しましょう。最後には解説した実装を一通り利用したコードを紹介します。

第3回 .on()と.off()を使いこなす 3

イベントの名前空間、トリガーを活用しつつ、イベントをコントロールする実装を解説します。これらの仕組みを使うと、操作対象外のイベントに予期せぬ影響を与えることを防止できます。

第2回 .on()と.off()を使いこなす 2

前回はイベントを定義する.on()を解説しましたが、今回はイベントの定義を解除する.off()を中心に解説を進めます。.off()のさまざまな使い方、また、実装時の注意点についても触れています。

第1回 .on()と.off()を使いこなす 1

jQuery 1.7から実装された.on()と.off()メソッドを取り上げます。jQueryオブジェクトに対してイベントの定義を行う機能をきちんと理解して、イベントを自在にコントロールできるようになりましょう。