“Show and Hide Html components with jQuery” vs “visible and hidden Html componets with JavaScript”

Sometimes we need to show or hide html components in our html files. I would like to show you several ways to do this through jQuery or JavaScript method:

The HMTL

<div  class="show_hide">
<a href="#">This is a link</a>
</div>
  1. Show and Hide Html components with jQuery:

    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    //hide component 
    $(".show_hide").hide(); 
    //show component 
    $(".show_hide").show(); 
    }); 
    </script>
  2. visible and hidden Html componets with JavaScript:

    <script type="text/javascript">
    function displayText(_field, _value){
    document.getElementById(_field).style.display=_value;
    }
    
    function visibilityText(_field, _value){
    document.getElementById(_field).style.visibility=_value;
    }
    
    //hide component
    visibilityText('show_hide', 'hidden');
    displayText('show_hide', 'none');
    
    //show component
    visibilityText('show_hide', 'visible');
    displayText('show_hide', 'block');
    
    </script>

Difference between document.ready and window.onload or pageLoad

PageLoad() and jQuery’s $(document).ready() events do the same and seem too similar but in different time. $(document).ready() and pageLoad() methods are very much differ in functioning. In this article, I will explain the major differences between $(document).ready() and pageLoad() methods.

  1. Introducing $(document).ready()
    JQuery’s document.ready() method gets called as soon as DOM is ready (means browser has parsed the HTML and built the DOM tree). It is cross browser compatible means behave equally on all browsers. If your web page has large images, it will not wait for loading of images completely. Hence it may called before pageLoad() method. We can have multiple document.ready() methods on a web page that will be called in coming sequence.<script type=”text/javascript”>
    $(document).ready(function(){
    // Gets called as soon as DOM is ready
    //code here
    });
    </script>
  2. Introducing window.onload (pageLoad() )
    pageLoad() method gets called when images and all associated resources of the page have been fully loaded. Suppose your web page has large size images then until all the images are not fully loaded on the page, pageLoad() method will not called. pageLoad() method is not browser compatible. We can have only one pageLoad() method on a web page.<script type=”text/javascript”> function pageLoad()
    {
    // gets called when page have been fully loaded
    //code here
    }
    </script>

Reference link: http://www.dotnet-tricks.com/Tutorial/aspnet/D719120612-Difference-between-document.ready-and-window.onload-or-pageLoad.html