jQuery監視ページの表示と非表示-フロントエンドQ&A-php.cn

jQuery監視ページの表示と非表示

WBOY

リリース： 2023-05-28 15:12:37

オリジナル

990 人が閲覧しました

Web 開発では、要素の表示と非表示を動的に制御する必要がある状況によく遭遇します。たとえば、ユーザーが正常にログインした後、ウェルカムメッセージを表示したり、ページをスクロールするときに要素が画面の中央までスクロールしたときに、要素のアニメーション効果をオンにします。これらのニーズに応えて、jQuery は監視ページを表示および非表示にするためのいくつかの API を提供します。

1. $(window).scroll() メソッド

$(window).scroll() メソッドは、ウィンドウがスクロールされたときにトリガーされるイベント処理関数を表します。ウィンドウのスクロールイベントをリッスンすることで、要素を動的に表示または非表示にすることができます。

以下はサンプルコードです。ホイールをページ上部から500pxの位置までスクロールすると、ページ内の要素が表示されます:

$(window).scroll(function(){
  if($(window).scrollTop() >= 500){
    $("#element").show();
  }
});

ログイン後にコピー

コード説明:

$(window).scroll(): ウィンドウのスクロールイベントをリッスンします;
$(window).scrollTop(): ウィンドウの現在のスクロール距離を取得します;
if($( window).scrollTop() >= 500): ホイールのスクロール距離が 500 ピクセル以上の場合は、次のコードを実行します;
$("#element") .show(): idを「要素」に変更すると表示されます。

2. $(window).resize() メソッド

$(window).resize() メソッドは、ウィンドウサイズが変更されたときにトリガーされるイベント処理関数を表します。ウィンドウサイズ変更イベントをリッスンすることで、ページ上の要素のサイズと位置を動的に調整できます。

以下はサンプルコードです。ウィンドウの幅が768px以下の場合、ページ内の要素が非表示になります:

$(window).resize(function(){
  if($(window).width() <= 768){
    $("#element").hide();
  }
});

ログイン後にコピー

コードの説明:

$ (window).resize(): ウィンドウのサイズ変更イベントをリッスン;
$(window).width(): ウィンドウの幅を取得;
if($(window).width( ) <= 768): ウィンドウの幅が 768px 以下の場合は、次のコードを実行します;
$("#element") .hide(): ID「element」の要素を非表示にします。

3. $(document).ready() メソッドと $(window).load() メソッド

$(document).ready() メソッドは、ページ DOM がロードされ、完了後にイベントハンドラー関数がトリガーされます。 $(window).load() メソッドは、ページ内のすべての要素 (画像やその他のリソースを含む) が読み込まれるときにトリガーされるイベント処理関数を表します。これら 2 つのメソッドでは、ページ要素に対する動的な表示または非表示の操作を実装することもできます。

以下はサンプルコードです。ページ内のすべての要素が読み込まれると、ページ内の要素が表示されます:

$(window).load(function(){
  $("#element").show();
});

ログイン後にコピー

コードの説明:

$("#element").show(): で要素を変更します「要素」のIDが表示されます。

4. その他のメソッド

上記で紹介したメソッドに加えて、jQuery は要素を動的に表示または非表示にするための次のようなメソッドも提供します。 ##$(element).fadeIn() / $(element).fadeOut(): 要素のフェードイン/フェードアウト効果を実装します;

$(element).slideDown() / $( element ).slideUp(): 要素のプルダウン/プルアップ効果を実現;

$(element).toggle(): 要素の表示/非表示の切り替えを実現します。
要約:
上記では、動的コントロール要素の表示と非表示を実現するためのいくつかの方法を紹介しており、さまざまなシナリオを通じてページ要素の動的コントロールを実現できます。実際の開発では、より良い結果を達成するために、特定のニーズに基づいて適切な方法を選択する必要があります。

以上がjQuery監視ページの表示と非表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。