HelloWorld - My First jQuery Program

What is jQuery
jQuery is nothing but JavaScript library that comes with rich functionalities. It's small and faster than many JavaScript code written by an average web developer. By using jQuery we can write less code and do more things, its makes web developer's task very easy. In simple word, jQuery is a collection of several useful methods, which can be used to accomplish many common tasks in JavaScript. A couple of lines of jQuery code can do things which need too many JavaScript lines to accomplish. The true power of jQuery comes from it's CSS-like selector, which allows it to select any element from DOM and modify, update or manipulate it. You can use jQuery to do cool animations like fade in or fade out. You can also change CSS class of a component dynamically e.g. making a component active or inactive. I have used this technique to implement tabbed UI in HTML. I can vouch for jQuery that once you start using it, you will never go back to plain old JavaScript, it's clear, concise and powerful. You will even regret why you are not using jQuery before.


What we can handle using jQuery

jQuery is very powerful, it provides methods and API to do almost all kinds of thing you can do with JavaScript. Though jQuery is particularly good in the following area
  •    HTML and DOM manipulation
  •    CSS manipulation
  •    HTML event methods
  •    AJAX
  •    Utilities

By using jQuery you can add a new element into DOM, update existing element from DOM and can easily remove any element. jQuery's powerful class and id selector allow you to select any HTML element or group of elements for selective manipulation. jQuery also allows you to select and modify attributes from any HTML element in DOM.



How to Use jQuery

If you want to use jQuery, you just need to get jQuery file e.g jquery-1.2.6.min.js or latest version from its official site or any of three popular CDN URL which provides jQuery download. For example <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script> downloads jQuery from Google's content delivery network. You can even ship jQuery library along with your app by saving downloaded file to your file-system location.

When we want to use this we have to include this file to our program file(i.e HTML file). For example this example loads jQuery from local drive rather than downloading it from internet. By the way, there are some advantages of downloading jQuery using CDN networks. CDN stands for content delivery network. Some time web developer also confuses where to put the script tag e.g. should we put script tag on head or body.

Well you can put it anywhere but putting it on body make more sense on performance perspective, because in that case jQuery library will be downloaded after all HTML, CSS, Images are downloaded and page is rendered. Even if it stuck downloading jQuery from internet you will not see the blank page, which is the case when you put script tag on head.

By the way, this consideration will only occur, if you decide to download jQuery from internet rather than from local drive, and if you the one who like to see all JavaScript dependency at the top of the page, then put it in head. I like to put jQuery download code, right at the top section, on head.


Simple jQuery  Example

Here is our first jQuery program, which does the really simple thing. There is a button, you just need to click it and suddenly you see a welcome message on your screen. This is a good example of how you can get a DOM element and add new HTML code there. In next section, you will see a full explanation of this jQuery program.

<html>
    <head>
        <title>My First jQuery Program</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
    </head>
    <body>
        <script type="text/javascript">
            $(document).ready(function() {
                $("button").click(function() {
                    $("#bClick").html("<h1>Hurry!!! </h1><h2>Welcome to wonderful world of jQuery</h2>");
                });

            });
        </script>
        Click the button to see demo
        <button>Click me</button>
        <div id="bClick"></div>
    </body>
</html>

and here is the output, or how does it look like in your browser e.g. internet explorer, chrome or Firefox :
My First jQuery Program Example

Explanation of code:

jQuery syntax is made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $(selector).action(), here $ sign is short-cut of jQuery() method and used to define/access jQuery.  (selector) is used to "query (or find)" HTML elements, and can be any CSS style selector or special jQuery selectors.  jQuery action() is the task to be performed on the selected element(s). For example, in our program, we have  $(document).ready(function() { ...});  which is where your all jQuery code should go. This method is executed once browser finished loading HTML page and DOM is ready to be accessed. $("button") is used to get all HTML button element since there is only one here, we will get a reference of that. click() is used to listen to click event, and it registers listener the anonymous function you passed to it. The code here is executed when button is clicked. If you look our code, you will see that we are again getting reference of an HTML element whose id is bClick, $("#bClick") returns a DIV with id bClick, # is used to denote ID, and this type of selector is known as ID selector. Once you get this element, you set it's HTML by passing the HTML text to it, which is what displayed when you click the button.


Good for a first jQuery program, I am sure the more you do, the more started loving it. If you want to start serious development in jQuery, I suggest to go through this list of some good jQuery books and find one you like. It makes sense for all front-end web developers to at-least know jQuery. By the way, JavaScript is getting tons of good library, which is driving a lot of good development. A couple of other useful JavaScript library are Angular.js and Node.js, I am sure you heard about them as well. Comparing to jQuery there still in the early state, on the other hand, jQuery has almost captured all JavaScript front-end market.


1 comment: