Shulou(Shulou.com)06/01 Report--

Editor to share with you what is the difference between the document-ready function in JavaScript and jQuery. I hope you will get something after reading this article. Let's discuss it together.

1. Document ready function

The document ready function of JavaScript:

_ window.onload = function () {alert ("welcome!") }

Document ready function in jQuery:

/ / write 1 $(document) .ready (function () {alert ("Welcome!") }) / / write 2 $(function () {alert ("Welcome!") })

By executing the above code, we can see that JavaScript's _ window.onload=function () {/ / execute code} and jQuery's document ready function $(document) .ready (function () {/ execute function}) are equivalent. But there are also differences between the two, so let's share the differences with you below.

2. The difference between _ window.onload and $(document). Ready () _ window.onload$ (document). The timing of ready () execution must wait until all the content in the page has been loaded (including pictures) before you can execute the number of functions written after all the DOM structures in the page have been drawn.

You cannot write multiple, for example:

_ window.onload=function () {}

_ window.onload=function () {}

At this point, the second overrides the first.

Can write more than one at the same time, for example:

$(document) .ready (function () {})

$(document) .ready (function () {})

Both functions are executed

Simplified writing without $()

A brief explanation of the difference between the two is as follows:

(1) in the timing of execution, _ window.onload means that all the contents of the page are loaded, and $(document) .ready () means that all the DOM elements of the page are loaded. For example, there is a picture label

The _ window.onload of JavaScript can not execute the function in the registration event until the whole picture of aa.jpg is loaded, but the document-ready function of jQuery has to wait

The tag pair can be executed after loading, that is, the page control that needs to be parsed here is a picture tag pair, without waiting for the picture to be displayed.

(2) the number of functions written is mainly reflected in whether it is covered or appended. Let's compare it with a simple example.

First write a JavaScript program with a _ window.onload registration event to print different data

The code is as follows:

_ window.onload = function () {alert ("aa")}; _ window.onload = function () {alert ("bb")}

The implementation results are as follows:

We find that after the code is executed, the bb prompt box pops up first, but not the aa prompt box, indicating that the _ window.onload of JavaScript cannot write multiple functions. If you write multiple functions, the latter will overwrite the previous one.

Now let's write the same program in jQuery with the following code:

$(document) .ready (function () {alert ("aa")}); $(document) .ready (function () {alert ("bb")})

The implementation results are as follows:

According to the execution results, we can see that the code prints two sets of data by using the document-ready function of jQuery. The program first prints the first data aa, and then prints the second data bb, indicating that there can be multiple document-ready functions of jQuery. If you have multiple document-ready functions, the order of execution is to start with the first piece of data and print one by one, without overwriting like _ window.onload.

(3) the simplified writing belongs to the grammatical norm. _ window.onload has no abbreviated form; $(document) .ready (function () {/ / execute code}) is abbreviated to $(function () {/ / execute code}), which is often used in development.

After reading this article, I believe you have a certain understanding of "what is the difference between document-ready functions in JavaScript and jQuery". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.