Scott Granneman

panorama-110.jpg

Adding jQuery to Your Projects

Many of the projects covered on this website require that you have a link to jQuery in your webpage’s <head>.

We can do this a few ways (please note that the version number below may be out of date, so be sure to follow the links & use the latest version):

  1. Link to jQuery using one of the CDN1 links provided by jQuery2, Google, Microsoft, or CDNJS. For example, if you wanted to use jQuery’s copy (which is always the most up to date), you’d use this:

    <!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

    The advantage to this method is that it’s easy & just works3, as long as you’re online while you’re working on your projects. If you’re not online, obviously your laptop won’t be able to load jQuery from the CDN!

  2. Download jQuery4, place it somewhere in your website’s file structure (I suggest a folder named js), & then link to your local copy:

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

    The advantage to this method is that it works if you’re offline, since you hae a local copy of the code. The disadvantage is that it’s slightly more work (but still not that onerous).

Frankly, I'd probably just do the first one.

  1. What’s a CDN? Wikipedia to the rescue!

    A content delivery network or content distribution network (CDN) is a system of computers containing copies of data placed at various nodes of a network.

    When properly designed and implemented, a CDN can improve access to the data it caches by increasing access bandwidth and redundancy and reducing access latency.

    Basically, it’s a collection of servers located all over the world. Companies hire CDNs to keep copies of software & content on those servers; the idea is that when people request that software or content, it’s delivered to them from the server closest to them, thereby speeding up the delivery. ↩

  2. There are actually many different versions of jQuery, each with a different purpose & intended use. For the full list, take a look at http://code.jquery.com. ↩

  3. Is it a good idea to use a CDN to host jQuery & just link to it? Absolutely! For reinforcement, check out “3 reasons why you should let Google host jQuery for you”. That settles it, as far as I’m concerned. ↩

  4. You'll notice that you have two choices when you download jQuery: Minified & Uncompressed. Take a look at both. You’ll notice that the Uncompressed version is far more human readable, but is hundreds of lines long, while the Minified version isn’t human readable at all, but is less than 5 lines long (although each line itself stretches on forevvvvvvverrrrrrrr).

    The Minified versions have been minified (duh!); all unnecessary whitespace has been removed so that it’s a much smaller file that web browsers & computers can still happily read & use, but humans can no longer parse it. But so what? Use the Minified version! ↩

WebSanity Top Secret