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
First of all, download jQuery in your project directory. I assume you have a separate folder for storing assets for your websites, such as images, stylesheets, and javascript files. If not, you can do it like this –
. +– jQuery project | +– assets | +– images | +– javascript | +– stylesheets +– index.html
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. Download it in the javascript directory of your project. And it’s done. 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
Developers can use any one of the two script tags right before the closing body tags.
Running jQuery
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.
Learn jQuery
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.
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. Inside our javascript directory, where we stored jquery.js, we can create a file called script.js. I am calling this file script.js because that is what it will have, a bunch of javascript scripts. You can name it whatever you like. 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.
