Alternatively, you can include jQuery in your document through freely available CDN (Content Delivery Network) links, if you don’t want to download and host jQuery yourself.
CDNs can offer a performance benefit by reducing the loading time, because they are hosting jQuery on multiple servers spread across the globe and when a user requests the file, it will be served from the server nearest to them.
This also offers an advantage that if the visitor to your webpage has already downloaded a copy of jQuery from the same CDN while visiting other sites, it won’t have to be re-downloaded since it is already there in the browser’s cache.
jQuery’s CDN provided by StackPath
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>You can also include jQuery through Google and Microsoft CDN’s.
Creating Your First jQuery Powered Web Page
So far you have understood the purposes of jQuery library as well as how to include this in your document, now it’s time to put jQuery into real use.
In this section, we will perform a simple jQuery operation by changing the color of the heading text from the default black color to red.
Example
<!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 above example we’ve performed a simple jQuery operation by changing the color of the heading i.e. the <h1> element using the jQuery element selector and css() method when the document is ready which is known as document ready event. We’ll learn about jQuery selectors, events and methods in upcoming chapters.