From now on into jquery's events and applications.
Okay, here we are.
Ready () is similar to onload ().
But ready () is triggered whenever the page's DOM structure (document structure) is loaded. Non-text media files such as pictures are not included.
OnLoad () requires all elements of the page to be loaded before triggering.
There are several ways to use Ready ().
Law One:
<span style= "Font-family:times New roman;font-size:12px;" >$ (document). Ready (function () {do something}) </span>Law II:
<span style= "Font-family:times New roman;font-size:12px;" >$.ready (function () {do something}) </span>Fahsarm
<span style= "Font-family:times New roman;font-size:12px;" >$ (function () {do something}) </span>Example.
<span style= "Font-family:times New roman;font-size:12px;" ><body>
The pros and cons of the Ready () and onload events.
1. Load multiple functions.
<span style= "Font-family:times New roman;font-size:12px;" ><body onload= "A (); B ()" > </body></span>
This looks ugly, and the code content is not separated, and if you use Ready (), you can do it in more than one order ().
2. The order of execution affects the running efficiency of the code.If you have a lot of pictures and flash files, it takes a long time to use OnLoad (), and ready () just waits for the DOM structure to load and trigger.
For applications such as zooming in and out of the picture, it is necessary to wait for all elements of the page to execute, so you can use the $ (window). Load () method.
<span style= "Font-family:times New roman;font-size:12px;" ><script type= "Text/javascript" > $ (window). Load (function () { alert ("Hello"); }); $ (window). Load (function () { alert ("Good-Bye"); }); </script></span>
The code above is executed sequentially.
3, Unload method: triggered when the page is closed.
<span style= "Font-family:times New roman;font-size:12px;" >$ (window). Unload (function () { alert ("Good Bye"); }); </span>
4. The DOM is triggered before loading.
<span style= "Font-family:times New roman;font-size:12px;" ><body> <script type= "Text/javascript" > (Function () { alert ("Hello"); }) (jQuery) </script> </body></span>
The concept of closure is used above and will be executed automatically.
5, need to pay attention to a problem.
<span style= "Font-family:times New roman;font-size:12px;" ><body> <div id= "test" >this is the content</div> <script type= "Text/javascript" > Alert ($ ("#test"). html ());//correct, can display </script> </body></span>
<span style= "Font-family:times New roman;font-size:12px;" ><body> <script type= "Text/javascript" > alert ($ ("#test"). html ());//error, cannot display </ script> <div id= "test" >this is the content</div> </body></span>
The reason is very simple, the second code is because the execution of the JS code, the DIV has not yet loaded.
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
