1. Understanding of page loading
Generally speaking, the corresponding loading order of a page is: domain name resolution—> load html—> load js and css—> load pictures and other information.
2. About ()
Execution time: It can be called when the DOM is fully ready.
Multiple use: Use multiple times in the same file, call once.
Understanding: () means to execute the code in the ready() method after the DOM is loaded. In other words, the original intention of this method is to make the execution time of the code not start to be executed after the DOM is loaded.
/*
Multiple use: The result is: first one, then two
*/
function one(){
alert("one");
}
function two(){
alert("two");
}
$(document).ready(function(){
one();
});
$(document).ready(function(){
two();
});
/*
How to write
*/
//JQ writing method$(document).ready(function(){
//do something
});
//Abbreviation, default document$().ready(function(){
//do somethin
});
//Abbreviation$(function(){
//do something
});3. About ()
Execution time: All elements in the web page (including all associated files) are fully loaded into the browser, that is, JavaScript can access all elements in the web page at this time.
Multiple executions: JavaScript's onload event can only save references to one function at a time, and it will automatically call the last function to overwrite the previous function.
/*
Multiple use: The result is: Only two was executed
*/
function one(){
alert("one");
}
function two(){
alert("two");
}
= one;
= two;
/*
How to write
*/
= function(){
//do something
}
//Equivalent to$(window).load(function(){
//do something
})4. The difference between
The difference between and - JavaScript document loading completion event.
There are two kinds of events when the page loads:
First, it is ready, which means that the document structure has been loaded (not including non-text media files such as pictures).
The second is onload, indicating that all elements on the page, including pictures and other files, are loaded.
5. Why use () or ()
The code in $(document).ready() is executed only after the page content is loaded. If the code is written directly into the script tag, the code inside will be executed after the page is loaded. At this time, if the code executed in the tag calls the code or dom that has not been loaded, then an error will be reported. Of course, if you put the script tag at the end of the page, then there is no problem. At this time, the effect is the same as the ready.
6. Use scenarios of ()
Click the paragraph, this paragraph is hidden
<html>
<head>
<meta charset="utf-8">
<title>
test
</title>
<script src="/jquery/1.10.2/"></script>
<script>
$(document).ready(function () {
$("p").click(function () {
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me,I will disappear.</p>
</body>
</html>If you remove $(document).ready(function(){});, you cannot hide the paragraph
<html>
<head>
<meta charset="utf-8">
<title>
test
</title>
<script src="/jquery/1.10.2/"></script>
<script>
$("p").click(function () {
$(this).hide();
});
</script>
</head>
<body>
<p>If you click on me,I will disappear.</p>
</body>
</html>But if you put script at the end of the page, you can restore the hidden effect
<html>
<head>
<meta charset="utf-8">
<title>
test
</title>
<script src="/jquery/1.10.2/"></script>
</head>
<body>
<p>If you click on me,I will disappear.</p>
<script>
$("p").click(function () {
$(this).hide();
});
</script>
</body>
</html>This is all about this article about detailed explanations. For more related and content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!