Java Tutorial Blog

Introduction to jQuery

//  by 

jQuery is a free, open source JavaScript library intended to simplify multi-browser client side scripting. jQuery has very active developer community constantly improving its core and jQuery is the most famous JavaScript library as of today. The current version of jQuery is 1.8. We can use jQuery to manipulate DOM elements, send Ajax request, receive JSON response, perform animations, and develop user interface widgets and much more. jQuery also supports sophisticated event handling. Developers can extend the jQuery functionality by developing plug-ins. If you are interested in receiving future articles, please subscribe here.

jquery

Purpose of using jQuery

jQuery is a programming style. Although much functionality like JavaScript slideshow can be implemented using plain JavaScript, things will be simplified if we choose to use jQuery. Moreover, jQuery gives us flexibility to select and manipulate DOM elements. jQuery selectors (HTML selectors and CSS selectors) provides us easy way to deal with DOM elements. jQuery makes a lot of things easy instead of “re-inventing the wheel”.

How jQuery works – A First Example

Let’s start by creating a simple HTML page which displays a welcome message when the page loads.

<html>
    <head>
        <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
        <script type="text/javascript">
          $(document).ready(function() {
            alert("Welcome to jQuery!");
          });
        </script>
    </head>
    <body>
    </body>
</html>

The above code snippet displays an alert message to the user. Note that the jQuery library is referenced from within the <head> tag. Also notice that we did not used traditional onLoad(…) event in the <body> tag to display the message after HTML page loads.  In the traditional approach (using onLoad event in the body tag) the JavaScript will not be invoked until all the images and ads in the web page are completely loaded. jQuery solves this problem by checking until document is loaded and ready for manipulation.

ready event

The ready event from the above code is one of the many jQuery events. This event makes sure that any function or handler supplied to this event gets executed after the DOM is fully loaded. Thus, in the above example, the alert message is shown only after DOM is completed loaded.

A realistic jQuery Example

In this example we will hide or show a particular content based on toggle key selection.

<html>
  <head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
          $("#toggle").click(function() {
            var isMyDivVisible = $("#myDiv").css('display');
            if (isMyDivVisible == 'block') {
                $("#myDiv").hide();
                $("#toggle").attr('value', 'Show');
            } else {
                $("#myDiv").show();
                $("#toggle").attr('value', 'Hide');
            }
          });
       });
    </script>
   </head>
   <body>
     <div id="myDiv">
       <p>This is myDiv</p>
     </div>
     <input id="toggle" type="button" value="Hide"/>
   </body>
</html>

In the above example we have one HTML div tag with id of myDiv and a simple button with id of toggle and default value of ‘Hide’. Upon clicking the button we’re hiding the div myDiv and at the same time we’re changing the button’s value to ‘Show’. Clicking again the button will eventually shows the myDiv content and also button’s value changed to ‘Hide’. To achieve this functionality we’re doing several things as outlined below for clarity.

  • We’re binding click event to the button toggle.
  • In the click event (or when user clicks the button) we’re retrieving the CSS display property of myDiv. Essentially, the  display property controls the visibility of an HTML element.
  • Based on the display property whether its block or none we’re hiding or showing the myDiv respectively. At the same time we’re also updating button’s value for better usability.

This simple example demonstrates the power of jQuery and the control it has over DOM tree and its full fledged event handling mechanism.

jQuery Resources

About Ganesh Prakhya