Two Ways to Include jQuery in Your Document

Wednesday April 8, 2009 Tutorials

There are two simple ways to link to the jQuery library code:

  1. Download the source code and link to it like any other JavaScript file.
  2. Link to the Google repository of jQuery on the Google AJAX Library API servers

Download jQuery and link to it on your own computer or server

Pros:

The pros of downloading jQuery and linking to it on your own computer or own server is that you have it locally and experiment with it when you are not connected to the Internet.

Cons:

When there is a jQuery update, you will have to update the jQuery library on each server where you have it in use.  Having the jQuery library on your own server also draws on your own server’s resources, although the result in bandwidth or performance is negligible for most projects.

How To

Go to jQuery.com and click on the Download link (Production plan).  This will take you to the Google page to download the current version of jQuery.

Save that file to the javascript (or js) folder in your directory.  You should save all of your JavaScript in one place, in the same way that you save all of your CSS in a “styles” or “css” folder.

Now, your index.html file, add the following code inside your head tag, before your CSS.

 

<script type="text/javascript" src="javascript/jquery-1.3.2.min.js">

 

 

 

Now you can use jQuery on that page.  To test out that it is working, add the following line below the line you just entered:

 

<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
 
<script type="text/javascript">
 
	$(document).ready(function(){
 
		$("body").html("jQuery is working");	
 
	});
 
</script>
 

 

If you setup jQuery correctly, you should see a message that says “jQuery is working.”

Link to the Google repository of jQuery

Need another reason to love Google?  They host jQuery for you, so you do not need to download it and store it on your own server!  For more information about this, you can check out the Google AJAX Libraries API homepage and watch a video.

Pros

You get to always link to the latest version of jQuery.  You do not have to put the extra burden on your server.  Plus, if someone has visited a site that links to jQuery from Google (like Dabrook.org) and then they go to your site, the jQuery library is already cached on that person’s computer, so they don’t have to download it again.

Cons

You can’t work with jQuery offline this way. They may be some potential that the Google servers are slow or go down.  Google go down?

How To

This is gonna be easy.

Paste the following code into the head of your page, before your CSS:

 

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
 
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
 

 

That’s it.  Now, if jQuery comes out with a new version, you would just change the 1.3.2 to the latest version number.  To test out that this works, paste the following code into the top of your page:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
 
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
 
<script type="text/javascript">
 
	$(document).ready(function(){
 
		$("body").html("jQuery is working");	
 
	});
 
</script>
 

 

Getting Started With jQuery

Now, we can start learning more about jQuery.  Of course there is more we can learn about just linking to jQuery.  For more information on the loading jQuery or other libraries via Google, check out the Google AJAX Libraries API website.