$ (document) The difference between ready () {}, $ (Fucntion () {}), (function () {}) (JQuery) onload ()

Source: Internet
Author: User

$ (function () {
Do someting
});
$ (document). Ready (function () {
Do someting
});
$ (). Ready (function () {
Do someting
})

These three methods are all jquery methods, different in the same way, but the effect is the same.

2. The differences between the three notation and the $ (window). Load (function () {...}), OnLoad ()

2.1. Problems with loading multiple functions

<body onload= "A (); B ();" >
</body>
This can only be loaded in the OnLoad event, very ugly ... In jquery, you can take advantage of multiple jquery.ready () methods, which are executed sequentially in order

2.2 Code and content are not separated
This seems to be needless to say, it is repugnant to people-.-!!

3.3 Execution sequence is different
For the Body.onload event, it is loaded all the page content before it will be triggered, I mean all content, including pictures, flash, etc. if a lot of these contents of the page will make the user wait for a long time.
For the $ (document). Ready () method, this method is only triggered when all the DOM of the page has been loaded, which undoubtedly speeds up the Web page greatly.
But for some special applications, the magnification of the film is reduced, and the picture is cropped. Need to load all the content of the Web page before executing it? I recommend using the $ (window). Load () method, this method will wait
All content on the page is loaded before it is triggered, and there is no downside to the onload event.

3.(function ($) {}) (JQuery)

(function () {
Alert ("HI");//do not necessarily finish loading the DOM, so be careful when manipulating DOM objects
}) (JQuery)

3.1 First (function () {}) () This is done by creating an anonymous method and executing it immediately (function () {}) This is the parenthesis after the anonymous method that immediately calls this method). Doing so creates a scope to ensure that internal variables do not conflict with external variables, such as jquery's internally defined variables, such as the.

3.2 (function ($) {}) (jquery) The main function of this writing is to ensure that jquery does not conflict with other class libraries or variables first of all to ensure that the variable name jquery is not a conflict with the outside (jquery internal $ and jquery is the same thing There are two names because you are afraid $ with other variable names conflict two the odds of jquery being in conflict with other variables are very small) and passing in anonymous objects, the anonymous object is named $ (actually the same as in jquery) and then you are free to (function ($) {}) ( JQuery) Write your plugin without having to consider whether there is a conflict with the external variables.

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en">2 <HTML>3  <HEAD>4   <Scripttype= "Text/javascript"src= "Jquery-1.7.2.min.js"CharSet= "Utf-8" ></Script>5  </HEAD>6  <BODYonload= "alert (' onload ')">7      <Scripttype= "Text/javascript"CharSet= "Utf-8" >8          9 Ten          $(function(){ One Alert ("$ (function ()"); A          }); - $ (document). Ready (function(){ - Alert ("$ (document). Ready"); the          }); - $ (). Ready (function(){ - Alert ("$ (). Ready (function ()"); -         }) +         //The above three methods are the same level, according to the code of the smooth execution, is loaded in the DOM object -          + $ (window). Load (function() { A Alert ("$ (window). Load (function ()");//is in the picture, Flash, etc. loaded after execution at         }); -  -         (function() { - Alert ("Hi");//Does not have to be executed in the DOM after loading, so you need to be aware of manipulating DOM objects - }) (JQuery) -  in         //the pop-up has been:hi-> $ (function ()-$ (document). Ready (function (), onload, $ (window). Load ( function () -      </Script> to  +  </BODY> - </HTML>

< reprinted from:http://www.cnblogs.com/allensoft/archive/2014/04/10/3656202.html>

$ (document) The difference between ready () {}, $ (Fucntion () {}), (function () {}) (JQuery) onload ()

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.