What are the four methods of jquery ready event-Front-end Q&A-php.cn

What are the four methods of jquery ready event

青灯夜游

Release： 2022-12-16 17:45:00

Original

3499 people have browsed it

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.

What are the four methods of jquery ready event

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(){
    ……
})

Copy after login

[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 to jQuery. Therefore, we can use $ instead of jQuery. The two are equivalent, that is, $() is equivalent to jQuery().
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>

Copy after login

What are the four methods of jquery ready event

[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!