include "../_i/1.h"; ?>
Click the link in the 'demo' box at left to see jQuery in action...
jQuery is an
Download the jQuery library (one .js file) from the jQuery site and link to it. Or, linking to a copy at google...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="myjqfuncs.js"></script> </head>
Here's the code (in "myjqfuncs.js") for the example program above. Click on most lines below to see comments about what's happening.
// A function that is run once all the pictures on a
// page have loaded, so that the DOM is ready to be
// addressed.
$(document).ready(function(){
setupLinkBehaviors();
});
function setupLinkBehaviors(){
// We're installing an event handler for the click
// event.
// Which click events? "#demo a" looks like a CSS
// selector (it is) meaning "all the 'a' tags inside an
// element with attribute id='demo' ".
$("#demo a").click(function(event){
// preventDefault turns off the default behavior of
// (in this case) the link, which would otherwise
// jump us to the GC homepage.
event.preventDefault();
// hide, show, and toggle are examples of jQuery
animation effects.
$("#demo").hide("fast");
// append, text, and html are examples of jQuery
// manipulation functions
// along the lines of javascript's
// "innerHTML" method.
$("#demo").append("<br />Another click");
$("#demo").show("slow");
});
}
Click to .
// One of many jQuery functions related to attributes.
$("#demo").addClass("coloredtext");
If you like, you can just type out "jquery"--the name of the main object defined in the jQuery library--instead.
Lightbox - based on prototype and scriptaculous - also available as a jQuery plugin: nice display of images from thumbnails.
ie7, ie8 - Makes older browsers (particularly ie6 - praise de Lawd!) act like standards-compliant.
Re-create your assignment from last week using jQuery instead of straight javascript:
include "../_i/3.h"; ?>