Tag: parent

DOM Tree Traversal: jQuery

In this video tutorial presentation we will explain the DOM Tree Traversal using jQuery methods.

The jQuery methods we are using are
parent()
children()
prev()
next()
siblings()
and some examples to show the use of Chain methods.

HTML code
index.html

1
2
3
4
5
6
7
8

 <div id="main">
  <img src="logo.png" />
  <ol>
   <li>Apple</li>
   <li>Oracle</li>
   <li>Microsoft</li>
  </ol> 
</div>
1

 $("ol").parent();

is div with an id main.

1

 $("ol").children();

is, all li. i.e., Apple, Oracle, Microsoft will be displayed.

1

 $("img").parent();

is div with an id main.

1

 $("li").parent().parent();

parent of li is ol and its parent is div tag with an id main.
This is also called as chain method.

Video Tutorial: DOM Tree Traversal: jQuery



YouTube Link: https://www.youtube.com/watch?v=bBtkD6t0_tU [Watch the Video In Full Screen.]



How to test these methods:
Looking at our previous day tutorials, write a simple program with some html element structures and take a button.
Clicking on the button, you call each of these methods and see the output.

Keep the programs simple, so that you can first understand the output. Later these simple DOM tree traversal techniques will be very useful while you encounter with some complex application development.

Working With Images: Small jQuery Application

In this video tutorial, we shall test our skills in jQuery: bind, unbind, append and remove functions. Also we shall see the use of chain methods.

jQuery Event Handling: Binding and Unbinding
Animate Image with ‘this’ Selector: jQuery
Append/Add and Remove HTML/XML Elements: jQuery

Assume that a client has mailed her requirements to us:
She has 5 images in her html page.
Once the user clicks on a image, a message should popin beside the image.
Image should be clickable only once.
Once the user clicks on other images, the messages appended beside previously clicked image must be removed.

With these requirements in mind, we shall start developing our image based jQuery Application.

HTML code
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<html>
 <head><title>Working With Images: Small jQuery Application</title>
 <style type="text/css">
 img{
  padding: 10px;
 }
 </style>
 </head>
 <body>
 
   <div> <img src="images/aperture.png" width="69" height="69" /> </div>
   <div> <img src="images/coda.png" width="69" height="69" /> </div>
   <div> <img src="images/finder.png" width="69" height="69" /> </div>
   <div> <img src="images/photoshop.png" width="69" height="69" /> </div>
   <div> <img src="images/safari.png" width="69" height="69" /> </div>
 
   <script type="text/javascript" src="script/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="script/my_script.js"></script>
 </body>
</html>

Here we have included 5 images and have added 10px padding using CSS.
Each image is being placed inside a div tag.

Note:
So img is a child of div or div is the parent of img.

jQuery code
my_script.js

1
2
3
4
5
6
7
8
9

$(document).ready( function() {
 
  $("img").click( function() {
   $("b").remove();
   $(this).parent().append("<b>You clicked on Me!</b>");
   $(this).unbind();
 });
 
});

Once the document is ready and the user clicks on a image:
1. Any b tag present in the document is removed. Thus, the message associated with the image which was being clicked previously is removed.
2. The parent tag of the image being clicked: i.e., div tag is selected and a message with b tag is appended to it, which appears beside the image being clicked by the user.
3. The event associated with the image being clicked is removed.

Note:
Use of function().function() is called chain method.
Example:
parent().append();
next().parent().remove(); etc

Make sure to maintain the order of the code. If you replace or rearrange the code in a way other than above, you wouldn’t get expected result.
While practicing, change the order of the code and look for the output, that would help you understand the code and the flow / execution flow well.

Video Tutorial: Working With Images: Small jQuery Application



YouTube Link: https://www.youtube.com/watch?v=MckRCdhiZBI [Watch the Video In Full Screen.]



Keep testing your jQuery skills by doing some mini projects like this one.
Let it be small, so that it doesn’t take forever to test your skills.

You could even test and enhance your jQuery skills by helping people on our forum.