JQuery Callback Functions

From the last several articles we have been using JQuery effects and animation functions to perform different tasks. We explained the process of showing, hiding, fading, sliding and animating html elements on the screen. Most of these functions took an optional parameter callback function. We did not specified it in previous articles. Now is the time to see how JQuery callback functions work in JQuery.

JQuery Callback functions are nothing but simple functions that execute when a certain JQuery function completes its execution. For instance if we want to display a certain message after an element fades out of screen, we can do so using callback functions. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>FadeOut Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("button").click(function(){
           $('h1').fadeOut(2000,function(){
               alert("Heading is faded out");
           });
  
         });
           
         });
      </script>
</head>
    
<body>
    
    <button>Click to see fadeout in action.</button>
    <h1> This is a heading</h1>
    <p>This is a random paragraph</p>
    
    
</body>

</html>

Download Code
Run Code

The above html page contains a button, an h1 heading and a paragraph. When a user clicks the button, an event is fired which is handled by JQuery click event handler. A function executes within the event handler which fades out the h1 heading in 3 seconds. After the h1 heading fades out, the callback function executes which is passed as second parameter to fadeOut function. The callback function displays an alert box with some message on the screen.

Let’ have a look at another example. Here we will us JQuery animate function to move a circle down. Once the circle has moved, we shall use callback function to hide it from the screen. The code for this example is as follows:

<!DOCTYPE html>
<html>
<head>
    
    <title>Slide down Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $('button').click(function(){
           $('.circle').animate(
               {top: '400px'},2000, function(){
                   $(this).hide();
               }
           );
              
         });
           
         });
      </script>
    <style>
        
    
        .circle{
            background-color: cornflowerblue;

           width: 200px;
            height: 200px;
            border-radius: 100%;
            position: absolute;
            margin: 0 auto;
            left: 50%;
            margin-top: 20px;
            margin-left: -100px;

    
        }
    </style>
</head>
    
<body>
    
    <div style="text-align:center">
    <button>Move Circle</button>
    <div class="circle"></div>
    </div>
    
    
</body>

</html>

Download Code
Run Code

The above html page contains a button and a blue circle. Once you click the button, you will see blue circle move down 400px in two seconds. Once it completes its movement, it will be hidden via callback function.

JQuery Animations

The last article explained how we can JQuery slide effects to slide up and slide down html elements on the webpage. This article explains how JQuery animations work. JQuery contains animate() method which is used for creating amazing animations. The animate method takes three parameters. The first is the parameters for animation, the second is the speed and the third is callback. Last two parameters are optional. The animate method executes on the element which we want to animate. Take a look at the following example to see a simple animation in JQuery.

<!DOCTYPE html>
<html>
<head>
    
    <title>Slide down Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $('button').click(function(){
           $('.circle').animate(
               {top: '400px'}
           );
              
         });
           
         });
      </script>
    <style>
        
    
        .circle{
            background-color: cornflowerblue;

           width: 200px;
            height: 200px;
            border-radius: 100%;
            position: absolute;
            margin: 0 auto;
            left: 50%;
            margin-top: 20px;
            margin-left: -100px;

    
        }
    </style>
</head>
    
<body>
    
    <div style="text-align:center">
    <button>Move Circle</button>
    <div class="circle"></div>
    </div>
    
    
</body>

</html>

Download Code
Run Code

The above html page contains a button at the top center of the page and a blue circle under the button. This blue circle is a div with class circle. When you click on the button, an event is fired. JQuery click event handles this function. Inside the click event a function is located which animates the circle div by pushing it 400px down the page.If you click the button, you will see your blue circle moving down 400px. This is due to the animate function.

It is pertinent to mention here that by default html elements are statically positioned. Therefore, to move elements, mark them as absolute, fixed or relative using CSS properties

Animating Multiple Properties

In the last example, we animated the circle div via single property. Animate function can take multiple parameters for animating an html element. Have a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>Slide down Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $('button').click(function(){
           $('.circle').animate(
               {top: '400px',
                opacity: '0.5',
                height: '100px',
                width: '100px'
               }
           );
              
         });
           
         });
      </script>
    <style>
        
    
        .circle{
            background-color: cornflowerblue;

           width: 200px;
            height: 200px;
            border-radius: 100%;
            position: absolute;
            margin: 0 auto;
            left: 50%;
            margin-top: 20px;
            margin-left: -100px;

    
        }
    </style>
</head>
    
