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 https://www.youtube.com/watch?v=MckRCdhiZBI]
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.
