jQuery document ready With Examples [Latest]

jQuery document ready

We must make sure that the web page is ready for manipulation by jQuery methods. That’s why it’s always a best practice to include all your code inside jQuery document ready function block.

jQuery Document Ready Function Syntax

$(document).ready( function )
$( function )

First we use $(document) to create a jQuery object from the document. Then .ready() function is called on that jQuery object, then pass the function we want to execute.

The second syntax $(function) can be used as an alternative to $(document).ready().

This method is not compatible with “onload” attribute. Generally it is not used with <body onload="">. If you want to use the load attribute you can use .load() function in jQuery instead of .ready() function.

jQuery Document Ready Function Example

Following example demonstrates how to use jQuery document ready function on the web page.

Generally, we include document.ready function after the opening script tag (<script>).

Button click and the toggle function are inside the document ready block. Therefore, it will not execute before the loading of <button> and <div> elements.


&lt;html&gt;
 &lt;head&gt;
    &lt;title&gt;jQuery Document Ready Function Example&lt;/title&gt;
    &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" language="javascript"&gt;
     $(document).ready(function() {
     $("button").click(function () {
     $(".textLine").toggle();
     });
     });
   &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;button&gt;Click Here to Toggle&lt;/button&gt;
     &lt;div class="textLine" style="background-color:yellow;"&gt;
      This is a yellow line.....
     &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<title>jQuery Document Ready Function Example</title>

$(document).ready(function() {

$("button").click(function () {

$(".textLine").toggle();

});

</script>

</head>

<body>

<button>Click Here to Toggle</button>

This is a yellow line.....

</div>

</body>

</html>

jQuery Document Ready Function Demo

jQuery Document Ready Function Summary

It is always a safer practice to write all your code inside document ready function if you want to make sure that everything is working fine.

That’s all about a quick roundup on document ready function in jQuery.

jQuery document ready With Examples [Latest]

Byadmin