How to Include the jQuery Library Code in an HTML Page

jQuery simplifies building rich, interactive web frontends. Getting started with this Javascript library is easy, but it can take years to fully realize its breadth and depth. In this excerpt from jQuery Cookbook, the authors quickly get you up to speed by showing you how to quickly and efficiently add the jQuerry library to your HTML

There are currently two ideal solutions for embedding the jQuery library in a web page:

Use the Google-hosted content delivery network (CDN) to include a version of jQuery (used in this chapter).
Download your own version of jQuery from jQuery.com and host it on your own server or local filesystem.

Including the jQuery Javascript library isn’t any different from including any other external Javascript file. You simply use the HTML <script> element and provide the element a value (URL or directory path) for its src="" attribute, and the external file you are linking to will be included in the web page. For example, the following is a template that includes the jQuery library that you can use to start any jQuery project:

<!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" />

<span class="strong"><strong><script type="text/Javascript"</strong></span>

<span class="strong"><strong>src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script></strong></span>

</head>

<body>

<script type="text/Javascript">

	alert('jQuery ' + jQuery.fn.jquery);

</script>

</body>

</html>

Notice that I am using—and highly recommend using for public web pages—the Google-hosted minified version of jQuery. However, debugging Javascript errors in minified code is not ideal. During code development, or on the production site, it actually might be better to use the nonminified version from Google for the purpose of debugging potential Javascript errors. For more information about using the Google-hosted version of jQuery, you can visit the Ajax libraries API site on the Web at http://code.google.com/apis/ajaxlibs/.

It’s of course also possible, and mostly likely old hat, to host a copy of the jQuery code yourself. In most circumstances, however, this would be silly to do because Google has been kind enough to host it for you. By using a Google-hosted version of jQuery, you benefit from a stable, reliable, high-speed, and globally available copy of jQuery. As well, you reap the benefit of decreased latency, increased parallelism, and better caching. This of course could be accomplished without using Google’s solution, but it would most likely cost you a dime or two.

Now, for whatever reason, you might not want to use the Google-hosted version of jQuery. You might want a customized version of jQuery, or your usage might not require/have access to an Internet connection. Or, you simply might believe that Google is “The Man” and wish not to submit to usage because you are a control freak and conspiracy fanatic. So, for those who do not need, or simply who do not want, to use a Google-hosted copy of the jQuery code, jQuery can be downloaded from jQuery.com and hosted locally on your own server or local filesystem. Based on the template I’ve provided in this recipe, you would simply replace the src attribute value with a URL or directory path to the location of the jQuery Javascript file you’ve downloaded.

Learn more about this topic from jQuery Cookbook.

Getting started with the jQuery library is easy, but it can take years to fully realize its breadth and depth; jQuery Cookbook shortens the learning curve considerably. You'll learn patterns and practices from 19 leading developers who use jQuery for everything from integrating simple components into websites and applications to developing complex, high-performance user interfaces. The recipes start with the basics and then move into practical use cases with tested solutions to common web development hurdles.