Module 3:Example and explanations

Example and explanations:

Before we move to the example, there are some points which you must be known; there are some terms that should be known by you that can help you to understand the jQuery with ease.

What is ready() function- is the main function used in the jQquery, it is the heart of the jQuery, if you want to run any event the event (function) must be placed inside this function. This code is to load your functions if you do not add this code your jquery will be useless.

Basically this function work as- Any function which you want to be fire (process) on the web page it (event) must be present in that [$(document). ready ()] function. Through this $(document).ready () function you can fire/move your event as you want

The working of the function is start as soon as the DOM is loaded and before the page contents are loaded.


$(document).ready(function() {
   //all of your code goes here

About the function : As you can see the function, it have a little bit confusing, may it makes little bit hard you to understand.

$ function- One of the critical concepts in any jQuery code is the so called ‘$’ function. ‘$’ is actually an ‘alias’ for the ‘jQuery’ namespace.

$(document) - Activate jquery for object

*Note: some points must be taken in mind before using the above function.



Resides in the ready(), so syntax will be little bit confusing at the last step-

}); - The curly brases for the inner function (function()) closed before the round bracket which is close for the ready function.

Frequently used in script

$(document):- This option will apply the jQuery library methods to a DOM object (in this case, the document object).

$(’#mydiv’):- This option will select every < div> that has the < id> attribute set to “mydiv”.

$(’p.first’):- This option will select all of the < p> tags with the class of “first”.

$(’p[title="Hi!!!"]‘):- This option will select from the page all < p> tags that have a title of “Hi!!!”. Techniques like this enable the use of much more semantically correct (X)HTML markup, while still facilitating the DOM scripting required to create complex interactions.

$(’p[title^="K"]‘):- This enables the selection of all of the < p> tags on the page that have a title that starts with the letter K.

Steps for installing and running a jquery-

So Now you are familier with jQuery, in this section you can lern the steps of processing the jquery , we will download and install jquery for developing our demo application, and on following the steps you can be run the jquery example shortly.

Step 1: Download jQueryv1.3:

you can download the jquery form site.

Step 2: After downloading the jQuery,extect the files with in the same folder add it into your web application.You can rename the folder if you want (Its optional).

Basic Stucture: The basic structure of the jquery is as follows, on following this structuren you can run your jQuery script.

< html>                                                                  
 < head>                                                                  
 < script type="text/JavaScript " src="jquery.js">< /script>          
 < script type="text/JavaScript ">                                         
   // Your JavaScript  code                                      
 < /script>                                                               
 < /head>                                                                 
 < body>                                                                  
   < !--   Your HTML content -->                                        
 < /body>                                                                 
 < /html>

Note*: Make sure that the path(src= “jquery.js”) given buy you is correct and your jquery is in the right folder.

Examples and explanation:

First Example (JavaScript alert): Now we can move to our first example, we follow the basic structure explained above; every thing in the above structure should be cleared to you.

Example description: Let us take an example of the simple alert on click the link. In this example we have to display a pop up window on clicking a link.

Php Page Name: alert.php

< html>                                                                  
 < head>                                                                  
1. < script type="text/JavaScript " src=" jQuery/jquery.js">< /script>          
2. < script type="text/JavaScript ">                                         
3.    $(document).ready(function() {
4.     $("a").click(function() {
5.     alert ("Welcome to jQuery!");
6.   });
< /script>                                                               
< /head>

Exaplanation: This is a simple and the first example of displaying the alert onclicking over the links.

Let us we explain the code writing above for this example, the line by line it can be explained to you, we do not consider the html tags as a line we only gives the explanation of script, not the HTML tags.

Line 1: Including the supporting jquery files in the script.

Line2: < script type="text/JavaScript "> It simply tells that JavaScript code are written here.

Line3: $(document).ready(function() { -

This is the main function from where all the event (Function) are handled.

We have explained this function above if you want to know more about this function, kindly see the above section. Basically working of the function is start as soon as the DOM is loaded and and before the page contents are loaded.

Line4: $("a").click(function() { - A important point of the jquery is the selector, the selection of appropriate selector makes your work more effective.

The line 4 have a selector $(“a”) which is called on a ‘click’ function, the $(a) is a selector, it basically calls all the anchor tags (links) used in the script. It selects all the elements, and $ it self a is an alias for the jquery class, $() construct a new juery object.

So that’s why we here give the example of two links, both having two anchor tag and both calls the same function on click.

Line 5: alert ("Welcome to jQuery alert!"); - This is a JavaScript arert for displaying the alert in the alert window.

Line6 & 7:- brases closed.

Line 8 & 9:- It is the HTML Code for Display Links.

Second Example (delete content):

In the second example, we take an example of removing a div, containing paragraph, there are several paragraphs are displayed here and on clicking the cross image placed on each paragraph it disappears.

Php Page Name: hideDiv.php

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
< html xmlns="">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
< title>Div Disappear< /title>

1.< script type="text/JavaScript " src=" jQuery/jquery.js">< /script>

2.< script type="text/JavaScript ">
4.$(".divClass .deleteDiv").click(function(){
5.$(this).parents(".divClass").animate({ opacity: 'hide' }, "slow");

< /script>

6.< style type="text/css">
body {
margin: 10px auto;
width: 470px;
h3 {
margin: 0;
padding: 0 0 .10em;
p {
margin: 0;
padding: 0 0 .10em;
.divClass {
background: #339999;
padding: 10px 10px 10px;
position: relative;
border-top: solid 2px #003300;
.divClass .deleteDiv {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
7.< /style>
< /head>
< body>
8.< div class="divClass">
9.< h3>First Div< /h3>
10.< p>This is the content place for div no.1< /p>
11.< img src="images/del.gif" alt="delete" class="deleteDiv" />
12.< /div>

< div class="divClass">
< h3>Second Div< /h3>
< p>This is the content place for div no. 2< /p>
< img src="images/del.gif" alt="delete" class="deleteDiv" />
< /div>
< div class="divClass">
< h3>Third Div 3< /h3>
< p>This is the content place for div no. 3< /p>
< img src="images/del.gif" alt="delete" class="deleteDiv" />
< /div>
< div class="divClass">
< h3>Fourth Div 2< /h3>
< p>This is the content place for div no. 4< /p>
< img src="images/del.gif" alt="delete" class="deleteDiv" />
< /div>
< /body>
< /html>

Exapmle Explained: As you can see the code above, the code contains no new thing to explened, so only the core part of the example is explained here, I thing there is no need to to explain each and every thing.

Line1: .< script type="text/JavaScript " src="jquery.js">< /script> - Including the jQuery file.

Line2: .< script type="text/JavaScript "> - JavaScript starts for here

Line 3: $(document).ready(function(){ - event handler function (Explained above).

Line 4: $(".divClass .deleteDiv").click(function(){ - This function is works on calling ckick event applied on both the divs.(one is parent and the another is child).

Line 5: $(this).parents(".divClass").animate({ opacity: 'hide' }, "slow"); - This parent function is works for the parent function (.divClass) the function have two parameter one is for the visibility and the other is for the effects. The function tells about the div is hide the div and the process for hiding is slow.

Line 6- 7: < style type="text/css"> …< /style>- CSS is applied in the line.

Line 8: < div class="divClass"> - This is the div used as a parent element.

Line 9: < h3>First Div< /h3>- html heading tag.

Line 10: < p>This is the content place for div no.1< /p> - html parameter tag.

Line 11: < img src="images/del.gif" alt="delete" class="deleteDiv" />- This is for the image is used in the div.

Line 12: < /div> - Div is closed.

Example 3(Slide up Contents): This is a very simple example, in this example the contents are present in many divs burt resembles us to be present in different lines, and on clicking the content line the line goes disappears.(Actually the div of that line will be disappear on clicking the text.).

Php Page Name: clickon.php.

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
< html>
< head>
  < script src="jQuery/jquery.js">< /script>
  < script>
  1.  $(document).ready(function(){
  2.      $("p").click(function () { 
3.     $(this).slideUp(); 
4.    $("p").hover(function () {
5.     $(this).addClass("hilite");
6.    }, function () {
 7.     $(this).removeClass("hilite");

  < /script>
  < style>
  p { color:green; margin:13px; cursor:pointer; }
  p.hilite { background:orange; }
  < /style>
< /head>
< body>
 8.  < p>Click on this text message to disappear< /p>
 9.  < p>This is the second text message which  is disappear on click< /p>
10. < p>This is the third text message which  is disappear on click< /p>
11. < p>This is the Fourth text message which  is disappear on click< /p>
< /body>
< /html>

Explanation: If you understand the above two example then this example could not create much complication to understand. So below only kew points are consider for discussion.

Line1: $(document).ready(function(){ - event handler function (Explained above).

Line2: $("p").click(function () – click function calls on p selector

Line3: $(this).slideUp(); - A jQuery function

Line4: $("p").hover(function () {- hover function calls on the p selector.

Line5: $(this).addClass("hilite"); - Adding a C.S.S class hillite.

Line6: function () {

Line 7: $(this).removeClass("hilite");- Removing a C.S.S class hillite. When calls the function.

Line 8-11: < p>Click on this text message to disappear< /p> - HTML Paragraph tag containing the text messages..

Example 4(Hide-Show content): This is an example to hide/show the div containing text, the basic work of the example is, there are list of divs(containing the headings. ex- index) when you click on the div. it will expand and show the content inside the div.And onclicking it again it will hide the contents. This is a good exmple for applying on the List.

Php Page name: showHideDiv.php

Module 3:Example and explanations Module 3:Example and explanations Reviewed by Techumor on July 28, 2017 Rating: 5
Powered by Blogger.