Saturday 19 November 2011

Using the Microsoft CDN or Google CDN for jQuery

As we develop new websites and try to introduce more user interactivity and animation effects it will become more frequent that we use some kind of JavaScript library.

Probably the most popular and most well-known is the jQuery library.  This post is going to show you how to link the library to your site.  We’ll also add a tip or two along the way.

For a jQuery tutorial click here for the w3schools page.

Adding the jQuery Library to Your Pages

The jQuery library is stored as a single JavaScript file, containing all the jQuery methods. It can be added to a web page with the following mark-up:

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

Remember that the <script> tag should be inside the page's <head> section. 

The above method requires you to download the jQuery file (see here) and store it on your server with your site.  Two versions of jQuery are available for downloading: one minified and one uncompressed (for debugging or reading).

Alternatively you can use a Content Delivery Network (CDN).  There are three CDNs available; jQuery CDN (via Media Temple), Google Ajax API CDN and the Microsoft CDN.

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


Microsoft:
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>

jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js”></script>

 

A couple of tips: