Learn jQuery

Include jQuery in web pages – Local or CDN

Learn jquery include jquery in web pages

In the last article of the learn jQuery series, we learned to create 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 will 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 in all our web pages. Or the second one, we can use the 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 website such as images, stylesheets, and javascript files. If not, you can do it like this –

.
+-- jQuery project
|   +-- assets
|       +-- images
|       +-- javascript
|       +-- stylesheets
+-- index.html
project directory structure
project directory structure

Now head over to 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.

download jquery in project
download jquery in project

Now open the page where you want to use jQuery and add it right before the closing body tag.

<script src="assets/javascript/jquery.js" type="text/javascript"></script>
include jquery in web page
include jquery in web page

So there you have it. After we have included 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 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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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>

Develoeprs can use any one of the two script tags right before the closing body tags.

Running jQuery

After including 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.

<!DOCTYPE html>
<html>
<head>
	<title>Learn jQuery</title>
</head>
<body>
<h2>Learn jQuery</h2>

<script src="assets/javascript/jquery.js" type="text/javascript"></script>

<script>
	var heading = $("h2");
	heading.css("color", "red");
</script>

</body>
</html>

Here is the output of the above html document –

jQuery first code
Output

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, just 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 wrote more code, it would have executed perfectly fine as long as the code 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 is not only difficult to maintain but how we’ll use this code in other pages of our website.

To fix this problem, we will need to write our code in a separate file and include that file wherever needed.

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 is going to have, bunch of javascript scripts.You can name it whatever you like.

create jquery script file
create jquery script file

Now open script.js file and copy two lines of code from index.html file we wrote earliar.

script.js file
script.js file

Now we can include the script.js file in our html pages like we did when we included jquery.js.

<script src="assets/javascript/script.js" type="text/javascript"></script>
include jquery code in html
include jquery code in html

Now open the index.html file in the browser and it looks like it did before. Only 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, it has to run after the jQuery file has loaded. Otherwise, the browser console will through a bunch of 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 jQuery selector engine in multiple parts. So make sure you make the most out of it. See you in the next article.

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.

This website uses cookies to improve your experience. We'll assume you're ok with this. Thank you! Accept Read More