In the last article of the learn jQuery series, we learned to create a jQuery development environment. Fortunately, it was pretty easy to create. In this article, we will learn to include jQuery on our web pages. In this article, we will fire our first jQuery code and see it working in our web browser.
So without any further adieu, let’s start.
Including jQuery in web pages
There are two methods we can include jQuery in our web pages. The first is to download it locally and reference it on all our web pages. Or the second one, we can use jQuery hosted by Google CDN or cdnjs. Both methods are easy to do. I recommend the second method, as it will load jQuery faster in users’ web browsers regardless of their physical location.
Method 1: Download jQuery locally
Now head over to the jQuery website to download the latest version of jQuery. At the time of writing this article, jQuery’s latest version is 3.5.1.
Now open the page where you want to use jQuery and add it right before the closing body tag.
So there you have it. After including jQuery in our web page, we can write jQuery code after that reference line.
Method 2: Download jQuery from CDN
The second method of loading jQuery in our HTML pages is through a Content Delivery Network. This is the recommended method as it speeds up the loading of a web page. Instead of the jQuery file loading from our server, it is being downloaded from the CDN, which means the user who loads up the page, the jQuery file, is downloaded from the server closest to his location.
Mainly there are two CDNs that we can use, jQuery hosted by Google and cdnjs.
jQuery hosted by Google
jQuery hosted by cdnjs.com on Cloudflare
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
Developers can use any one of the two script tags right before the closing body tags.
After including the jQuery file on our web page, we are ready to use jQuery anywhere after the jquery script tags. We can use another pair of script tags and write jQuery inside the tags.
Here is the output of the above HTML document –
As you can see, the heading color is red. It means the simple jQuery code executed perfectly fine.
<script> var heading = $("h2"); heading.css("color", "red"); </script>
If the above code does not make any sense to you, do not worry. We will discuss the jQuery selector engine and more interesting & useful methods in the later articles. For now, know that the first line selects the ‘h2’ heading, and the second line adds inline-style to the selected heading.
Separate files for custom jQuery code
The above code ran without any issues. If I had written more code, it would have executed perfectly fine as long as it was correct. But writing more & more code in an HTML file is very tedious. Just imaging having hundreds of lines of jQuery code in the footer of a single HTML file. It isn’t easy to maintain and use this code on other pages of our website.
We will need to write our code in a separate file and include that file wherever needed to fix this problem.
Now open the script.js file and copy two lines of code from index.html file we wrote earlier.
Now we can include the script.js file in our HTML pages like we did when we included jquery.js.
Now open the index.html file in the browser, and it looks like it did before. This time, the jQuery code is loading from a separate file where it’s easier to write & maintain the code.
The ending note
So this is how easy it is to include jQuery in web pages. Make sure whatever the code you write has to run after the jQuery file has loaded. Otherwise, the browser console will throw many errors, and none of our code will work.
That’s it for now. In the next article, we will start to learn the jQuery selector engine. It is an important topic, and I will cover the jQuery selector engine in multiple parts. So make sure you make the most out of it. See you in the next article.