What’s jQuery?

This whole is created by John Resig in early 2006, if you work with JavaScript then this library is really a prerquisite. This library is worth for each and every type of developers either they are an novice to JavaScript language and in need of some library to simplify the complexity of Document Object Model(DOM) and Asynchronous Java and XML(AJAX) or you are an advanced JavaScripting player or an daily user of this language and wants something new to do the same things, then jQuery is really a good stuff to go with.

First of all to understand DOM you can download tutorial regarding same. Click Here to download.

You no longer have to write a bunch of repetitious loops and make library calls frequently. jQuery helps helps to make your code simple and reusable. jQuery is made to express your code in fewer lines without complexity.
Let’s see how it makes your code simple:

Simplified Things

Some examples to simplify your JavaScript code using jQuery. To do something really simple and common, such as attach a click event to every link in an area of a page, here is an example,

DOM Scripting Without Using jQuery
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
     var link = links.item(i);
      link.onclick = function() {
      return confirm('You are going to visit: ' + this.href);
};
}
DOM Scripting Using jQuery
$('#external_links a').click(function() {
       return confirm('You are going to visit: ' + this.href);
});

Great, isn’t it? With jQuery, you can express just what you want to with little effort.. Looping over elements is avoided, the click() function takes care of that. Also no need to make multiple DOM scripting calls:
You just need to define short string on the elements to work with.
Now going inside code. First, you encountered $() function—the most powerful function in jQuery.
Mostly, you use this function to select elements from the document.

In second example #external_links lookup the element with an id of external_links. A space followed by ‘a' tells jQuery to look for all the <a> elements inside the external_links element. TO say it is easy but as per CSS its a tough job to do.

You can assign a click handler function to each element in the jQuery object by calling the click function.You can also pass an element or an array of elements to the $() function, and it will cover the elements with jQuery object. You might want to use this functionality to employ jQuery functions on things like the window object. For example, you typically assign the function to the load event like this:

window.onload = function() {
       // do this stuff when the page is done loading
};
jQuery Changes This Code as Follows:
$(window).load(function() {
     // run this when the whole page has been downloaded
});

As you probably already know, waiting for the window to load is painfully slow, because the whole page must finish loading, including all the images on the page. Sometimes, you want the images to finish loading first, but most of the time, you just need the Hypertext Markup Language (HTML) to be there. jQuery solves this problem by creating a special ready event on the document, used like this:

$(document).ready(function() {
      // do this stuff when the HTML is all ready
});
Creating and Appending a Simple Paragraph
$('<p></p>')
  .html('Hey World!')
  .css('background', 'yellow')
  .appendTo("body");

Yet another feature jQuery do have is calling multiple methods on jQuery object without referencing selector like:

$('#message').css('background', 'yellow').html('Hello!').show();
Unleash The Power of jQuery Selectors

Often, you select elements by ID, such as #myid, or by class name, such as div.myclass. However, jQuery has a rather complex and complete selector syntax that allows you to select nearly any combination of elements in a single selector.

For example, to add a comma inside every empty column of a table, use the :empty pseudo-selector:

$(‘td:empty’).html(‘,’);

Multiple selectors can be joined using comma’s for a particular event to happen. Here’s a simple example that shows every type of list on the page at the same time:

$(‘ul, ol, dl’).show();

What about finding every element that doesn’t have a certain class? CSS3 has a syntax for that, too, using the :not pseudo-selector.
Here’s how you can show every input that doesn’t have a class of required:

$('input:not(.required)').show();

So this is how jQuery makes your selectors strategy so easy to use.

Animation in HTML

Animation and simple effects are even handled by jQuery and the Heart of animation code is the animate() function, able to change any CSS style value. To animate height, opacity, width or position is possible with this. Frequency or speed of animation can even be handled by this may be in milliseconds or some of pre-defined speeds: slow, normal and fast.

Here’s an example that animates the height and width of an element at the same time. Notice that there is no start value — only the end value. The start values are taken from the current size of the element. I’ve also attached a callback function.

$('#grow').animate({ height: 500, width: 500 }, "slow", function(){
alert('The element is done growing!');
});

show and hide features are even provided by jQuery, either instantly or at a specified speed. You can also make elements appear and disappear by using fadeIn() and fadeOut() or slideDown() and slideUp(), according to your requirements. Here’s a simple example that slides down a navigation:

$(‘#nav’).slideDown(’slow’);
Simplified Ajax

jQuery is having some good stuff hepls in making AJAX a good experience which either would not be that much.

A common use of Ajax is to load a chunk of HTML into an area of the page. To do that, simply select the element you need and use the load() function. Here’s an example that updates some statistics:

$('#stats').load('data.html');

Most often you would need to pass some parameters or data to a ajax call, and this too is made simple. You can use choose between $.post() and $.get(), depending on which method you need. You can pass an optional data object and callback function if you need them.

$.post('option.cgi', {
   text: 'my option',
   index: 10
}, function() {
   alert('Your option is read.');
});

If you really want to do some complex Ajax scripting, you need the $.ajax() function. You can specify xml, html, script, or json, and jQuery automatically prepares the result for your callback function so that you can use it right away. You can also specify beforeSend, error, success, or complete callbacks to give the user more feedback about the Ajax experience. In addition, other parameters are available with which you can set the timeout of an Ajax request or the “Last Modified” state of a page.
Here is an example that retrieves an XML document using some of the parameters that I mentioned.

$.ajax({
   url: 'doc.xml',
   type: 'GET',
   dataType: 'xml',
   timeout: 1000,
   error: function(){
   alert('Error loading XML document');
},
success: function(xml){
   // do something with xml
}
});

After getting XML data in callback and i f you are successful in getting data then you can process it further. This makes it easy to process XML data and embed it into wherever you want it.

Working with XML using jQuery
success: function(xml){
     $(xml).find('item').each(function(){
     var item_text = $(this).text();
     $('')
         .html(item_text)
         .appendTo('ol');
     });
}

Here you can get jQuery’s tutorial which may be useful for you.
Click Here to download
This all I have found with jQuery, I would be glad to know if something you can add to it.

 Source: http://www.ibm.com/developerworks/library/x-ajaxjquery.html