In web development, we often encounter situations where we need to dynamically control the display and hiding of elements. For example, after the user successfully logs in, display a welcome message; or when scrolling the page, when an element scrolls to the center of the screen, turn on the animation effect of the element. In response to these needs, jQuery provides some APIs to display and hide the monitoring page.

1. $(window).scroll() method

$(window).scroll() method represents the event processing function triggered when the window is scrolled. By listening to the scroll event of the window, you can dynamically display or hide an element.

The following is a sample code. When the wheel scrolls to a position 500px from the top of the page, an element in the page will be displayed:

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

Code explanation:

• $(window).scroll(): Listen to the scrolling event of the window;
• $(window).scrollTop(): Get the current scrolling distance of the window;
• if($( window).scrollTop() >= 500): If the scrolling distance of the wheel reaches or exceeds 500px, execute the following code;
• $("#element").show(): Change the id to " element" is displayed.

2. $(window).resize() method

$(window).resize() method represents the event processing function triggered when the window size changes. By listening to window size change events, you can dynamically adjust the size and position of elements on the page.

The following is a sample code. When the width of the window is less than or equal to 768px, an element in the page will be hidden:

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

Code explanation:

• $ (window).resize(): Listen to the size change event of the window;
• $(window).width(): Get the width of the window;
• if($(window).width( ) <= 768): If the width of the window is less than or equal to 768px, execute the following code;
• $("#element").hide(): Hide the element with the id "element".

3. The $(document).ready() method and the $(window).load() method

$(document).ready() method indicates that when the page DOM is loaded Event handler function triggered after completion. The $(window).load() method represents the event processing function that is triggered when all elements in the page (including images and other resources) are loaded. In these two methods, you can also implement dynamic display or hiding operations on page elements.

The following is a sample code. When all elements in the page are loaded, an element in the page will be displayed:

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

Code explanation:

• $(window).load(): Monitor the loading completion event of all elements on the page (including images and other resources);
• $("#element").show(): Change the element with the id of "element" display.

4. Other methods

In addition to the methods introduced above, jQuery also provides some other methods to dynamically display or hide elements, such as:

• $(element).fadeIn() / $(element).fadeOut(): Implement the fade-in/fade-out effect of elements;
• $(element).slideDown() / $(element ).slideUp(): Realizes the pull-down/pull-up effect of elements;
• $(element).toggle(): Realizes switching between display and hiding of elements.

Summary:

The above introduces several methods to realize the display and hiding of dynamic control elements. They can realize dynamic control of page elements through different scenarios. In actual development, appropriate methods should be selected based on specific needs to achieve better results.

The above is the detailed content of jquery monitoring page display and hide. For more information, please follow other related articles on the PHP Chinese website!