jQuery tutorial

Testing jQuery

This page contains some very simple code changing the color of all the HTML paragraphs from green to red,
and the color of the code sections from black to blue.

To browse the jQuery code just open the HTML source of this page and search for the function keyword.
You can also try to uncomment some code lines to see how to select a subelement, using the find() function.

Some notes about how to include jQuery

jQuery is a JavaScript library which can be included within your pages in many different ways.
The simplest way can be just downloading it from the jQuery web site and add the library to your scripts, javascripts, include, or lib directory.
Finally you must add an HTML script tag inside the head section of the document, for example:


<head>
  <title>Simple Web Application</title>
  <link href="../css/style_01.css" rel="stylesheet" type="text/css" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <script src="../include/jQuery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>

In this way you can write your jQuery code wherever you want in your pages (within a script tag).
If you prefer to write your jQuery code in a dedicated JavaScript file, then you must add another line to the above codeblock:


<head>
  <title>Simple Web Application</title>
  <link href="../css/style_01.css" rel="stylesheet" type="text/css" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <script src="../include/jQuery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="my_script_file.js" type='text/javascript' ></script>
</head>

Another way to include jQuery is using the Google CDN (Content Delivery Network).
By this mechanism the jQuery library will be hosted by Google, which means that:

The bandwith used to download your library will be payed by Google, not by you.
If a user has already cached jQuery visiting another site using CDN, the library will not be download again (the URL of the library is the same).

To add jQuery using the CDN reference, add a codeblock like this to your head section:


<head>
  <title>Simple Web Application</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/?ajax/libs/jQuery/1.5.0/jQuery.min.js"></script>
</head>


<head>
  <title>Simple Web Application</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.0.js"></script>
</head>

Remark: the above CDN mechanism will retrieve the jQuery-1.5.0.min.js version of the jQuery library.
By writing /jQuery/1.5/jQuery.min.js instead of /jQuery/1.5.0/jQuery.min.js, the CDN service will return the latest 1.5.x available version,
which could be jQuery-1.5.1.min.js, jQuery-1.5.2.min.js etc. By writing just /jQuery/1/jQuery.min.js the latest 1.x version will be returned.
Finally, if the version number is omitted, the last version will be returned.

An handy way to include jQuery is getting the last version from the repository:


<script src="http://code.jquery.com/jquery-latest.js"></script>

Sources

Previous Next

HOME