search

Home  >  Article  >  Web Front-end  >  JQuery Tips related (1)----About $.Ready()_jquery

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

WBOY
WBOYOriginal
2016-05-16 16:39:371579browse

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>

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>

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");
    });

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>

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>

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.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of event-driven programming in Node.js_node.jsNext article：Detailed explanation of event-driven programming in Node.js_node.js

Related articles

See more