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

• Intro to jQuery - TechRepublic

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.