JavaScript Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 243,951 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,224 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Introduction to JQuery

Introduction to JQuery, Modify DOM structure on the fly

Options

bhandari

4 Feb, 2008 - 05:48 AM

Post #1

Hi All,

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:-

CODE

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:

CODE

window.onload()

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

Consider the following code in JQuery

CODE

$(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.

IPB Image

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.

CODE

$('.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.

3)Define the mouseover and mouseout events for each row

CODE

$('.effectclass tr').mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");});

The above code defines the mouseover and mouseout event handlers by adding a class to the element for which mouseover has been invoked. Mouseout removes the class.

Note that alt and over class should be defined a .css file like:

CODE

tr.alt.td{
background:#ecf6fc
}
tr.over.td{
backgrounf:#bcd4ec
}

Joining the code example 1 and 2 above, we get a table which is ready for the user before the page is rendered. The code as it will appear in the HTML file will be:

CODE

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.

Books for Jquery: Learning JQuery by Jonathan Chaffer

This post has been edited by bhandari: 10 Feb, 2008 - 10:02 PM