Learn how to use jQuery in 2 simple steps. This tutorial will help you know how to quickly initialize jQuery in your HTML page.
Step 1.
Include the jQuery library into your HTML page.
There are two ways to include the jQuery library into an HTML page.
- First you can download it and store it into your working directory where the HTML file is also located.
- https://jquery.com/download/
- Second you can use jQuery with Content Delivery Network (CDN).
- Using jQuery with a CDN
In this tutorial, we will be using the second option, include the jQuery library with CDN particularly from https://code.jquery.com/. There are several other CDN available here Other jQuery Other CDNs .
Add the following codes inside the head part.
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>Step 2.
Launch your codes on document ready. This will make the codes run as soon as the document is ready to be manipulated when the browser finishes loading the document including images.
Add the following codes before the end of the body tag.
<script>
$( document ).ready(function() {
// Your code here.
});
</script>Try to add a sample code like console.log('Hello World !'); to know if jQuery loads as expected.
Complete Example.
<html lang="en-US">
<head>
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<body>
<script>
$( document ).ready(function() {
console.log('Hello World !');
});
</script>
</body>
</html>Result.
Console will display the following.
Hello World !
Leave a Reply