Home > Developer > JavaScript
There are two types of page loading events: ready, indicating that the file structure has been loaded (excluding non-text media files such as images), and onload, indicates that all elements, including images, are loaded. (You can say: ready loads before onload !!!)
Generally, the style is controlled, and the slice size is controlled to be loaded in onload;
The jS event trigger method can be loaded in ready;
Many people who use jQ write scripts like this:
Common Syntax: [html]
$ (Function (){
// Do something
});
$ (Function (){
// Do something
});
In fact, this is short for jq ready (). It is equivalent to: [html] view plaincopyprint?
$ (Document). ready (function (){
// Do something
})
$ (Document). ready (function (){
// Do something
})
It is also equal to the following method. The default parameter of jQuer is: "document"; [html] view plaincopyprint?
$ (). Ready (function (){
// Do something
})
$ (). Ready (function (){
// Do something
})
$ (Document). Ready () method VS OnLoad event VS $ (window). load () method
The first thing we learned when to get started with JQuery is when to start the event. For a long time, the events triggered after page loading were all loaded into the Onload event of the "Body.
The Onload event of the Body has many drawbacks compared with the Ready method of JQuery. For example:
How to load Multiple Functions
<Body onload = "a (); B ();">
</Body>
The Onload event can only be loaded in this way, which is ugly...
In JQuery, you can use multiple JQuery. Ready () Methods to execute them in sequence.
Code and content are not separated
This does not seem to have to be said, and it is so annoying -.-!!
Different execution sequence
For the Body. the Onload event is triggered after all the page content is loaded. I mean all the content, including images and flash. if there is a lot of such content on the page, the user will wait for a long time.
For the $ (document). ready () method, this method is triggered only after all the DOM of the page is loaded, which undoubtedly speeds up the page.
However, for some special applications, the image can be scaled in or out, and the image can be cropped. What happens after all the content on the webpage is loaded? I recommend $ (window ). load () method. This method will not be triggered until all content on the page is loaded, and there is no OnLoad event. [html] view plaincopyprint?
<Script type = "text/javascript">
$ (Window). load (function (){
Alert ("hello ");
});
$ (Window). load (function (){
Alert ("hello again ");
});
</Script>
<Script type = "text/javascript">
$ (Window). load (function (){
Alert ("hello ");
});
$ (Window). load (function (){
Alert ("hello again ");
});
</Script> the above code is executed sequentially after all the content on the page is loaded.
Of course, do not forget the corresponding Unload method [html] view plaincopyprint?
<Script type = "text/javascript">
$ (Window). unload (function (){
Alert ("good bye ");
});
</Script>
<Script type = "text/javascript">
$ (Window). unload (function (){
Alert ("good bye ");
});
</Script>
The above code will be triggered when the page is closed.
JS Code is triggered before all DOM loads.
This method is my favorite during debugging. Sometimes I use this method during development [html] view plaincopyprint?
<Body>
<Script type = "text/javascript">
(Function (){
Alert ("hi ");
}) (JQuery)
</Script>
</Body>
<Body>
<Script type = "text/javascript">
(Function (){
Alert ("hi ");
}) (JQuery)
</Script>
</Body> yes, the JavaScript code is embedded into the body in the form of js closures. This code is automatically executed and can also be directly embedded into the js Code. In this way, pay attention to the order, as follows: [html] view plaincopyprint?
<Body>
<Div id = "test"> this is the content </div>
<Script type = "text/javascript">
Alert ($ ("# test" cmd.html (); // I Can display the content
</Script>
</Body>
<Body>
<Script type = "text/javascript">
Alert ($ ("# test" cmd.html (); // I Can't display the content
</Script>
<Div id = "test"> this is the content </div>
</Body>
<Body>
<Div id = "test"> this is the content </div>
<Script type = "text/javascript">
Alert ($ ("# test" cmd.html (); // I Can display the content
</Script>
</Body>
<Body>
<Script type = "text/javascript">
Alert ($ ("# test" cmd.html (); // I Can't display the content
</Script>
<Div id = "test"> this is the content </div>
</Body> in the above two sections of code, because the second section of code can only be interpreted to the DOM before the current Code, test does not exist in the number of resolved DOM. the second Code cannot be correctly displayed.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
