JQuery Tips related (1)----About $.Ready()

JQuery Tips related (1)----About $.Ready()_jquery

WBOY

Release： 2016-05-16 16:39:37

Original

1606 people have browsed it

I have been studying JQuery recently, and this thing is still very broad and profound. Let me share my learning summary.

$(document).Ready() method VS OnLoad event VS $(window).load() method

The first thing you usually learn when you come into contact with JQuery is when to start the event. For a long time, events triggered after the page was loaded were loaded in the Onload event of "Body".

Compared with the Onload event of Body and JQuery’s Ready method, there are many disadvantages. For example:

1. Problem loading multiple functions

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

</body>

Copy after login

You can only load like this in the Onload event, which is ugly... In JQuery, you can use multiple JQuery.Ready() methods, and they will be executed in order

2. Code and content are not separated
It goes without saying that this is so disgusting -.-!!

3. The order of execution is different
For the Body.Onload event, it will not be triggered until all page content is loaded. I mean all content, including pictures, flash, etc. If the page has a lot of content, the user will wait for a long time.

As for the $(document).ready() method, this method will only be triggered after all the DOM of the page is loaded, which will undoubtedly greatly speed up the web page.

But for some special applications, such as zooming in and out of pictures and cropping pictures. Does it need to be executed after all the content of the web page is loaded? I recommend using the $(window).load() method. This method will not be triggered until all the content of the page is loaded, and it does not have the disadvantages of the OnLoad event.

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

Copy after login

The above code will be executed in order after all the content of the page is loaded.

Of course don’t forget the corresponding Unload method

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

Copy after login

The above code will be triggered when the page is closed.

Fire JS code before all DOM loads
This method is my favorite when debugging, and sometimes I also use this method during development

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

Copy after login

Yes, it is to use the form of js closure to embed the js code into the body. This code will be executed automatically. Of course, you can also embed the js code directly. In this way, you must pay attention to the order issue, 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>

Copy after login

The above two pieces of code, the second piece of code can only interpret the DOM before the current code, and test does not exist in the number of parsed DOM, so the second piece of code cannot be displayed correctly.