実践、jQuery

全10回

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

最終回位置とサイズの取得 6 2016年3月10日

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

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

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

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

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

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

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

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

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

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

運営会社