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.
This example shows the most commonly used approach to assign ready event.
xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>5
</head>6
<body>7
<script>8
9
$(document).ready(function() {10
// this is place for jQuery based source code...11
console.log('Document is ready to use jQuery!');12
});13
14
</script>15
</body>16
</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.
This example shows the second most commonly used approach to assign ready event.
xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>5
</head>6
<body>7
<script>8
9
$(function() {10
// this is place for jQuery based source code...11
console.log('Document is ready to use jQuery!');12
});13
14
</script>15
</body>16
</html>This example shows how to catch ready event many times.
xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>5
</head>6
<body>7
<script>8
9
$(document).ready(function() {10
console.log('Document is ready to use jQuery - code 1!');11
});12
13
$(document).ready(function() {14
console.log('Document is ready to use jQuery - code 2!');15
});16
17
</script>18
<p>Some text here...</p>19
<script>20
21
$(document).ready(function() {22
console.log('Document is ready to use jQuery - code 3!');23
});24
25
</script>26
</body>27
</html>