Home >Web Front-end >Front-end Q&A >What are the four methods of jquery ready event
What are the four methods of jquery ready event
- 青灯夜游Original
- 2022-12-16 17:45:003523browse
The four methods of jquery ready event are: 1. "$(document).ready(function(){...})" method; 2. "jQuery(document).ready(function(){ ...})" method; 3. "$(function(){...})" method; 4. "jQuery(function(){...})" method.
The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.
jquery ready event
ready occurs when the DOM (document object model document object model) is loaded and the page is fully loaded (including images) event.
Since this event occurs after the document is ready, it is a good practice to place all other jQuery events and functions in this event.
In jQuery, there are the following 4 ways to write the ready event.
Grammar:
//写法1：
$(document).ready(function(){
……
})
//写法2：
jQuery(document).ready(function(){
……
})
//写法3：
$(function(){
……
})
//写法4：
jQuery(function(){
……
})[Code Analysis]
-
In writing method 1,
$(document)means First select the document and then call the ready() method. The parameter of the ready() method is an anonymous function, as shown in the figure below.
In writing method 2,
$refers tojQuery. Therefore, we can use$instead of jQuery. The two are equivalent, that is,$()is equivalent tojQuery().Writing method 3 is actually the most commonly used and simplest one. Everyone has been exposed to it many times before. In actual development, we also recommend using the form
$(function(){}), which is convenient and concise.Writing 4 is the complete form of writing 3. In actual development, we do not recommend its use.
$(document).ready() is the most important method in jQuery, which can greatly improve the loading speed of the page.
Example:
Use ready() to make the function available after the document is loaded:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>这是一个段落 。</p>
<button>切换段落的上滑与下滑。</button>
</body>
</html>
[Recommended learning: jQuery video tutorial, web front-end video】
The above is the detailed content of What are the four methods of jquery ready event. For more information, please follow other related articles on the PHP Chinese website!