Of Stack

JQuery Tips related to of 1 about $.ready of

  • 2020-03-30 03:43:38
  • OfStack

  I have been studying JQuery recently, which is still very profound. Here is my learning summary.

The $(document).ready () method VS the OnLoad event VS $(window).load() method

        The first thing you usually learn about JQuery is when to start an event. For a long time, events that were raised after the page was loaded were loaded into the "Body" Onload event.

        The Onload event for the Body has many disadvantages compared with JQuery's Ready method, for example:

1. The problem of loading multiple functions 


<body onload="a();b();">

</body>

        This is the only way to load in the Onload event, it's ugly... In JQuery you can take advantage of multiple jquery.ready () methods, which are executed in sequence

2. Code and content are not separated
      This seems to go without saying. It's disgusting...-!!

3. Different execution order
      For the body.onload event, it will not be triggered until all the contents of the page have been loaded, I mean all the contents, including pictures, flash, etc. If there is a lot of these contents on the page, the user will have to wait for a long time.

      For the $(document).ready() method, this method is triggered only after all the DOM of the page has been loaded, which greatly speeds up the page.

      But for some special applications, such as zooming in and out of pictures, clipping pictures. Does it have to load all the content of the page? I recommend the $(window).load() method, which will not trigger until the page is fully loaded, without the disadvantage of the OnLoad event. 


  <script type="text/javascript">
    $(window).load(function() {
      alert("hello");
    });
    $(window).load(function() {
      alert("hello again");
    });
  </script>

      The above code is executed in sequence after all the content of the page has been loaded.

  Of course, don't forget the corresponding Unload method 


$(window).unload(function() {
      alert("good bye");
    });

  The above code will be thrown when the page closes.

Throws the JS code before all the DOM loads
This method is my favorite when debugging, and is sometimes used in development 


<body>
  <script type="text/javascript">
    (function() {
      alert("hi");
    })(jQuery)
  </script>
</body>

Yes, is to use the form of js closure js code embedded in the body, this code will be automatically executed, of course, you can also directly embedded in the js code, this way to pay attention to the order problem, as follows: 


<body>
<div id="test">this is the content</div>
  <script type="text/javascript">

    alert($("#test").html());//I Can display the content
    
  </script>
</body>
<body>

  <script type="text/javascript">

    alert($("#test").html());//I Can't display the content
    
  </script>
  <div id="test">this is the content</div>
</body>

In the second code, the DOM before the current code can only be interpreted, while test does not exist in the DOM number that has been parsed, so the second code cannot be displayed correctly.

Related articles: