javascript - About the use of $(function(){}) in jquery.

Question

Dear heroes, I am a novice in js. I was designing a simple website recently and copied some jq code from the website.
I found that the beginning of some code segments is $(function(){...}), then I will write it in $(function(){...}) in this format, such as $( function(){$('#denglu_submit').click(function(){...
But I also saw that there is no $(function(){}) in some code snippets, but directly $(' #denglu_submit').click(function(){...etc., I tested it, and both seem to work. So I don’t know what the difference is?

Answer 1

1. If you put both methods under the html page structure, it doesn’t matter whether you write $(function(){}) or not. They will be executed after the page is loaded (don’t forget html It is parsed and loaded from top to bottom).

2. But if you put them all on the page structure, the difference will be big. $(function(){}) is executed after the web page is loaded. Without $(function(){}), if you write it directly, press The html page is executed sequentially from top to bottom. That is to say, if the js code execution time is relatively long (such as obtaining a large amount of data), the following html content will not be loaded and displayed until the js is executed. This is obviously unreasonable. You should let the html content be displayed first.

3. So when we write code, it is usually better to add $(function(){}), so that even if the js code is wrong or takes a long time to execute, the main content of the page can be loaded without affecting user browsing. Web page. And it is best to put the code under the page structure to ensure that the page is loaded completely (after all, HTML is parsed and loaded in order from top to bottom).

---

Other little knowledge $(function(){}) is executed after the web page is loaded. It seems to be the same as window.onload = function() {} in native js. In fact, there is a difference. The former is after loading the structure (not including pictures), which is executed after loading the structure (including pictures).

Answer 2

$(function(){}) This is the logic inside that is executed after the js is loaded and the dom structure is loaded.

$('#denglu_submit').click(function(){...}) This is executed after js is loaded.

Answer 3

$(function(){...})The content here is to wait for the nodes of the page or the referenced files to be loaded before executing. This ensures that the page nodes have been loaded and the nodes corresponding to the selectors are also available.

$('#denglu_submit').click(function(){...}), this is executed when it is loaded here. When executing, it is not known whether #denglu_submit has been loaded into the page superior. If the page does not have this node, the corresponding event will not respond.
You can try to put these two pieces of code into head and run them, and you will know the difference!

Answer 4

Do you know window.onload? This is executed earlier than onload

Answer 5

First of all, let me answer. $ is the function name. For example:

$ = function() {
alert('good');
}
$();

In this way, define a function called $ and execute it; you can test it yourself;
Then

$(function() {})

Here, a parameter is passed in the $ function. This parameter is an anonymous function (a function without a name, also called a closure);
So suppose

$ = function(fun) {
fun();
}
$(function() { alert("good"); } );

The final execution is the same as above, but it will be more flexible. You can pass any function you want to execute into it for execution;
And here:

$('#denglu_submit').click(function(){alert("good");});

In fact, a string '#denglu_submit' is passed to the $ method, and then an anonymous function is passed to the click function in $. The entire function design is similar to this:

$ = function(a) {
    alert(a);
    return $;
}
$.click = function(fun) { fun(); }; 
$("hello").click(function() {alert("fun")});

Of course, jquery is definitely more complicated.