Tag: jQuery

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!

Animation of Text and Image: jQuery

Video tutorial to illustrate animation of text and image using jQuery.

In this tutorial, we accomplish:
Animation of text: using animate method.
Display of hidden image: using fadeIn method.
Toggle of image: using slideToggle method.
Change the color of the text being animated: using jQuery’s css method.

xHTML code

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

<html>
 <head><title>jQuery Basics</title>
 </head>
 <body>         <button id="top">Move Top</button>
                <button id="down">Move Down</button>
                <button id="blue">Blue Coloring!</button>                
                <button id="img_show">Show Image</button>
 
               <div id="move">jQuery is awesome!</div>
               <img src="https://technotip.com/logo.png"/>
 
 
 </body>
</html>

Here we have 4 buttons, 1 div tag which contains some string in it, and 1 image tag.
Each button has its own unique ID, which is referenced to track user click event.

CSS code

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

  <style type="text/css">
    #move{
      position: absolute;
      top: 200;
      left: 400;
    }
    img {
      display: none;
      padding: 10px;
      position: absolute;
      top: 100;
      left: 400;
 
    }
  </style>

Using Cascading Stylesheet we position the string present in div tag and the image conveniently on our web page.

jQuery
Move Top

1
2
3
4
5
6
7

$(document).ready( function() {
 
    $("#top").click( function() {
       $("#move").animate({top: 30}, 200);
     });
 
});

Once the #top button is clicked, the string inside div tag(which has move as its id), moves upwards leaving 30px from top of the document and 200px from left.

Move Down

1
2
3
4
5
6
7

$(document).ready( function() {
 
    $("#down").click( function() {
       $("#move").animate({top: 200}, 200);
     });  
 
});

Once the #down button is clicked, the string inside div tag(which has move as its id), moves down leaving 200px from top of the document and 200px from left.

Changing CSS property/value using jQuery

1
2
3
4
5
6
7

$(document).ready( function() {
 
 $("#blue").click( function() {
        $("#move").css("color", "blue");
     });
 
});

Once the #blue button is clicked, the color of string inside div tag(which has move as its id), changes to blue.
.css() method takes 2 parameters, first one being css property and the second one its value.

Toggle image with sliding effect

1
2
3
4
5
6
7

$(document).ready( function() {
 
   $("#img_show").click( function() {
       $("img").slideToggle("slow");
     });
 
});

Once the #img_show button is clicked, the image slides and toggles with slideIn and slideOut effect.

Image appears on the web page with fadeIn effect

1
2
3
4
5
6
7

$(document).ready( function() {
 
   $("#img_show").click( function() {
       $("img").fadeIn("slow");
     });
 
});

Once the #img_show button is clicked, the hidden image fades into the web page.
The image is hidden with the help of css.

Video Tutorial: Animation of Text and Image: jQuery


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

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



Full 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<html>
 <head><title>jQuery Basics</title>
 
  <script src="script/jquery-1.8.1.min.js"></script>
  <script type="text/javascript">
 
   $(document).ready( function() {
 
 
     $("#top").click( function() {
       $("#move").animate({top: 30}, 200);
     });
 
     $("#down").click( function() {
       $("#move").animate({top: 200}, 200);
     });     
 
     $("#img_show").click( function() {
       $("img").slideToggle("slow");
     });
 
     $("#blue").click( function() {
        $("#move").css("color", "blue");
     });
 
     $("#txt_toggle").click( function() {
        $("#move").slideToggle("slow");
     });
 
   });
 
  </script>
 
  <style type="text/css">
    #move{
      position: absolute;
      top: 200;
      left: 400;
    }
    img {
      display: none;
      padding: 10px;
      position: absolute;
      top: 100;
      left: 400;
 
    }
  </style>
 
 </head>
 <body>         <button id="top">Move Top</button>
                <button id="down">Move Down</button>
                <button id="txt_toggle">Text Toggle</button>
                <button id="blue">Blue Coloring!</button>                
                <button id="img_show">Show Image</button>
 
               <div id="move">jQuery is awesome!</div>
               <img src="https://technotip.com/logo.png"/>
 
 
 </body>
