Differences between document and window and load and ready in jQuery _ jquery

Source: Internet
Author: User
This article mainly introduces the differences between document and window and load and ready in jQuery. If you need them, you can refer to the children's shoes that have used JavaScript. You should know the window object and document Object, I should have heard of the load and ready events. I also know about the minor events, and I think it's not that easy to know until something goes wrong recently.

First, let's talk about window and document. intuitively, window represents the browser window, while document represents the dom elements loaded in the browser window. Further, document is an attribute of window, window is the top-level object.

What is the difference between the two? It's easy to understand. Assume that there is a browser that loads a particularly long page that exceeds a screen. Of course, the scroll bar will certainly appear. At this time, $ (window ). height () and $ (document ). the height () is not equal, and the document height must be greater than the window, because the window is always so large. See:

Let's talk about the load event and ready event.(Load and ready here refer to jQuery events, the same below ).

The load event is mainly used to replace the native window. onload. It can only be used in two scenarios:

· Window object. For example, $ (window). load (fn );.

· URL elements (images, scripts, frames, iframes ). For example, $ ("img"). load (fn );.

In addition, no element has a load event, such as $ (document). load (fn). This is an incorrect syntax and will not be executed at all.

The load event can be triggered only after the page is fully loaded. The so-called Full loading is not only the dom structure is loaded, but also all the Link References are loaded. For example, if a page contains a large number of images, you must wait until each image is fully loaded.

The most important thing is that jQuery official documentation clearly states that the cross-browser compatibility of the load event is poor (It doesn' t work consistently nor reliably cross-browser ). Google Chrome only supports $ (window ). load (fn); while Firefox supports $ (window ). load (fn); and $ ("img "). load (fn );.

Therefore, the load event is strongly not recommended unless necessary.

Finally, let's talk about ready. The ready event can be added to any element, such as $ (window ). ready (fn);, $ (document ). ready (fn);, $ ("p "). ready (fn); and so on.

The ready event does not require the page to be fully loaded. You only need to load the dom structure to trigger the event.

You can register multiple ready events at the same time. The events are executed in the order of registration. Note that even if the ready events of different elements are registered, they are executed sequentially. For example, the following code:

The Code is as follows:


$ (Window). ready (function (){
Alert ("window ");
});
$ (Document). ready (function (){
Alert ("document ");
});
$ ("P"). ready (function (){
Alert ("p ");
});

According to common sense, p should be loaded first, so execute alert ("p"); first, then alert ("document"); or alert ("window ");, unfortunately, alert ("p"); is the last execution. Therefore, whether or not the ready event is registered on the same element, it is executed in the registration order.

Last, the ready event and window. onload (or) Is conflicted. If window. onload (or). The ready event is not executed.

After so many discussions, it turns out that $ (document). ready (fn); has the best compatibility and security. If you have such requirements, try to use this method.

Related Article

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.