Languages
[Edit]
EN

jQuery - html template with document ready function example

12 points
Created by:
nickkk0
467

Using jQuery library it is necessary to wait until the Document Object Model (DOM) becomes ready. This article shows how to create simple html template for jQuery.

Note: read this article to know how to check if document is ready without jQuery.

1. ready method example

This example shows most commonly used approach to assign ready event. 

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <script>

    $(document).ready(function() {
      	// this is place for jQuery based source code...
      	console.log('Document is ready to use jQuery!');
    });
   
  </script>
</body>
</html>

Notes:

  • $(document) can be replaced with¬†$('document'),
  • $(document).ready(...) can be used many times in sorce code executing some parts of code¬†if it makes code more clear - check last example in this article.

2. Alternative ready event callback example

This example shows second most commonly used approach to assign ready event. 

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <script>

    $(function() {
      	// this is place for jQuery based source code...
      	console.log('Document is ready to use jQuery!');
    });
   
  </script>
</body>
</html>

3. Multiple ready method calls example

This example shows how to catch ready event many times.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <script>

    $(document).ready(function() {
      	console.log('Document is ready to use jQuery - code 1!');
    });

    $(document).ready(function() {
      	console.log('Document is ready to use jQuery - code 2!');
    });
   
  </script>
  <p>Some text here...</p>
  <script>

    $(document).ready(function() {
      	console.log('Document is ready to use jQuery - code 3!');
    });
   
  </script>
</body>
</html>

Merged questions

  1. How to create HTML template using jQuery?

jQuery

Native Advertising
ūüöÄ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā

Join