Installing jQuery

You've read about jQuery and you want to install it on your site.  Now what?

Installing the library is as easy as linking in a single .js file (for the core functions) and optionally the jQuery UI library if you want to use some of the extra features.  For now we'll focus on the core library, since the technique for jQuery UI is the same.  Once the library is included on your page, you call the functions almost the same as you would with plain javascript, with the <SCRIPT> </SCRIPT> tags.  You'll want to wait for the DOM to be ready before calling your code...  In plain old javascript that was normally done like this:

<script>
   function init() {
      // Call your startup code here
   }
   window.onload = init;
</script>

The jQuery method is similar, but instead of defining a function and setting that function to run when the window is finished loading, you wrap it in jQuery code that waits for everything to be ready then starts its contents:

<script>
$(document).ready(function(){
     // Call your startup code here
   });
</script>

 The jQuery site has a quick tutorial on setting this up, with a few examples of basic jQuery code, and that'll be my next post... keep an eye out for it here!

What I haven't mentioned yet is where to link the .js file from.  THAT is the source of many a discussion among developers.  On jQuery's site, they recommend downloading a copy and hosting it on your own server.  There are certainly benefits to hosting it yourself.  Another option they provide (along with large companies like Google and Microsoft) is pointing to code hosted on a Content Delivery Network (CDN) instead.  Searching the web a little, you'll probably find arguments for either case.  

Until recently, I have opted for the CDN method in any case where my site is on the Internet, or a downloaded file in cases where I was doing a self-contained site that could be run without being connected to the internet.  (Like a demo that could be viewed on a CD or USB drive, where you can't guarantee a connection)  I'm beginning to see a need to actually have a combination of both techniques.  First, let me explain each method, then I'll explain the combination.

Why use a downloaded copy?

If your site will be running in a situation where you can't guarantee internet access, you need a downloaded .js file.  This can happen if you bring a site with you on a computer and won't have a network connection.  It can also happen in some corporate situations if the company does not allow outside internet access, but instead restricts you to their own internal network.  I've heard some people insist they would rather use a downloaded copy because they don't trust that the CDN will be available.  Any site can go offline, so that is possible.  The argument there is that as long as a user is able to reach your site, the downloaded copy of the jQuery code will also be on your site so there's no risk of your code breaking because somebody else's site went down.  To use this method, you simply download a copy of the file from jQuery's download page and link it like so:

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

Why use a CDN?

A quick look on your favorite search engine will probably bring you to a very popular post about this topic, by Dave Ward on Encosia.com.  He does a thorough job of explaining the benefits of using a CDN-only technique, and most other blogs out there (including this one) cover the same three benefits, all resulting in a faster page-load for your users:

1. Decreased Latency - Your server is most likely in a single location.  For sake of this discussion, let's assume your server is in New York City.  If the person reading your site is also in NYC, then they don't have very far to go when downloading your content.  A few hops across town, and your page is in their browser.  If your visitor is coming from a distance, say Germany, then there are many more miles and connections to get through before your content reaches their browser.  Using a CDN offers a shorted download time for the jQuery file because major providers like Google and Microsoft have servers around the world.  The visitor from Germany would download your content from your server in NYC, but there's going to be a Google server much closer to Germany for him to download the jQuery file from.  Less hops, less distance, shorter load times.
2. Parallel Downloads - According to the W3C, browsers should not open/maintain more than 2 connections to a given server at once.  (This is not enforced, and some browsers do use more).  This means if a user is downloading a large image and a style sheet from your server, they need to wait for those to finish before downloading the jQuery file.  By using a CDN for the jQuery, that is now a different server so there are 2 more connections available and the downloads can happen simultaneously. No more waiting...  The load times may be on the order of milliseconds to even seconds across a slow connection, so this time does make a difference.
3. Caching - When a user downloads jQuery from your server, that file goes into the browser's cache so it doesn't need to download it again for every page in your site.  If they then go to a different site with its own copy of jQuery, the browser treats that as a different file and they need to download it again for that other site.  If both servers pointed to the same CDN (and there are only a few major ones, so this is likely) the user would only need to download it once and keep it cached for both sites. If the user had visited a site recently with the same version of jQuery, they would not need to download it at all for your site... reducing the download time for jQuery to ZERO.

Installing using a CDN is very similar to using a downloaded copy, except you change the path to the host's server.  Note that you can omit the "http:" or "https:" from the URL, and your browser will choose whichever protocol the rest of the page is using.  If you use HTTPS: the browser will not cache this content, so one of the benefits of using a CDN is wasted.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

The combination approach

With all the benefits of using a CDN to host your jQuery file, it may seem that's the best way to go.  Almost... Nothing on the Internet is perfect so there may be times where the CDN is unreachable for one reason or another.  (Network outages, changes in your corporate firewall without telling you... things do happen)  To get around this possibility, I recommend using the CDN approach with a fallback of a downloaded file.  The technique is straightforward, and only requires a little but of javascript to implement.  You would first attempt to link out to the CDN for the content, then test if it exists.  If the CDN failed for any reason, you then use document.write to create a link to your own copy of it.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
    document.write(unescape("%3Cscript src='jquery-1.7.2.min.js'%3E%3C/script%3E"));
}
</script>