<body>
    
    <div style="text-align:center">
    <button>Move Circle</button>
    <div class="circle"></div>
    </div>
    
    
</body>

</html>

Download Code
Run Code

Now, if you run the above code, you will see that when you click the button, the blue circle not only moves down but it also shrinks in size and its opacity decreases.

JQuery Slide Effects

In the last tutorial we studied how to fade-in and fade-out elements using JQuery fadeIn() and fadeOut() functions. This article extends the last article and explains JQuery slide effects. There are three types of slide effects in JQuery: slideDown(), slideUp() and slideToggle(). This article touches the first two of them. The slideToggle() effect is just a combination of the first two.

JQuery Slide Down Effect

JQuery slideDown() function implements the sliding down effect on the element. The slideDown() function takes two optional parameters: speed and callback. Speed parameter defines the speed with which the element slides down on the page. it can take values like “slow”, “fast” or milliseconds. The callback is the function which executes when the slideDown() function completes its functionalities. We shall see call backs in the later sections. Take a look at this example.

<!DOCTYPE html>
<html>
<head>
    
    <title>Slide down Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $('.btn').click(function(){
           $('.box').slideDown(1000);
              
         });
           
         });
      </script>
    <style>
        
        .btn{
            background-color: #333;
            padding: 20px;
            text-align: center;
            color: white;
        }
        .box{
            background-color: cornflowerblue;
            color: white;
            text-align: center;
            padding: 40px;
            display: none;
        }
    </style>
</head>
    
<body>
    
    <div class="btn">Click to see slidedown in action.</div>
    <div class="box">Welcome to Knowledgehills</div>
    
    
</body>

</html>

Download Code
Run Code

The above code contains two divs elements with class btn and box. When the btn div is clicked an event is fired which is handled by JQuery click event. The click event executes a function which applies slide down effect on the div with class of “box”. When the page loads you will only see a black strip at the top. Clicking this strip will slide down a blue box via slideDown() function.

JQuery Slide Up Effect

The slideUp() function is similar to the slideDown() function. It takes two parameters speed and callback. take a look at the following example to see how we can slide up html elements.

<!DOCTYPE html>
<html>
<head>
    
    <title>Slide Up Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $('.btn').click(function(){
           $('.box').slideUp(1000);
              
         });
           
         });
      </script>
    <style>
        
        .btn{
            background-color: #333;
            padding: 20px;
            text-align: center;
            color: white;
        }
        .box{
            background-color: cornflowerblue;
            color: white;
            text-align: center;
            padding: 40px;
        }
    </style>
</head>
    
<body>
    
    <div class="btn">Click to see slide up in action.</div>
    <div class="box">Welcome to Knowledgehills</div>
    
    
</body>

</html>

In the above code, clicking the black strip at the top will slide up the blue box.

Download Code
Run Code

JQuery Fade Effects

In the last tutorial we studied how to hide and show elements using JQuery. This article extends the last article and explains JQuery fade effects. There are four types of fade effects in JQuery: fadeIn(), fadeOut(), fadeToggle() and fadeTo. This article touches the first two of them. The fadeToggle and fadeTo are just extensions of the first two.

Fading in Elements via fadeIn()

The fadeIn() function takes two optional parameters: speed and callback. Speed parameter defines the speed with which the element fades into the page. it can take values like “slow”, “fast” or milliseconds. The callback is the function which executes when the fadeIn() function completes its functionalities. We shall see call backs in the later sections. Take a look at this example.

<!DOCTYPE html>
<html>
<head>
    
    <title>FadeIn Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("button").click(function(){
           $('h1').fadeIn(1000);
            $('p').fadeIn('fast');
            
         });
           
         });
      </script>
    <style>
        h1,p{display: none;}
    </style>
</head>
    
<body>
    
    <button>Click to see fadein in action.</button>
    <h1> This is a heading</h1>
    <p>This is a random paragraph</p>
    
    
</body>

</html>

Download Code
Run Code

The above html document contains a button, an h1 heading and a paragraph. When a user clicks button an event is fired which is handled by the click function. Inside this function, h1 and p elements are selected. The speed for fading in h1 is 1 seconds, while for paragraphs, it is fast. Notice that both h1 and paragraph are hidden by default. Once, the page loads you will only see a button. Clicking this button will fade in both h1 and paragraph.

Fading out Elements via fadeOut()

FadeOut function is similar to fadeIn() function, it also takes two parameters: speed and callback. Take a look at the following example to understand this.

