Web 開発では、要素の表示と非表示を動的に制御する必要がある状況によく遭遇します。たとえば、ユーザーが正常にログインした後、ウェルカム メッセージを表示したり、ページをスクロールするときに要素が画面の中央までスクロールしたときに、要素のアニメーション効果をオンにします。これらのニーズに応えて、jQuery は監視ページを表示および非表示にするためのいくつかの API を提供します。
1. $(window).scroll() メソッド
$(window).scroll() メソッドは、ウィンドウがスクロールされたときにトリガーされるイベント処理関数を表します。ウィンドウのスクロールイベントをリッスンすることで、要素を動的に表示または非表示にすることができます。
以下はサンプルコードです。ホイールをページ上部から500pxの位置までスクロールすると、ページ内の要素が表示されます:
$(window).scroll(function(){ if($(window).scrollTop() >= 500){ $("#element").show(); } });
コード説明:
2. $(window).resize() メソッド
$(window).resize() メソッドは、ウィンドウ サイズが変更されたときにトリガーされるイベント処理関数を表します。ウィンドウ サイズ変更イベントをリッスンすることで、ページ上の要素のサイズと位置を動的に調整できます。
以下はサンプルコードです。ウィンドウの幅が768px以下の場合、ページ内の要素が非表示になります:
$(window).resize(function(){ if($(window).width() <= 768){ $("#element").hide(); } });
コードの説明:
3. $(document).ready() メソッドと $(window).load() メソッド
$(document).ready() メソッドは、ページ DOM がロードされ、完了後にイベント ハンドラー関数がトリガーされます。 $(window).load() メソッドは、ページ内のすべての要素 (画像やその他のリソースを含む) が読み込まれるときにトリガーされるイベント処理関数を表します。これら 2 つのメソッドでは、ページ要素に対する動的な表示または非表示の操作を実装することもできます。
以下はサンプルコードです。ページ内のすべての要素が読み込まれると、ページ内の要素が表示されます:
$(window).load(function(){ $("#element").show(); });
コードの説明:
以上がjQuery監視ページの表示と非表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。