</html>

Watch previous day videos and you’ll understand today’s and forthcoming video tutorials easily.

Previous Day Videos:
jQuery Basics: Replace Text/String Inside HTML Document
jQuery: Selectors, Methods, Effects
jQuery: Basic Image Effects

jQuery: Basic Image Effects

Video tutorial illustrates the fadeToggle, fadeIn, fadeOut effect on image using jQuery.

jQuery Code

1
2
3
4
5
6
7
8
9
10
11

 <script type="text/javascript">
               $(document).ready( function() {
 
                 $("#togg").click( function() {
 
                   $("img").fadeToggle("slow");
 
                 });
 
               });
  </script>

Once the document is ready and the user clicks on the button(with togg as its id), the image fades In and fades Out.
This fadeIn and fadeOut effect is accomplished using fadeToggle method of jQuery.

To understand the basic coding of jQuery, please watch previous day videos about selectors and methods.

Complete 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
28
29

<html>
 <head><title>Image Toggle</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
  </script>
  <style type="text/css">
   img{
    position: absolute;
    top: 100;
    left: 200;
   }
  </style>
 
  <script type="text/javascript">
               $(document).ready( function() {
 
                 $("#togg").click( function() {
 
                   $("img").fadeToggle("slow");
 
                 });
 
               });
  </script>
  </head>
 <body>
  <img src="https://technotip.com/logo.png" />
  <button id="togg">Toggle Image!</button>
 </body>     
</html>

Inside the HTML document we have added a image and a button. Once the user clicks on this button, our jQuery code gets executed and the fade In and fade Out effect is presented to the user.
For the jQuery code to be interpreted by the javascript interpreter, we need to include the jQuery standard library file to our web page.

Some basic CSS makes the image look well positioned.

Video Tutorial: jQuery: Basic Image Effects


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

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



Practice this image effect program and also try using
.fadeIn();
.fadeOut();

.slideIn();
.slideOut();
.slideToggle();

functions instead of .fadeToggle(); function.

Also notice that, page doesn’t reload while you perform these DOM manipulations using jQuery. This is a major advantage which builds up rich user experience.

jQuery: Selectors, Methods, Effects

This video tutorial shows the basics of jQuery Selectors, Methods and some nice little image and text effects.

It’ll be fun..

Note:
$(); is a shortcut to $jQuery(); and it’s called Selector.
Its used to select id’s, class, elements.

Selecting id’s, classes and elements is similar to that of CSS Selectors.
For id use # symbol.
For Class use . symbol.
For tags or elements, use tag name or element name.

jQuery Example Code:

1
2
3
4
5

 $(document).ready( function() {
    $("p").click( function() {
      $("img").fadeOut("slow");
  });
});

Once the document is ready or loaded and the user clicks on paragraph text, the image slowly fades out. Simple.

Video Tutorial: jQuery: Selectors, Methods, Effects


[youtube https://www.youtube.com/watch?v=G-bYNbZuzzE]

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



Other methods / effects to try ..

.slideUp();
.slideDown();
.slideToggle();

.fadeIn();
.fadeOut();
.fadeTo();
.fadeToggle();

$(“p”).hide(“fast”);
$(“p”).show(“slow”);
$(“img”).slideUp();
$(“p”).html(“Replacement String”);

We’ll come up with some more video tutorial ..stay subscribed, and try these fun program yourselves too.

Also share how you’re using jQuery in your projects and what you actually want to accomplish using it.

Sign into our forum and start discussing various jQuery and other topics and share your ideas and learn more collectively.

If you were not able to execute the above program, then need not worry, just search on our blog and you’ll find full detailed video tutorial writing and executing it step-by-step.
Hope you’re enjoying it.