Page 1 of 1

Introduction to JQuery Modify DOM structure on the fly Rate Topic: ***** 2 Votes

#1 bhandari  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 9
  • View blog
  • Posts: 754
  • Joined: 31-January 08

Post icon  Posted 04 February 2008 - 06:48 AM

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

Posted 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 B) 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.

3)Define the mouseover and mouseout events for each row

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

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:

<script src="jquery.js"></script>
<script type="javascript/text">
$(document).ready(function() {
	$('.effectclass tr:even').addClass('alt');
	$('.effectclass tr').mouseover(function(){
		$(this).addClass("over");}).mouseout(function(){
		   $(this).removeClass("over");
		 });
}
</script>



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 February 2008 - 11:02 PM


Is This A Good Question/Topic? 1
  • +

Replies To: Introduction to JQuery

#2 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1875
  • View blog
  • Posts: 20,282
  • Joined: 17-March 01

Posted 04 February 2008 - 10:10 AM

Great tutorial.

If you liked it, vote for it on DZone here: http://www.dzone.com..._to_jquery.html
Was This Post Helpful? 0
  • +
  • -

#3 k0b13r  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 15
  • View blog
  • Posts: 243
  • Joined: 18-July 06

Posted 05 February 2008 - 07:46 AM

Yea, very nice tutorial :) I discovered jQuery few days ago, it's awsome :D
Was This Post Helpful? 0
  • +
  • -

#4 Nykc  Icon User is offline

  • Gentleman of Leisure
  • member icon

Reputation: 728
  • View blog
  • Posts: 8,642
  • Joined: 14-September 07

Posted 05 February 2008 - 12:07 PM

Well,

That officially sparked some interest on this subject matter.

Thanks for the tutorial
Was This Post Helpful? 0
  • +
  • -

#5 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1641
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Posted 10 February 2008 - 10:58 PM

Excellent tutorial bhandari, nice work!
Was This Post Helpful? 0
  • +
  • -

#6 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Posted 13 February 2008 - 05:23 AM

I love this kind of easy fast and helpful tutorials, :D
Thanks.
Was This Post Helpful? 0
  • +
  • -

#7 annaharris  Icon User is offline

  • New D.I.C Head

Reputation: -4
  • View blog
  • Posts: 38
  • Joined: 03-May 12

Posted 26 December 2012 - 04:32 AM

You have shared very interesting stuff on Jquery. Small but valuable information. Thanks for giving this information.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1