Thursday, 4 August 2011

Adding JQuery to your Page

JQuery is probably the most popular Javascript library available today and given its flexibility, and the enormous number of plugins it’s not difficult to see why. There are two versions of JQuery available, a production version and developer or debug version, and at least two ways of including it in your page.

The first way, which seems to me to be the easiest and most efficient, is to let Google do it for you for free. This is because Google host the library on their vast server array and all you need to do to access it is to include the following HTML in your page:

<!-- Use this script to include the debug version -->
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>

<!-- OR, use this to include the production version -->
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

The alternative way of including JQuery in your page is to download it from the JQuery website and host it on your own server, which sounds like extra work to me.

Once you’ve included JQuery, a simple way of figuring out if it’s working is to simply display the version number. The sample code below demonstrates how:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

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

</head>
<body>
Load a version of JQuery from Google hosts and display the version number
<div>Version number goes here</div>

<!-- This MUST come after the div we're changing -->
<script type="text/JavaScript">
    jQuery('div')
        .text('The jQuery Version number is: ' + jQuery.fn.jquery);
</script>

</body>
</html>

Google provide more information on the libraries they host at this address: http://code.google.com/apis/libraries/, whilst the main JQuery website address is: http://jquery.com/

No comments: