Last updated on

If you’re interested in creating an exciting, dynamic web page you might consider using jQuery to make life easier. Using it is straightforward enough you just need to install jQuery in your project.

Follow these simple steps to get started with jQuery.

Download it

The first step is to download the jQuery library. Head on over to jquery.com and download the latest version.

You’ll need to make sure you place the file within your current project or at least somewhere that is accessible once your project is complete.

Reference it

As jQuery is just a JavaScript library, installing doesn’t mean that you have to run an installer on your computer. All you have to do is reference the jQuery JavaScript file somewhere within your HTML or build tools.

You do this with a simple script tag:

<script src="jquery.js"></script>

The src attribute is set to point to the location where you have dowloaded jQuery in the previous step. It’s also probably worth pointing out that the script tag is best placed at the bottom of your page, just before your closing tag.

Checking it’s worked

If you put a further script tag in your document like this:

<script>
	$(function(){
		$('body').css('background-color', 'red');
	});
</script>

When you reload the page you will see that the page has turned red!

Troubleshooting

So if you didn’t get the result in the last step then something went wrong.

The first thing to check is did the jQuery library load OK. You can do this by examining your console and sources tab of the developer tools of your browser.

In this example, I made a typo to show what this might look like if the file had a different name.

The obvious fix for this is either modify the src of the first script tag to match the file name or modify the file name to match the script tag.

The other problem you may have is if there is an error in the syntax in your second script tag (the one that actually uses the jQuery library).

Check your syntax with the above code carefully if you still don’t see the result.

Using a CDN

You may also use jQuery with a CDN (content delivery network) which allows you to set the src attribute of the first script tag (to load jQuery) to a 3rd party URL.

A CDN is way to deliver files to a user of your site based on their location. In other words, when a user opens your site and the HTML has a call to load jQuery from a CDN then the CDN provider will select the closet location to the user to deliver the file (thereby cutting down the number of nodes or ‘hops’ required).

There are plenty of CDNs available including the official jQuery one at https://code.jquery.com/

To use the CDN you simply get the link the jQuery file and place it in the first script tag on your page.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

This will do the same job as our previous example but means you don’t actually have to download jQuery in the first place and store it in your project.

CDNs are generally quite good because:

* You don’t need to download the jQuery file
* They (probably might) give you better performance because of the way they deliver the file
* Might save on bandwidth

Users of your site might see a reduction in bandwidth usage on your site because, if they have already downloaded the jQuery library from that particular CDN then they will have it cached in their browser and won’t need to re-download.

Disadvantages of CDNs?

You could also argue that the CDN server could go down and break your website but I would say that this is probably a rare occurrence and not something to worry about when using a CDN.

Conclusion

That’s all there is to it.

Whether you download a copy of jQuery or use a CDN the steps are the same:

* Place a script tag at the bottom of your page with the link to jQuery
* Place a second script containing the jQuery code you want to run

Now you’re ready to starting adding some jQuery awesomeness to your site!