jQuery Basics

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

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