This class is geared for web designers to help and learn how to use jQuery to enhance existing web pages as well as web developers to teach them how to use a very popular and powerful JavaScript library.

If you’ve spent any time at all trying to add dynamic functionality to your pages, you’ve found that you’re constantly following a pattern of selecting an element or group of elements and operating upon those elements in some fashion. You could be hiding or revealing the elements, adding a CSS class to them, animating them, or modifying their attributes.

Using raw JavaScript can result in dozens of lines of code for each of these tasks. The creators of jQuery specifically created the library to make common tasks trivial.

The class will be teaching not only how to use the many functions and properties of API, but practical examples you can use right away.

The class is only $25 and there are no other materials or software needed to purchase.

Topics covered:

Week 1: Getting Started with jQuery
Week 2: Selecting, Decorating and Enhancing
Week 3: Manipulating Content
Week 4: Animation Effects
Week 5: jQuery UI & Forms

To give you an idea of how each lesson looks, here is the first lesson (.pdf).

Materials for Class

All the course materials for the class are sent via email as attachments within 48 hours of payment. Feel free to contact me if you have any questions.

In this snipet of the full weekly podcast, Paul asks John questions such as: when is it appropriate to use a JavaScript library; do people need to learn JavaScript before using a library, do libraries hide too much, what are some pros and cons of choosing a library, and much more.

Feel free to listen to all Boagworld’s podcasts or learn and talk to other fellow designers in their forum.

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.

The hover effect is created by having a “p” element initally hidden and then have it display “slowly” using the fadeIn(“slow”) method bound to the mouseover event of the image.

$("img[id!='']").mouseover(function() {
 
     // goes to "a" then to sibling "p" to keep it unobtrusive				
     $(this).parent().next().fadeIn("slow");
});

Displaying the image within a “disabled” layer is created by appending a couple elements with the appendTo method.

$("img[id!='']").click(function() {
 
    var fullpath = "images/full/" + $(this).attr("id");
 
    $("div").attr("id", "greyout").appendTo(".content"); 
    $("div").attr("id", "fulldiv").appendTo("body");
    $("img").attr("src", fullpath).appendTo("#fulldiv");
    $("div").attr("id", "closediv").appendTo("#fulldiv");
 
    return false; 
});

Take a look at the code (.zip) to understand it better.

Further updates to the code would probably include adding an image preloader function to make sure the full-size images display as quickly as possible.

Here is a nice simple one you can use:

function preLoad() {
 
   var args = preLoad.arguments;
   document.imageArray = new Array(args.length);
 
   for (var i=0; i < args.length; i++) {
 
      document.imageArray[i] = new Image;
      document.imageArray[i].src = args[i];
   }
}

You would call this function with the images you want to preload, it’ll create a new array with all the images in it, loading them one after another:

preLoad('images/image1.jpg', 'images/image2.jpg');

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.

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).

Another extremely useful feature of the events component of jQuery are the Interaction Helpers; there are two of them at present – the .hover() method and the .toggle() method.

Both interaction Helpers specify two functions to be executed; the .hover() method allows you to define anonymous functions to be executed on mouseover and mouseout events, so both related events can be wrapped up in one method.

The .toggle() method simply allows two functions to be executed on alternative click events, so clicking on something once will execute the first function, clicking the same element a second time will then trigger the second function.

Events are the cornerstone of any web 2.0 application and allow you to react to different interactions that take place between your visitors and your application. jQuery makes this task easier for you, and presents a unified event model in which each browser works with events in the same way and has equal access to the event object where it is needed.

Here are three useful articles covering jQuery:

jQuery Events
jQuery CSS
jQuery Effects

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.

Rather than spending time juggling the complexities of advanced JavaScript, designers can leverage their existing knowledge of Cascading Style Sheets (CSS), Extensible Hypertext Markup Language (XHTML), and good old straightforward JavaScript to manipulate page elements directly, making more rapid development a reality.

Checkout this article (.pdf) by Dan Wellman covering the basics of this library.