jQuery Installation

In order to use JQuery in your web page, you must include the JQuery JavaScript file in your web page. Before you do so, you must first decide on two methods to access the JQuery JavaScript file:

1. Downloading JQuery and hosting it in your own web application.
2. Referencing JQuery at the Google Content Delivery Network (CDN).

I will explain both options below. You can also read about JQuery download and installation on the JQuery download page. In fact, to download the latest version of JQuery you will have to look at that page.

 

Downloading JQuery

If you choose to download the JQuery API, you will have to put it on a web server somewhere, so your web pages can reference it from a <script> tag. In that case, you can reference the JQuery libary using the following HTML code:

<script type="text/javascript"
        src="/jquery-dir/1.6.1/jquery.min.js"></script>

This examples assumes that you have put the JQuery JavaScript file in your web app, in the directory

${webapp-root-dir}/jquery-dir/1.6.1

where ${webapp-root-dir} is the root directory of your web application.

 

Referencing JQuery at Google CDN

An easier way to include JQuery in your web pages is to simply reference it at the Google CDN. Doing so has two advantages:

1. Your web app is relieved of the traffic from the JQuery download, when your pages are accessed.
2. There is a greater chance that the client browser already has the JQuery file cached, from earlier visits to other sites that also reference JQuery.

You can reference JQuery at the Google CDN using the following HTML code:

Referencing JQuery at Google CDN

An easier way to include JQuery in your web pages is to simply reference it at the Google CDN. Doing so has two advantages:

1. Your web app is relieved of the traffic from the JQuery download, when your pages are accessed.
2. There is a greater chance that the client browser already has the JQuery file cached, from earlier visits to other sites that also reference JQuery.

You can reference JQuery at the Google CDN using the following HTML code:

<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>

Minimized vs. Full JQuery Versions

There are two versions of JQuery you can reference in your web pages. The miminized (minified), and the full version. There are no functional differences between these two versions. The only difference is the file size, as I will explain below.

The full version contains the JavaScript code in an easy-to-read format. This makes reading and debugging the code easier. The disadvantage is that this file is much larger than the minimized version, resulting in more traffic and slower downloads.

The minimized version is a compacted edition of the full version. This version is very hard to read and debug inside. But the file is smaller, resulting in faster downloads, and less traffic.

Personally, I would use the full version during development, and when the site is ready to go live, I would switch to the minimized edition. That way I get the best of both worlds.