jQuery Logo

jQuery Tutorial

by Bob Downs

Introduction and Implementation

This tutorial will teach you how to implement and use the popular jQuery library in your web page. It assumes you have existing knowledge of HTML, CSS, and JavaScript.

Implementation

There are two ways to implement the jQuery library in your web page. One way is to download the jQuery file and place it into the directory structure of your web page. The second way is to link to the Content Delivery Network (CDN) that jQuery provides on their website.

Download Method

To use the Download method, navigate to https://jquery.com/download/ and then choose the version you prefer. The uncompressed version is best for development while the compressed version is best for production.

Once you've downloaded your preferred version of the jQuery.js file, store it in the same directory as your HTML file. Then link to this .js file inside the body tag of your HTML file using the script tag.

Below the script tag that links to the jQuery.js file, create another script tag that links to your own specific JavaScript file that contains your own JavaScript/jQuery code.

CDN Method

To use the CDN method, navigate to https://code.jquery.com/ and then choose the version you prefer. After choosing you prefered version, choose whether you want to use the uncompressed, minified, slim, or slim minified flavor in your web page. Once you've decided upon the flavor, right-click on the respective link and copy its URL.

Once you've copied the URL, link to it inside the body tag of your HTML file using the script tag.

Below the script tag that links to the jQuery CDN URL, create another script tag that links to your own specific JavaScript file that contains your own JavaScript/jQuery code.