Author: Satish

Animate Image with ‘this’ Selector: jQuery

This video tutorial illustrates the use of ‘this’ selector in jQuery.

The $(this) selector gives us an easy way to point to the current element.

In this video tutorial, we take 4 images in our html document. Upon clicking the image, the clicked image fades out of the document.
Once the restore button is clicked, all the images fade in again.

HTML code
index.html

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

<html>
 <head><title>this selector in jQuery!</title>
 <style type="text/css">
  img {
   padding: 10px;
  }
 </style>
 </head>
 <body>
                     <img src="images/aperture.png" width="79" height="79" />
                     <img src="images/coda.png" width="79" height="79" />
                     <img src="images/finder.png" width="79" height="79" />
                     <img src="images/safari.png" width="79" height="79" />
                                    <br />
                     <button id="restore">Restore Images</button> 
   <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 take:
4 images.
Link to jQuery library.
Link to our custom javascript file my_script.js

jQuery code
my_script.js

1
2
3
4
5
6
7
8
9
10
11

$(document).ready( function() {
 
 $("img").click( function() {
   $(this).fadeOut();
 });
 
 $("#restore").click( function() {
   $("img").fadeIn();
 }); 
 
});

Here, we track the image being clicked and with the help of this selector select that particular image and apply fadeOut effect to it.
Once the restore button is clicked, we select all the img tags and restore all the images with fadeIn effect.

Video Tutorial: ‘this’ Selector in jQuery


