JQuery Doc on Ready - Javascript

JQuery is a fast, small, and feature-rich JavaScript library that makes it easy to navigate and manipulate HTML documents. One of its most commonly used functions is the 'ready' function, which executes a script when the HTML document is fully loaded and parsed.

The syntax for the ready function is as follows:

$( document ).ready(function() {
   // your code here
});

This function wraps the code inside it and waits until the HTML document is fully loaded before executing the code. This means that your code won't run until all the elements on the page have been fully loaded, making it an ideal place to manipulate those elements.

Examples

Here are some examples of what you can do with the 'ready' function:

Example 1: Hide an Element

$( document ).ready(function() {
   $("#myElement").hide();
});

In this example, the code hides an element with the ID 'myElement' when the page is fully loaded.

Example 2: Add a Click Event to an Element

$( document ).ready(function() {
   $("#myButton").click(function() {
      alert("Button Clicked");
   });
});

This code adds a click event handler to a button with the ID 'myButton', which displays an alert when the button is clicked.

Conclusion

The 'ready' function is a powerful tool that allows you to easily manipulate elements on a page once it has been fully loaded. Whether you are hiding an element, adding an event handler, or doing something else entirely, the 'ready' function is an essential part of any web developer's toolkit.

Note: Since jQuery 3.0, the ready function has been deprecated, and the recommended method of binding to the ready event is now:

$(function() {
  // your code here
});

This is functionally identical to the previous method, but it is slightly cleaner and more concise.