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

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.