So what is jQuery?..Well jQuery is a open-source Javascript library designed to help developers work with javascript.

The main advantage of using jQuery is easy DOM manipulation, event handling, animating, and easy to use Ajax. Also from experience I can say that one of jQuery’s top advantages is cross-browser compatibility.

So let’s get started…

First thing that you should know about the jQuery class is how to use it. The $ sign is the main alias for the jQuery class. So you can use $(‘form’) or jQuery(‘form’).

If for example you would like to select all input’s from a page then you should write $(‘input’), or if you would like to select a specific div with the id = “new_id” then this is the the select: $(‘#new_id’). So for an id, the # should be used, and for a class the . should be used.

Example (delete all div’s with the class = “new_class”):

  1. $('.new_class').remove();

A thing that you should keep in mind is that every jQuery function returns a jQuery object and this offers the possibility of chaining your jQuery instruction.

Example (change the inner html of a element the make it visible) :

  1. $('#new_id').html('sometext').show();

Callback’s:

Some functions in jQuery accept callback functions.For example if you would like to fade in all input’s with the id = ‘new_id’ and then show an alert:

  1. $('input#new_id').fadeIn(function(){alert('Test');});

If we didn’t use a callback function and just wrote the alert after the fadeIn then the alert may have been show’n before the fadeIn happend.This occurs because some jQuery functions are async (to be more explicit setTimeout is used in them and this is the reason that instructions written after may run before the event ends)

Event handeling:

A other thing that jQuery is very useful is event handling. For example if you would like to show an alert box when someone click on a div with the id “new_id” then this is how it should be done:

  1. $('#new_id').click(function(){alert('test');});

So we attach a callback function to the onclick event of the specific element. A more advanced thing that may help you with debugging is that all events attached to an element can be found in element.data(‘events’).

As a closing note for this post is then when using jQuery it is prefered to run the script after the DOM is loaded. So the script should be wrapped in something like this:

  1. $(document).ready(function(){
  2. //code
  3. });