JQuery
jQuery is a fairly lightweight javascript library that has a number of particularly useful features. Even thought it's only been around for a few years now, it has gained a lot of momentum in the web development community. jQuery provides a simple interface to easily modify CSS attributes on all the elements in the HTML document, has simplified AJAX integration, and is accompanied by a number of handy user interface related APIs. You can get a good overview of jQuery in the jQuery Tutorials, and there is a short summary on Wikipedia. Of course, there are plenty of other tutorials a google search away.
To use jQuery in your javascript, you need to include the jQuery javascript library, which is just another JavaScript file. Google hosts jQuery for free, and it is recommended that you use Google's hosted jQuery for your projects (here is a blog post that gives some of the main reasons). Add the following line inside the <head> tag of your web page (adjust the version in the middle):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js" type="text/javascript"></script>
To get the link to the latest hosted jQuery, see the Google Hosted Libraries Developer's Guide.
You can also link to the jQuery library directly on other websites as mentioned in the above tutorials. The trade-off is that having a local copy will load faster, but then requires you to manage the library files your self (e.g., downloading new versions).
A few code snippets are given below, but the best way to learn about all the features of jQuery is to head to the jQuery website and look through the tutorials, references, and examples there.
The $ symbol is used to denote jQuery functionality. You can use it to call jQuery functions, access HTML document elements in order to read or write values, or modify style information via CSS for a range of document elements. For example, here is some code that sets up a function to be called whenever the user clicks on a link:
$("a").click( function(event)
{
event.preventDefault();
$(this).hide("slow");
} );
The above code leverages many useful javascript and jQuery features. $("a") is the jQuery way of selecting all HTML a elements. That is, in this case, all elements in the HTML document that are <a> tags. The click function is invoked for all such a elements in the document. The argument to the click function is another function that is to be called when the selected elements are clicked by the user. The event argument to this user-defined function is a default argument sent to functions which handle user actions like clicking a mouse button. In this example, the code calls another function, preventDefault() on the event passed to stop the standard action on that event. Here that means stopping the web browser from following the link that the user clicked on. Finally, the $(this) variable is the jQuery way of accessing the current encapsulating object, as in Java. This example calls the jQuery hide function on the object to make the object (again, in this case, this is referring to the <a> tag that the user clicked) disappear from the browser. The script also passes an argument to the hide function to make the link disappear slowly as described in the API.
jQuery also comes with some easy to use widgets for building better user interfaces. One of the handiest is the dialog widget that pops-up an in-browser dialog window. To use the dialog functions, you need to include a few more javascript libraries in your HTML header block like so:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"
type="text/css" rel="Stylesheet" /> <!-- We need the style sheet linked
above or the dialogs/other parts of jquery-ui won't display correctly!-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script><!-- The main library.
Note: must be listed before the jquery-ui library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script><!-- jquery-UI
hosted on Google's Ajax CDN-->
<!-- Note: you can download the javascript file from the link
provided on the google doc, or simply provide its URL
in the src attribute (microsoft and google also host the jQuery
library-->
<script type="text/javascript">
// your code goes here
</script>
You can then use the $().dialog() function to make dialog boxes. The dialog function can take many arguments to customize its behavior and add standard elements like buttons; see the documentation for details. The content of the dialog box is typically placed in a div container and then that container is hidden when the document loads. You can put any elements in the div and they will be displayed as normal in the dialog box. Here is a full example:
<html>
<head>
<style>
#mydialog { display:none }
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"
type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript">
function showdialog()
{
$("#mydialog").dialog();
}
</script>
</head>
<body>
<input type="button" value="Show Dialog" onclick=showdialog() />
<div id="mydialog" title="Howdy">Look at me!</div>
</body>
</html>
To understand the page, start at the bottom. There is a div element with a title and some string content. It also has a unique id (the ids can be anything you want) which is used to identify this particular element in the rest of the document. This div's id is mydialog. Above that is a button input. The only thing special about it is the onclick attribute which specifies a javascript function to call when the button is clicked by a user. In this case, the function is showdialog() which is a user defined javascript function contained in the document header. All the function does is access the document element with id mydialog (the #identifier is the jQuery way of accessing an individual element based on the assigned id in the element attribute list), and build a dialog box from it. Here, the dialog box will have the title Howdy from the title attribute in the mydialog element, and have a text string Look at me!. Finally, at the top of the document is the style section, which is a normal HTML/CSS section describing appearance of parts of the document. There is only one entry, again describing the document element with id mydialog. One style attribute is set, namely the display attribute is set to none to indicate that the element should not be displayed. Otherwise, the mydialog div would be displayed like any other part of the document rather than being used solely for our dialog box.
Here is another example of using jQuery to do simple animations by moving an image across the browser window:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
// these are for storing target locations
var targetLeft=0;
var targetTop=0;
function moveTarget()
{
targetLeft+=10; //increase target location
targetTop+=10;
$("#target").css("top",targetTop); //move target to (top,left)
$("#target").css("left",targetLeft);
if(targetLeft<200)
{ //stop if we reached left=200
window.setTimeout("moveTarget()",200); //set the next timer
}
}
$(document).ready( function()
{ //at the beginning create a clock timeout
window.setTimeout("moveTarget()",200); //call this function in 200 ms.
});
</script>
</head>
<body>
<!-- this is my target-->
<img id="target" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/180px-Smiley.svg.png" style="position:relative"/>
</body>
</html>
