Learn how to build and design websites with our tutorials.

Introduction to jQuery

View Tutorial Contents


What Is jQuery?

Javascript is commonly used to make web pages interactive. jQuery is a lightweight Javascript library that makes working with Javascript much easier.


Why Learn jQuery?

There are some areas where jQuery makes it easier to work with Javascript, including:


What Should You Know Before Learning jQuery

Before you learn jQuery you should at least be familiar with the basic concepts of:


How To Add jQuery To Your Web Pages

There are two ways to add jQuery to your web pages. You can:

NOTE: CDN stands for Content Delivery Network.

NOTE: It is a best practice to link to a jQuery file hosted on a Google CDN or a Microsoft CDN for live websites.

When a user visits a website that links to a jQuery file hosted on either a Google CDN or a Microsoft CDN, it will store it in cache, this leads to a faster load time any other time when visiting other websites that link to a jQuery file hosted on either a Google CDN or a Microsoft CDN.

Also, when linking to a jQuery file hosted on either a Google CDN or a Microsoft CDN, the web browser will automatically download the file from the closest CDN available.

Linking To A jQuery File From A CDN

Below are the links to the jQuery Google CDN and Microsoft CDN hosted files.

The jQuery 2.x file version is the same as the jQuery 1.x file version, except that it does NOT support Internet Explorer 6, 7 or 8. It is generally recommended that you use the jQuery 1.x file version because IE 8 is relatively common, unless you do not care about your jQuery working on IE 8.

Google CDN jQuery 1.x snippet:


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

Google CDN jQuery 2.x snippet:


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

Microsoft CDN jQuery version 1.11.3


<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.js"></script>

jQuery version 2.1.4


<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>

If you chose to link to one of the Google CDN or Microsoft CDN hosted jQuery files, at this point your HTML file should look something like this:


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

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

</head>
<body>

</body>
</html> 

Downloading jQuery To Your Website

You can download the latest jQuery version from jquery.com/download/.

There are two versions:

The compressed, production version has minified and compressed, so use this version for live websites.

The uncompressed, development version is used for development and debugging.

The jQuery file is referenced with the HTML <script> tag in the <head> section like the example below.

A best practice is to place it a directory where other Javascript files will go.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="js/jquery-1.11.3.min.js"></script>

</head>
<body>

</body>
</html> 

For those of you that are not new to this, you may have noticed that the opening <script> tag does not contain the type="text/javascript". This is because in HTML5, Javascript is the default scripting language and does not need to be included in the opening <script> tag.