[youtube https://www.youtube.com/watch?v=p-lksl7KSdg]

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



We could take id for each image and then apply fadeOut effect on that image. But this would create overhead in the code and memory and the code maintainability in larger application development.
So having this selector in our tool box helps us be a better developer.

Variables and Javascript Methods In jQuery

In this video tutorial we shall see how to use variables and javascript methods in jQuery.

In this tutorial, we shall take a image inside our html document. Once the user clicks on this image, we shall use some javascript methods to generate random discounts and display it using alert box.

Note:
var is a keyword to declare variable.
Math.random() generates random numbers between 0 and 1.
Math.floor() is used to round off the floating point number to integer.
alert() is used to show the message stored in the variable in alert box.
+ is concatenation operator.

HTML code
index.html

1
2
3
4
5
6
7
8
9

<html>
 <head><title>Variables and JavaScript Methods: jQuery</title></head>
 <body>
                      <img src="images/aperture.png" width="79" height="79" />
 
   <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 are including 1 image.
We have also linked the web page to jQuery library file and our my_script.js file.

jQuery code
my_script.js

1
2
3
4
5
6
7
8
9
10
11

 $(document).ready( function() {
 
   $("img").click( function() {
 
     var discount = Math.floor( Math.random() * 5 ) + 10;
     var msg      = "Discount: "+discount+"%";
     alert(msg);
 
   });
 
 });

Once the web page is loaded, and the user clicks on the image:
Math.random() function generates some random number between 0 and 1, which is multiplied by 5 and the resulting number is then rounded off to a integer number using Math.floor() method.
This number is then added with some string message and is stored inside another variable called msg.
This is passed to alert() method and is displayed on a alert box.

Math.random() and Math.floor() and alert() are javascript functions.

Video Tutorial: Variables and Javascript Methods In jQuery


[youtube https://www.youtube.com/watch?v=IfGmVi3ZuVw]

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



If you want to learn “javascript” visit Javascript Category on our blog.

With this tutorial, you now know that, your javascript knowledge will come handy. If you don’t know Javascript, still you need not worry as we would explain the things we will use in our jQuery tutorial.

Append/Add and Remove HTML/XML Elements: jQuery

Video tutorial to illustrate adding or appending an html element or removing an html element from the web page using jQuery: DOM (Document Object Model)

jQuery uses: .append(); and .remove(); functions to accomplish this task.

We could use these methods to append string or any other html or XML element and also remove string and other html or XML elements from the document.

In this example, we are illustrating with the help of an ordered list, by adding and removing its list items.

HTML code
index.html

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

<html>
 <head><title>Add/Append and Remove Elements!</title></head>
 <body>
            <ol>
             <li></li>
             <li></li>
            </ol>
 
 
          <button id="add_li">Add List</button>
          <button id="remove_li">Remove List</button>
 
   <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 two list items and two buttons.
Buttons have unique id’s: add_li, remove_li Clicking on which the list items get added and removed respectively.

jQuery code
my_script.js

1
2
3
4
5
6
7
8
9
10
11

$(document).ready( function() {
 
 $("#add_li").click( function() {
    $("ol").append("<li></li>");
 });
 
  $("#remove_li").click( function() {
    $("li:last").remove();
 });
 
});

Once the document is loaded and the user clicks on Add List button, the list item gets added.
Once the document is loaded and the user clicks on Remove List button, the list item gets deleted.

1

    $("ol").append("<li></li>");

Here li tag gets appended to ol tag.

1

    $("li:last").remove();

First select the element to be removed, and then call remove() method.
Here, we select the last list item in the ordered list and then invoke remove method, which removes li one at a time in reverse order.

Video Tutorial: Append/Add and Remove HTML Elements: jQuery


[youtube https://www.youtube.com/watch?v=jexv6AfI2lE]

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



If we select li and apply remove() method on it, it would remove all the list items from the document. So we need to specify the list item to be removed. In our case, we are interested in removing the last list item from the ordered list.

1

    $("li").remove();

Using append() and remove() methods, try to append and remove string and other html and xml elements from the document.
You could do the same on XML documents too.

Also Learn:
XML Tutorials

Descendant Selectors: jQuery

Video tutorial illustrating the syntax of Descendant selectors.

For the purpose of demonstration, we are using simple html structure. It may not suit the requirement of a descendant selector, but we’re using it to keep things simple and easy to understand the syntax of descendant selectors.

In a complex xHTML or XML structure we could have multiple p tags nested inside a div tag and you want one of these p tags to work on. In such a complex case, you are better to go with descendant selectors.

You could select it as follows:

1

 $("div p:first")

Here it selects the first p tag present inside the div.

jQuery uses simple verbs like first, append, remove etc: which we’ll cover in upcoming tutorials.

Video Tutorial: Descendant Selectors: jQuery


[youtube https://www.youtube.com/watch?v=t044xeB1wKQ]

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



xHTML code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<html>
 <head><title>Descendant Selectors</title>
 
 <link rel="stylesheet" href="style.css" type="text/css" />
 
 </head>
 <body>
 
   <div id="main">
 
    <div>
 
     <p>Technotip IT Solutions</p>
 
    </div>
 
   </div>
 
   <button id="main_div">Main Div</button>
   <button id="sub_div">Sub Div</button>
   <button id="sub_div_para">Sub Div Paragraph</button>
 
 
   <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>

In the xHTML file, observe the nesting of elements / tags. And the id’s given to div and the buttons.

jQuery Code
my_script.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(document).ready( function() {
 
 $("#main_div").click( function() {
   $("#main").css("background-color", "black");
  });
 
  $("#sub_div").click( function() {
   $("div div").css("background-color", "yellow");
  });
 
    $("#sub_div_para").click( function() {
   $("div div p").css("color", "orange");
  });
 
});

To know about .css method of jQuery watch: Animation of Text and Image: jQuery

Observe the descendant selectors in above code.

To select a div inside another div, we write:

1

$("div div")

To select a p tag inside a div which is inturn inside another div, we write:

1

$("div div p")

We could even combine the id, class names and the tag names while selecting the elements.
class name: para

1

$("div div p.para")

ID name: para

1

$("div div p#para")

Optimization Tip:
Being as specific as possible helps speedup the process of selecting the element.

Optimize / Improve Performance of jQuery Applications

Video tutorial illustrating simple tweaks which help optimize / improve the performance of jQuery Applications.

To Optimize
1. Write all javascript programs in an external file and embed it into the html pages.
2. Whenever possible, embed the javascript file at the end of body tag. i.e., just before the closing body tag.
3. It’s also good practice to separate CSS coding to an external file and then embed it to the web pages.

How it helps ?
1. i. If you have thousands of web pages, writing the same code on all the pages and maintaining it and/or modifying it is a touch job.
Having it in an external file helps in re-usability and maintainability.
ii. It only loads the javascript files once and do not load the same files again and again for all other pages, hence saving a lot of bandwidth. Also highly optimizing the load time of web pages.
2. When the parser encounters these javascript files, they stop loading all other elements and allocate all its bandwidth to load javascript file. So writing it at the end of body tag helps. Since all other important elements like images, content will be loaded before these time-consuming javascript files.

Video Tutorial: Optimize / Improve Performance of jQuery Applications


[youtube https://www.youtube.com/watch?v=BsPgkr-YGMs]

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



Above video uses Animation of Text and Image: jQuery code to illustrate the optimization concept. If you have not already seen the video, we highly encourage you to watch it and practice it.

In our future tutorials we will be writing most of our javascript code in external file and will be embedding them at the end of body tag. With this tutorial you know why we would do that!