To begin, download a copy of jQuery and add it to your document. There are two types of jQuery you can download — compressed and uncompressed.
The uncompressed version is ideal for development or debugging; while the compressed version is recommended for production as it saves bandwidth and boosts performance due to its smaller file size.
You can download jQuery from this link: https://jquery.com/download/
After downloading the jQuery file, you'll notice it has a .js extension. Since jQuery is a JavaScript library, you can include the jQuery file in your HTML document using the <script> tag, just like you would with regular JavaScript files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Always include the jQuery file before your custom scripts; otherwise, the jQuery APIs will not be available when your jQuery code tries to use them.
Tip: Notice that we've omitted the type="text/javascript" attribute in the <script> tag in the example above. This is because it's not needed in HTML5. JavaScript is the default scripting language in HTML5 and all modern browsers.
Alternatively, you can add jQuery to your document using free CDN (Content Delivery Network) links, if you prefer not to download and host jQuery yourself.
CDNs can improve performance by reducing loading times, as they host jQuery on multiple servers around the world, and users will get the file from the nearest server to them.
This also has the benefit that if a visitor to your website has already downloaded a copy of jQuery from the same CDN while visiting other sites, it won't need to be re-downloaded because it will already be in the browser's cache.
You can also include jQuery through Google and Microsoft CDNs.
Now that you understand the purposes of the jQuery library and how to include it in your document, it's time to use jQuery in a practical example.
In this section, we will perform a simple jQuery operation by changing the color of the heading text from the default black to red.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First jQuery Powered Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#0088ff");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>In the example above, we've used a simple jQuery operation to change the color of the heading, i.e., the <h1> element, using the jQuery element selector and css() method when the document is ready, known as the document ready event. We'll explore jQuery selectors, events, and methods in upcoming chapters.