Detailed explanation of jQuery.ready() function instance usage

ready() function is used to execute the specified function immediately after the current document structure is loaded.

The function of this function is equivalent to the window.onload event.

You can call this function multiple times to bind multiple functions. jQuery will execute these functions immediately in the binding order after the DOM document structure is loaded.

Please note: Please do not use the ready() function and the onload event binding function of the element at the same time on the same page, because they are not completely compatible with each other. If you must use load, then please do not use jQuery's ready() and load() to add a load event handler to the window or more specified items (such as pictures).

This function belongs to the jQuery object (instance).

Syntax

jQueryObject.ready(fn)

Parameters

Parameter Description

fn Function type specifies the function that needs to be executed.

ready() will pass a parameter to function parameterfn. This parameter is the jQuery identifier. You can customize the name of the parameter and use it as an alias for jQuery.

Return value

ready()The return value of the function is of jQuery type and returns the current jQuery object itself.

Compared with the window.onload event, ready() has a higher execution priority. window.onload must wait until all elements in the current page, including images, are loaded before it is executed; ready() is executed immediately after the HTML structure is drawn, without waiting for all resources such as images to be loaded.

Most of the time, you can use ready() instead of window.onload. However, there are some exceptions, such as when using the :target selector, you must use the window.onload event (because it also relies on something outside the document structure).

Example & Description

ready() function has the following three equivalent forms:

function handler(){

//Here are the requirements Executed code

}

// Form 1

$(document).ready( handler );

// Form 2

$( ).ready( handler ); // This form is not recommended

// Form 3

$( handler );

Take the following HTML code as an example:

The following jQuery sample code is used to demonstrate the specific usage of the ready() function:

// Form 1

$(document).ready ( function(){

// Bind click event for btn button

$("#btn").click( function(){

alert("You Clicked the button!");

} );

} );

// Form 3

$( function(){

$("#message").html( 'Document loading completed!' );

} );

When multiple JS libraries coexist, the control of variable $ may be given to other JS libraries, such as Prototype. At this point, we can only use the variable jQuery in the global scope. However, the ready() function will pass in a parameter; jQuery, so we can customize the parameter name, so as to continue the variable $ within the function to access the jQuery library (you can also set it to another name, and then use the parameter variable to access jQuery ).

// Load the Prototype library file

// Load the jQuery library file

//Give up control of the variable $

jQuery. noConflict();

// Perform DOM operations based on Prototype (Control of variable $ is in the hands of Prototype)

$("myDiv").setStyle( {color : "#ffffff"} );

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

// Inside the function, we can still use the variable $ to access jQuery

$("#message").html( "The current jQuery version is: " + $.fn.jquery );

} );

jQuery(document).ready( function( abc ){

// Inside the function, we can use the variable abc to access jQuery

abc("#message").html( "The current jQuery version is: " + abc .fn.jquery );

} );

The above is the detailed content of Detailed explanation of jQuery.ready() function instance usage. For more information, please follow other related articles on the PHP Chinese website!