JQuery Basics, For Beginners

JQuery is a javascript-library that is very very useful & help us to do more with less code. It easier the use of DOM(Document Object Model) to work with various elements on document. Another most useful feature is that, it has cross browser compatibility, that is a big plus, we don't have to think, will a function will work on all browsers or not. We can simply use this and be confident about the compatibility with browser saving the time to test them on all browsers. If you don't have it yet, you can download it from JQuery Website. Always use uncompressed version rather than minified version.

There is an root factory function $(), that has a huge use. You can use it to select any element from the document with css selector notation. Like $('#idname') will select the element that has the id as 'idname'. Again, $('.classname') will select all elements that has associated with the class 'classname'. Like these, you can use most of the css notation that is w3 complaints. This helps us to select elements from document a lot.
You can change visual style of an element easily with jquery. Like, $('#idname').addClass('classname') , it will apply The styles of 'classname' to the element with id named 'idname'.
If you want to do something on body onload event, then you can do it easily with jquery library with simple code in your .js file like:
$(document).ready(functionName);
function functionName()
{
alert('Hellow World');
//do something
}
You can register event to a element event very easily like as follows:
$('#home').bind('click',LoadHome);
function LoadHome()
{
// do something
}
You can use ajax technology lot more easier with help of jquery without writing big code. Simply
$('#center').load('template.php');
This will load template.php in the element id named 'center' with a ajax request. If you want to do something when ajax request starts or stops, you can also do that by using following functions:
$('#center').ajaxStart(ShowLoading);
$('#center').ajaxStop(HideLoading);
function ShowLoading()
{
$('#center').addClass('loading');
}
function HideLoading()
{
$('#center').removeClass('loading');
}

now if that class has som definition of background animated images, that will be shown up at the start of ajax request & will be hidden when ajax stops/response arrived.
JQuery also helps lot on many more sections like:
* Pagination
* Image gallery
* banner rotator
* form validations etc.