Web Programming TutorialsJquery Objects and Events

Jquery Objects and Events

Last time we tried some examples on events and event handlers. Today we will use jquery along with javascript code and perform some tasks using some inbuilt functions, events and effects. We are going to talk about jquery, how to implement it and how to manipulate certain elements in DOM.

All the inbuilt functions are written in the jquery.js file that is available on jquery.com website. We can directly download and use this file in our projects.

Process to download the file is as follows:

  • Open the browser and go to jquery.com website. Jquery.com homepage is shown below:
  • jquery_website_homepage
    fig 1

  • Now click on Download jQuery button at your right side.
  • Now a page will open containing jQuery 1.x and jQuery 2.x headings.
  • page_containing_jquery_versions
    fig 2

  • These are jquery versions. You can download any of the version.
  • We will download jQuery 1.x jQuery file.
  • You will get links for compressed version and uncompressed version, you can download any one. Difference in compressed and uncompressed version is that compressed version do not have explanation in comments and it is unreadable whereas uncompressed version has explanation and can be read.
  • We will download the compressed file, so click on Download the compressed, production jQuery 1.11.0.
  • The content of the file get’s displayed in the browser itself, it is difficult to understand.
  • Now create a folder on the desktop and name it as sec4_ch8.
  • Open a new notepad document and name it as jquery.js.
  • Now copy the whole content from the browser and paste it in the jquery.js file, save it and close the file.
  • Creating a HTML page:
    • Open a new notepad++ document and save it as index.html in the newly created folder, sec4_ch8.
    • Write the following html code and open the html file in the browser:
    • <!DOCTYPE html>
      <html>
      <head>
      <title>JQuery</title>
      </head>
      <body>
      </body>
      </html>
    • Output of the above code is shown below:
    • initial_output_before_jquery_&_javascript
      fig 3

    • Now we want to demonstrate various things using jquery in this tutorial, so let us include the file jquery.js in index.html document.
    • The file is always included in the head section of the html document.Code for including the file in html document is given below:
    • <script type="text/javascript" src="jquery.js"></script>
    • Now let’s try something practically.
  • Grabbing an object and applying style to it:
    • To have an object, first create a heading in the body section as shown below:
    • <h1>This is a heading</h1>
    • This h1 tag is our object now. To grab this object using jquery following code written in the body section below h1 tag is shown below:
    • <script>
      	$('h1').addclass('red');
      </script>
      
    • Here, we wish to apply red color to the heading text. So we have grabbed the h1 object and added a class called red to it.
    • To grab an object from DOM we need to use jquery object i.e. $ followed by parenthesis. Whatever we want to grab is put in the parenthesis.
    • $ indicates jquery and $(‘h1’) grabs or selects all the h1 tags in the html document.
    • .addclass(‘red’) is the action taken on the h1 tag of adding a class named red to it.
    • This alone will not apply red color to the heading text. We have just finished assigning a class to h1 tag.
    • Now to apply red forecolor style we need to assign styling to the class red in the head section. The code is shown below:
    • <head>
      <title>JQuery</title>
      <style>
      	.red
      	{
      		color:red;
      	}
      </style>
      <script type="text/javascript" src="jquery.js"></script>
      </head>
      
    • The whole head section code is shown above.
    • We have applied the styling in the
      <style>---</style>

      tags.

    • Styling is done to the class red. Hence it is written as .red, because all classes are preceeded by a period in CSS.
    • Then inside the curly braces selector color is given red color value.
    • The output is shown below:
    • red_forecolor_applied_to_h1_tag
      fig 4

    • In the above output we can see that the heading received red forecolor. In this case we have assigned the style through jquery.
    • We had added a class to h1 tag by selecting it through jquery, but if you see in the developers tool windows Element tab of browser, you will see that it has been directly added to h1 tag , it is shown below:
    • <h1 class=”red”>This is a heading</h1>
    • You can get the Developers tools by going to Tools –> Developers Tools.
  • Next task:
    • Now do one thing. Cut the code given below from the body section and paste it in the head section below the script tag where jquery.js file has been included:
    • <script>
      	$('h1').addClass('red');
      </script>
    • You have to be sure that you paste the above code below the script tag that contains the jquery.js file as source.
    • Now reload and see the output. It is shown below:
    • pasting_the_jquery_code_of_class_red_in_head_section
      fig 5

    • Here we see that the red color of the heading have been lost and there is no class attribute in the h1 tag as before in the deelopers tools code.
    • This is because, we tried to add a class red to h1 tag before the h1 tag was defined.
    • We are calling it before h1 tag have been loaded. This means, it gets executed beforehand and when h1 tag is loaded it will not execute and hence we get heading without red forecolor.
    • A solution for this is to execute all the scripts and styling only after the html document is ready. This is achieved by adding document ready handler to the code. Modify the jquery code in the script tag in head section as shown below:
    • <script>
      	$(document).ready(function(){
      	   $('h1').addClass('red');
      	});
      </script>
    • The statement, $(document).ready will allow the script to run only when the html document has loaded completely.
    • The jquery code is in the function which is a parameter of ready. This indicates that the function will execute only when the html document is ready.
    • Now reload the browser and you will get the same output as before i.e. heading with red color as shown in fig 4.
  • Grabbing the object and changing its content:
    • We have a h1 tag with the text This is a heading in the body section.
    • We have styled it using jquery in the head section.
    • The code we have in the script tag is as follows:
    • <script>
      	$(document).ready(function(){
      	   $('h1').addClass('red');
      	});
      </script>
    • Just modify it by adding the following statement below $(‘h1’).addClass(‘red’);
    • $('h1').html('This heading is from jquery.');
    • This statement changes the actual content of the DOM object.
    • Here, we have selected all the h1 tags using $(‘h1’).
    • .html is used to change the actual contents of the selected objects.
    • Here, when we reload the browser, we will get This heading is from jquery instead of This is a heading which is the actual text of h1 tag in the body section.
    • The output is shown below:
    • html_action_output
      fig 6

    • Now write another h1 tag in the body section as shown below:
    • <h1>Here is another heading</h1>
    • Reload the browser and see the output, output shown will be as follows:
    • output_for_second_heading
      fig 7

    • Here, instead of Here is another heading text for second heading, it has printed This heading is from jquery.
    • You will get the same output no matter any number of h1 tags are added to the body.
    • This is because using jquery selector “$(h1)” we have selected or grabbed all the h1 tags in the html document.
    • If you want that the selector should grab only first heading, you will have to add a class to it as follows:
    • <h1 class="myclass">This is a heading</h1>
    • Now go to the jquery code and add this myclass to the selector as shown below:
    • <script>
      	$(document).ready(function(){
      	   $('h1').addClass('red');
      	   $('h1.myclass').html('This heading is from jquery.');
      	});
      </script>
    • Here, myclass is added to the statement of .html, because we want to change only the first heading.
    • If we add it to the selector of addClass(‘red’), then only first heading will be shown in red color.
    • But we want all the headings in red color so we did not add myclass to the selector of addClass(‘red’).
    • Now reload the browser page and see the output. It is shown below:
    • adding_myclass_to_change_only_first_heading
      fig 8

    • Here, you can see that only first heading’s text has been changed and the second heading’s text is as it is.

    Now let’s look at some jquery events.

  • Jquery Events:
    • To see various events in jquery, just open a new tab in your browser and type jquery events in the address bar.
    • You will get a hyperlink Events|jQuery API Documentation. Click on it.
    • A page with address http://api.jquery.com/category/events/ appears containing number of events.
    • If you click on any of the event, you will get its description along with some examples. Just go through these events.
    • So let’s try a click event in our tutorial.
    • Create a button with caption Change Text and a heading in the body section. The code is shown below:
    • <button>Change Text</button>
      <h2>This is the text to change.</h2>
    • Now to do some action when we click the button, we want to change the content of the above given heading.
    • This can be done at the click event.
    • So write the following jquery click event in the script tag in the head section.
    • $(document).ready(function(){
           $('button').click(function(){
      	 $('h2').html("Here is some new text.");
           });
      });
    • Here, when html document is ready, the button object is selected or grabbed using $(‘button’)
    • .click() indicates the click event i.e. whatever function written in this click function as a parameter will get executed when click event of button Change Text occurs or the user clicks on Change Text button.
    • In the function for click event we have changed the content of h2 tag using .html().
    • The output before click event occurs is shown below:
    • output_before_click_event_of_button
      fig 9

    • The text in the h2 tag is This is the text to change. When we click on Change Text button, this text is to be changed.
    • Output after occurance of the click event is shown below:
    • output_after_click_event_of_the_button
      fig 10

    • Here, after observing fig 9 and fig 10, we come to know that the text changes from This is the text to change to Here is some new text. on clicking the button Change Text.
    • Now let us see some jquery effects.

  • Jquery Effects:
    • Along with the events you can also apply many different effects to show animated effect and lot more.
    • So open your browser and type jquery effects in the address bar.
    • Click on the hyperlink Effects|jQuery API Documentation. A page with address http://api.jquery.com/category/effects/ will appear.
    • Go through all the effects. Click on one and you will get its description and examples.
    • So let’s try some jquery effects in our project.
    • For demonstrating events we had changed the text of heading tag h2, now we will give it an effect of sliding up on the button click.
    • So modify the statement $(‘h2’).html(“Here is some new text.”); in the jquery code in head section to $(‘h2’).slideUp(200); the whole code will look like this:
    • $(document).ready(function(){
          $('button').click(function(){
             $('h2').slideUp(200);
          });
      });
    • In the statement $(‘h2’).slideUp(200); above after selecting h2 tag slideUp(200) function will let the heading slide up as fast or slow as specified.
    • Syntax of slideUp() is slideUp(duration,complete); –> here duration indicate how fast or slow the object should slide and complete indicates the function to be executed after sliding up of the object, however it can be optional as in our case.

    • For duration we can use strings “fast” or “slow” or can also give duration in numbers, higher values of number indicate slower animations and lower values of number indicate faster animation.
    • If we don’t give any value, it will take 400 as its default value.
    • In our case when we click on the button Change Text, the heading This is the text to change will slide upwards and disappear.
    • The current status of our webpage is as shown in fig 9.
    • The output after sliding up of the heading is shown below:
    • output_after_slideUp_execution
      fig 11

    • To make the heading again visible and appear to slide down we can replace slideUp() to slideDown().
    • Or to make it toggle up and down on button click we can directly use slideToggle() effect as shown below:
    • $(‘h2’).slideToggle(200);
    • If we wish to change the heading as the caption of the button specifies and then toggle up and down, we can achieve it using the code shown below:
    • $(document).ready(function(){
         $('button').click(function(){
            $('h2').html("Here is some new text.").slideToggle(200);
         });
      });
    • The statement, $(‘h2’).html(“Here is some new text.”).slideToggle(200); will toggle the heading up and down by changing the its content.
    • The output after execution of this code is shown below:
    • output_after_click_event_of_the_button
      fig 12

    • We got this output after clicking the button. The heading has changed and slides up and down on every click of the button.
    • Similarly we can try number of effects using jquery.

Thus we finished demonstrating jquery features with events and effects.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -