Installing JQuery

Jquery

Jquery is to Javascript what punching at the muddy ground is to advanced field tilling technology (ie the plow).  It extends and makes Javascript simpler.  It has quickly become a web industry standard for manipulation and presentation of content.  The simplest question about JQuery is, how do I install it?  It's fairly easy, and I will outline the process in this post.

Downloading JQuery

JQuery is a fully supported Javascript platform, and is easily found at the front page of their website:  http://jquery.com/ -- Here you can download either the full production version (http://code.jquery.com/jquery-1.6.2.js) -- This version is useful if you're a coder and tinkerer, you can manipulate the actual code in the full version.  Otherwise, to save bandwidth and be efficient in a public production webpage you will want the minified version (http://code.jquery.com/jquery-1.6.2.min.js)

Enabling JQuery on your site

There are several options for loading JQuery, which may be covered in other articles later, however for the purposes of this tutorial we are going to just go through a regular installation from your own web server.

On a regular, HTML/XHTML/HTML5 page you will have a "head" section.  The most typical HTML page will include these elements:

<html>
<head>
</head>
<body>
</body>
</html>

At this point you should have already downloaded the version of JQuery that you intend to install on your webpages. For this tutorial we will be installing JQuery on your web server. You will need to upload the javascript file (.js) to your web server, using whatever methods you use, be it FTP, SSH Shell, or File Manager from your webhosting account. In this example, we have uploaded the full production version of JQuery, to a folder called 'js'. Now that our file is on the server, and we know what directory it's in, we add it between the <head> and </head> tag enclosures using the <script> tag.

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

Ok, now what do I do? Absolutely nothing! Crack open some delicious crab juice, or eat a banana and peanut butter sandwich to celebrate your victory. You've now extended the capabilities of your webpage by leaps and bounds. Let's test this baby and see if it's working, with one of my favorite programming tests Hello World!.

Make a simple file called jquerytest.html, or whatever you'd like to call your test page and insert the following code. If you're successful, when you view your page, it will open an alert window and tell you Hello World!

Here's a demo of it in action.

<html>
<head>
<script type="text/javascript" src="/js/jquery-1.6.2.js"></script>
</head>
<body>
<script type="text/javascript"> 
$(document).ready(function() { 
alert("Hello World!!!"); 
}); 
</script> 
</body>
</html>

For more about how to use JQuery and what JQuery can do, check out the forums and documentation on the JQuery homepage or the following resources:

We'll check in once in a while to update and add resources, until then, good luck in your design adventures!

Share/Save