<!DOCTYPE html>
<html>
<head>
    
    <title>FadeOut Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("button").click(function(){
           $('h1').fadeOut(1000);
            $('p').fadeOut('fast');
            
         });
           
         });
      </script>
</head>
    
<body>
    
    <button>Click to see fadeout in action.</button>
    <h1> This is a heading</h1>
    <p>This is a random paragraph</p>
    
    
</body>

</html>

Download Code
Run Code

In the above code, clicking the button will fade out both h1 and paragraph elements from the webpage.

JQuery Effects – Hide and Show Elements

JQuery effects are some of the most amazing functionalities of JQuery. JQuery effects include functionalities like hiding/showing the elements, fade and animate elements etc. This article explains how JQuery elements can be hidden and displayed using the hide and show functions respectively. Let’s have a look how both functions work.

Hiding Elements with Hide Function

Calling hide() function on any html element hides the element. The hide() function takes two optional parameters: speed and callback. Speed parameter defines the speed of hiding the element. it can take values like “slow”, “fast” or milliseconds. The callback is the function which executes when the hide() function completes its functionalities. We shall see call backs in the later sections. Take a look at this example.

<!DOCTYPE html>
<html>
<head>
    
    <title>Hide Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("h1").click(function(){
           $(this).hide(1000);
         });
           
         });
      </script>
    
</head>
    
<body>
    
    <h1>This is heading1</h1>
    <p>This is a random paragraph</p>
    
</body>

</html>

Download Code
Run Code

The above html code contains an h1 heading and a paragraph. When the user clicks on h1 heading an event is fired. JQuery click function handles this event. Inside the click function, the “this” keyword selects the element which has generated the event. In this case, h1 has generated the event therefore, “this’ keyword selects h1. Then the hide() function is called on the h1 element. The hide() function has a speed of “1000” which means that h1 element will be hidden in one second.

Displaying Elements with Show Function

Displaying elements via show() function is similar to hide() function. It also takes speed and callback as two optional parameters. Have a look at the following example to understand this.

<!DOCTYPE html>
<html>
<head>
    
    <title>Show Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("p").click(function(){
           $("h1").show(1000);
         });
           
         });
      </script>
    
    <style>
        h1{display: none;}
    
    </style>
    
</head>
    
<body>
    
    <h1>This is heading1</h1>
    <p>This is a random paragraph</p>
    
</body>

</html>

Download Code
Run Code

In the above code, the display style for h1 has been set to none by default. This hides the h1 elements when the page loads. When the user clicks the “p” element, this h1 element is displayed on the page using show() function.

JQuery Events Handling

When a user visits a webpage, he performs different actions e.g. clicking different areas of the page, hovering mouses, clicking radio buttons etc. Events fires as a result of these user actions. JQuery contains functions that can handle these user events by responding to them. This article explains how JQuery events are handled via functions. Let’s jump straight into a working example

Handling User Click Event

The following example explains how we can display a certain message to the user in the pop box when he clicks some specific element on a webpage.

<!DOCTYPE html>
<html>
<head>
    
    <title>Click Event Handling</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("h1").click(function(){
            alert("Heading 1 has been clicked");
         });
           
         });
      </script>
    
</head>
    
<body>
    
    <h1>This is heading1</h1>
    <p>This is a random paragraph</p>
    
</body>

</html>

Run Code
Download Code

The html of the above page contains an h1 heading and a paragraph. Inside the script, we select the h1 heading and then call click on it. The click function takes a function as a parameter. This function is executed once user clicks the h1 element. Inside this function, a message is being displayed by the alert box.

Handling Mouse Hover Event

The mouse hover event occurs when user hovers a mouse on specific element of a webpage. The hover function takes two functions as a parameter. The first is the function that executes when mouse enters the boundaries of an html element. The second parameter is the function that executes when mouse leaves the boundaries of the element. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>Hover Event Handling</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $("h1").hover(function(){
            alert("You entered the h1 heading");
         }, 
                function(){
            alert("You left the h1 heading");
         });
           
         });
      </script>
    
</head>
    
<body>
    
    <h1>This is heading1</h1>
    <p>This is a random paragraph</p>
    
</body>

</html>

Run Code
Download Code

In the above code, when user hovers over the h1 heading, an alert box will appear displaying a message that you have entered h1 heading. Similarly, when user leaves the h1 heading corresponding message will be displayed in the alert box.

JQuery Applying Styles

In addition to selecting elements and attributes via factory function and attr() function, respectively, JQuery can also modify style associated with HTML elements. Applying styles to different elements in JQuery is extremely simple. JQuery contains an addClass function. This function takes class name as the parameter. The styles in this css class are applied to the elements on which the addClass method is called. The following example demonstrates how JQuery modifies styles of html elements.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Remove Class Affect</title>
          <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

      <script>
           
         $(document).ready(function() {

            $("#btn").click(function(){
               $(".circle").addClass("circle2", "slow");
            });
             
              $("#btn2").click(function(){
               $(".circle").removeClass("circle2", "slow");
            });

         });
      </script>
       
       <style>
           .circle{
               width: 200px;
               height: 200px;
               background-color: aqua;
               border-radius: 100%;
               margin: 0 auto;
           }
           
           .circle2{
               width: 100px;
               height: 100px;
               background-color:coral;
               border-radius: 100%;
               margin: 0 auto; 
           }
           
       </style>
       
   </head>
   <body>

 <button id = "btn"> Shrink Circle </button>
       
<button id = "btn2"> Expand Circle </button>

      <div class = "circle">
        
      </div>

   </body>
</html>

Download Code
Run Code

The above html code creates a two column layout with a header at the top. You can see that in the html, there is no class specified for the three div tags. However, the div contains ids. JQuery code selects div elements via these ids. Next, JQuery uses addClass method to add css classes to the corresponding divs. The class “headdiv” is added to the first div, “rightdiv” is added to the div with id “rdiv” and finally “leftdiv” class is added to the div with id “rdiv”.

Removing Styles via Remove Class

JQuery can also removes predefined styles from any element via removeClass function. This function takes class to remove from the element as parameter. Take a look at the following example.

<!DOCTYPE html>
<html>

    <head>
        
         <title>JQuery Applying Styles</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
          $(document).ready(function() {
           
            $("#hdiv").removeClass("headdiv");
            $("#rdiv").removeClass("rightdiv");
            $("#ldiv").removeClass("leftdiv");
         });
      </script>
    <style>
        .headdiv{
            
            height: 30px;
            width: 100%;
            background-color: #333;
        }    
        .leftdiv{
            height: 400px;
            width: 70%;
            float: left;
            background: #ccc;
        }
         .rightdiv{
            height: 400px;
            width: 29%;
            float: right;
            background: #999;
        }
        
    </style>
        
   </head>
	
   <body>
      <div>
        <div id="hdiv" class="headdiv">
          </div>
        <div id="rdiv" class="rightdiv">
          </div>
          <div id="ldiv" class="leftdiv">
          </div>
    
      </div>
   </body>

</html>

Download Code
Run Code

In the above code, three div contains classes which style them as header, left division and right division. However, in the script, JQuery uses removeClass method to remove the css classes from these divs, therefore in the result section, you will see an empty webpage.

JQuery Attributes

In addition to manipulating elements via selectors, JQuery attributes contains functions which can retrieve values of attributes of any element and change them. Attributes modify HTML elements. For instance an “img” tag contains a “src” attribute which points towards the physical location of the image. Similarly “a” tag contains “href” attribute that contains the link.

Selecting JQuery Attributes

The attr() function selects the attribute of the element on which it is called. The attr() method takes name of the attribute to select as a parameter. The following explains how to select attribute of any element using JQuery.

<!DOCTYPE html>
<html>

    <head>
        
         <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
          $(document).ready(function() {
            var linkadd = $("a").attr("href");
            $("#linkid").text(linkadd);
         });
      </script>
        
   </head>
	
   <body>
      <div>
         <a href="http://www.google.com">This is a link</a>
          <p>This link points to:</p>
          <p id = "linkid"></p>
      </div>
   </body>

</html>

Download Code
Run Code

The above web page contains a link with an href attribute. The “href” attribute points to www.google.com. If you look at the script section in the header, you will see that, the factory function $ selects the “a” tag and then calls the attr() method on it. The parameter passed to attr() is the “href”. This means that the attr() method will select the value inside this “href” attribute i.e. the link to google.com and will store it in “linkadd” variable.

Next, the “text” function is called on the selected element with id “linkid”. This function changes text of selected element. The “linkadd” variable is passed to this function. This will change the text of paragraph with id “linkid” to www.google.com.

Setting JQuery Attributes

The attr() function can also set the value for any given attribute of the html element. For setting, attribute values, attr() function takes two parameter: name and value. The name specifies the name of the attribute to set, and the value specifies the value that should be assigned to the selected attribute. The following example demonstrates this concept.

<!DOCTYPE html>
<html>

    <head>
        
         <title>JQuery attribute selectors</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
          $(document).ready(function() {
            $("#linkid").attr("href","http://www.google.com");
         });
      </script>
        
   </head>
	
   <body>
      <div>
         <a id="linkid">This is a link</a>
          
      </div>
   </body>

</html>

Download Code
Run Code

The above code selects the elements with id “linkid” and set the value of their “href” attribute to “http://www.google.com”

JQuery Selectors

JQuery selectors act upon HTML elements and manipulate them. JQuery selectors can change the inner text of HTML elements. They can also alter the CSS associated with the HTML elements and can react to events as well. In JQuery, the $() factory function is used to select the html elements. This function takes element to select as parameter. For

How JQuery Selectors Work

Following are the three ways in which JQuery Selector, select elements.

  • By Name: For instance, $(‘h1’) will select all h1 headings in webpage
  • By Class: For instance, $(‘.class-name’) will select all elements with class ‘class-name’
  • By ID:For instance, $(‘#id-name’) will select all elements with class ‘id-name’

The following example demonstrates the usage of JQuery selectors for selecting elements by name.

<!DOCTYPE html>
<html>
<head>
    
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
            $('h1').css("background-color", "blue");
            $('h1').css("color", "white");
            $('p').css("background-color", "red");
         });
      </script>

    
</head>
    
<body>
    
    <h1>This is white text with blue background</h1>
    <p>This is a paragraph with red background</p>
    
</body>

</html>

Download Code
Run Code

In the above code, the JQuery selector selects h1 tag and changes its background color to blue while foreground color to white. You can see that properties like background-color and color, which exist in actual CSS are used here for changing the style. The selector also changes the background color of all paragraphs to red.

The last example showed how elements names are used for selection. This example demonstrates the usage of element class and id for element selection in JQuery.

<!DOCTYPE html>
<html>
<head>
    
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
            $('.blue').css("background-color", "blue");
            $('.blue').css("color", "white");
            $('#red').css("background-color", "red");
         });
      </script>
    
</head>
    
<body>
    
    <h1 class="blue">This is white text with blue background</h1>
    <p id="red">This is a paragraph with red background</p>
    
</body>

</html>

Download Code
Run Code

In the above example, the h1 element has a class of blue, while paragraphs have an id of red. The background color and fore color of all the elements with class blue has been changed to blue and white respectively. Similarly, the background color of all the elements with class red is changed to red.

This article explained how selectors select HTML elements. The next article will explain how JQuery can select and manipulate attribute values in HTML.

JQuery Tutorial

JQuery Tutorial – Introduction to JQuery

JQuery is one of the most widely and frequently used JavaScript libraries till date. JQuery allows rapid client side web development. JQuery contains built-in methods for most of the client side functionalities. Implementing these functionalities in JavaScript needs large piece of code. To summarize, JQuery handles elements on any webpage, traverse them, react to events, create animations and implement AJAX. This JQuery tutorial is for beginners as well as for the professionals who want to revisit their JQuery knowledge.

JQuery Installation

JQuery is freely available at google code APIs. To use JQuery in your web page, simply copy and past the following code in the header section of your web page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js">

Adding above JQuery link to the webpage will make JQuery work when you are connected to the internet. In case if you want to run JQuery offline, you should download the JQuery file and use it locally as you use any ordinary JavaScript file.

How to check if JQuery is Enabled on your page

When JQuery is enabled inside a webpage, it allows user to access the ‘jQuery’ object. Simply pass this ‘jQuery’ object to ‘if’ statement. If it returns true, it means JQuery us enabled, otherwise it will return false. Have a look at the following piece of code.

<!DOCTYPE html>
<html>
<head>
    
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
        if(jQuery)
            {
               alert("Congratulations JQuery Loaded"); 
            }
        else{
            alert("JQuery not enabled");
        }
      </script> 
    
</head>
    
<body>
    
    
</body>

</html>

Download Code
Run Code
Try to run the above script. You will see a pop-up message in your browser which reads ‘Congratulations JQuery Loaded’. If you do not see above message, there is some problem with your reference to JQuery library. Try to fix it by reading this article again. The “alert” is a JavaScript function which displays a message box on the screen

This tutorial merely provided an introduction to jquery. In the upcoming tutorials, we shall see actual power of Jquery and what it can do for us. Keep visiting this site.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .