EN
jQuery - html template with document ready function example
12
points
Using jQuery library it is necessary to wait until the Document Object Model (DOM) becomes ready. This article shows how to create a 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 the 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 the 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>