JavaScript Workshop » jQuery

Continuing from my last presentation on jQuery basics, I thought I would take what I have covered so far and create a little useful example.

This jQuery Image Viewer can be considered and updated to the DOM Image Gallery I discussed last season from Jeremy Keith's DOM Scripting book.

jQuery methods are used to display the hovering image labels shown underneath each thumbnail as well as display the full-size image. A background grey layer is also displayed to "disable" the other thumbnails until a "close" button is clicked. This image viewer is a little more stylish and more in tune to what you see today in other examples on the web.

And if JavaScript is disabled or not available in the browser, the image(s) will still be displayed (on a new page), so the script still retains its core functionality and stays "unobtrusive", which really is important.

(read more...)

The people at Refcardz have a great cheatsheet on jQuery Selectors (.pdf).

jQuery selectors are one of the most important aspects of the jQuery library. These selectors use familiar CSS syntax to allow page authors to quickly and easily identify any set of page elements to operate upon with the jQuery library methods. Understanding jQuery selectors is the key to using the jQuery library most effectively.

Also, checkout all their other free cheatsheets as well.

A whole component of the jQuery library is dedicated to the detection and reaction of standard browser events which are likely to occur frequently (during every visit to our page) when visitors view our pages.

One event that is used almost every time the jQuery library is engaged is the ready event. This can be used with the $(document).ready(function(){});. This will execute the code within its curly braces when the document is ready (once the page has finished loading minus images).

(read more...)

A relative latecomer to this world of JavaScript libraries, jQuery has taken the web development community by storm, quickly winning the support of major websites such as MSNBC, Google Code, and well-regarded open source projects including SourceForge, Trac, and Drupal.

Compared with other toolkits that focus heavily on clever JavaScript techniques, jQuery aims to change the way that web developers think about creating rich functionality in their pages.

(read more...)