jQuery
Click the link in the 'demo' box at left to see jQuery in action...
jQuery is an
- open-source library of javascript functions, which has
- solved lots of browser-compatibility issues which plague 'straight' javascript. It offers an easy,
- CSS-selector-ish way of addressing parts of your page. It has
- Ajax support functions, as well as,
- special effects and some typical UI widgets, making
- javascript much more painless to use!
Bring out yer libraries!
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>
Example
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");
});
}
Changing a class...
Click to .
// One of many jQuery functions related to attributes.
$("#demo").addClass("coloredtext");
What's that dollar sign?
If you like, you can just type out "jquery"--the name of the main object defined in the jQuery library--instead.
Other useful js libraries
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.
Reading
Homework assignment
Re-create your assignment from last week using jQuery instead of straight javascript:
- No triggers allowed in your markup! Load up your event handlers in your javascript code.
- Use one of the jQuery animation effects in the process of showing the text about whether the passwords match or not.