There have been a lot of websites with static content and then Javascript came and it brought all the dynamic stuff like roll over menus, validations, dancing images by changing the attributes of the HTML elements.

But in the modern world when there is a need to do too much, handling Javascript code also becomes cumbersome especially in an application which is intended to be graphics and effects rich so as to appeal to the users.

JQuery helps in such a scenario by helping to modify the DOM structure easily. As an illustration in normal Javascript when some attribute is to be changed for all the elements in the page, one needs to traverse whole of the page and individually modify the attributes for each element. But JQuery can apply changes to whole of the HTML document as it has the complete structure of the document available with it.

Using JQuery:

Before starting to code using JQuery one has to include a small .js library which applies the code to the current HTML DOM structure. This .js library can be downloaded from the project website jquery.com

After downloading the library, it has to be included in the file as we normally include a .js file:-

<script src="jquery.js"></script>

Code Example 1:

Consider a scenario when you want to modify some attribute of an element as early as possible after it loads.

The commonly used statement in Javascript it:

window.onload()

But the above will execute after the page has been rendered by the browser.

Consider the following code in JQuery

$(document).ready(function() {
//your code here

It says that when the document is ready, execute my function i.e. execute my function as soon as the document object model is ready and which we know is ready before the page is rendered by browser.

Code Example 2:

Consider a scenario when you want a table as shown below in an HTML document.

What occurs to your mind?

You can code it straight away in your HTML document and use mechanical approach when a change for some other color for some different set of rows is requested.

Ok, you can also do it with Javascript with altering the properties of those rows after the page has been loaded using the onload() method.

Problem a) Lot of code need to be done
Problem once your page is rendered and then the properties are being changed.
Problem c) You want to change the same thing for some hundred tables in the HTML document and you are calling the changer for every table. Imagine the number of function calls and the use of some loop.

Alternative: Why not change the DOM structure when the DOM is ready with default attributes.

How it achieve it in JQuery:
1)Declare a common class for all those table for which effect has to be provided.
Just use <table class=”effectclass”> for every table
2) Change the class for every alternating row so as to show each alternating row as being blue.

$('.effectclass tr:even').addClass('alt')

Select every even row from the table of effect class elements and change the class for those elements to alt (which will make them blue). See no looping required.

One may think that the mouseover and mouseout have been defined in the ready part and hence will be executed only at start. However, they have been defined in the ready part and will be executed whenever a mouseover or mouseout occurs for a tr having effectclass as its class.

If you have followed the above, you are ready to explore other tags in jquery.