Post
Ask Question

Basics of jQuery: Part 1

This article discusses the following topics:

  1. What jQuery is
  2. Advantages of using jQuery
  3. How to use jQuery
  4. Demo
  5. What $(document).ready(function()) is and when to use it
  6. Difference between $(window).load and $(document).ready
  7. When to use $(window).load over $(document).ready

jQuery is not a new programming language. It is built on top of JavaScript.

In simple words, jQuery is a light weight JavaScript library that simplifies programming with JavaScript. In other words it makes it easier to work with JavaScript.

Now you might be wondering, since jQuery is not a programming language and it is just a collection of JavaScript libraries, should we use jQuery since we already know how to work with JavaScript, what are the advantages of using jQuery over raw JavaScript?

Advantages of using jQuery

jQuery is cross-browser compatible, meaning if we write JavaScript code using jQuery then we don't need to be worried about the browser compatibility issues because all that is taken care of by jQuery itself.

  • jQuery is easier to use than raw JavaScript. (We will look at an example in just a bit.)
  • jQuery has rich AJAX support. (We will explain this in the later articles of this series.)
  • jQuery has a large development community and many free plugins that can be used.
  • jQuery uses a simple, clean and powerful syntax as compared to the raw JavaScript.

How to use jQuery

To use jQuery in your web application, all you need to do is go to jQuery.com.

go to jQuery
Click on the Download jQuery v1.11.3 or v2.1.4

Download jQuery

You will see there are two versions of jQuery.

If you want your web application to support older versions of browsers then use jQuery 1.x else use jQuery 2.x.

Note: It is better to use both of these libraries to support older and the latest web browsers.

Now, in the image, each of both versions have two files, in other words the compressed one and the uncompressed one. The compressed one is for production purposes, all the unnecessary spaces are removed and variable names are shorter.

shorter

The un-compressed version is meant for the development purpose that we will be using in this series.

The advantage of using the un-compressed version is that it is easily readable and the variable names are meaningful.

meaningful

Once you have downloaded the plugins, copy and paste it into your web application directory.

plugins

Add a reference to these jQuery files in your webforms or HTML documents, just like we add references to the external JavaScript files.

Write the following in your HTML document.
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title></title>  
  5.         <script src="scripts/jquery-1.11.3.js"></script>  
  6.         <script src="scripts/jquery-2.1.4.js"></script>  
  7.     </head>  
  8.     <body>  
  9.         <input type="button" id="jQueryBtn" value="Click Me!" />  
  10.         <script type="text/javascript" lang="ja">  
  11. //ready function ensures DOM is fully loaded  
  12. jQuery(document).ready(function () {  
  13.   
  14. });  
  15. </script>  
  16.     </body>  
  17. </html>  
Note: To write a jQuery function we can either using jQuery or we can use $ (dollar). Both are equivalent.

In JavaScript, if we want refer to any element in our document based on their id, we use document.getElementById("id"). In jQuery we use something called “id selector”.

We will explain more about selectors in the future articles of this series.

To refer to an element using its id we use #id and here the button id is jQueryBtn so it will be #jQueryBtn.

jQueryBtn

On this element we want to invoke a function when a click event is raised.
  1. <script type="text/javascript" lang="ja">  
  2.    //ready function ensures DOM is fully loaded  
  3.    jQuery(document).ready(function () {  
  4.       jQuery("#jQueryBtn").click(function () {  
  5.          alert("Hello World");  
  6.       });  
  7.    });  
  8. </script>  
Explanation

When the DOM is fully loaded the ready function is fired that will create an anonymous function and in that anonymous function we are retrieving the element using its id and on the click event of that element we are executing another anonymous function that will give us the alert window.

Save and run the application.

Click the button.

Click the button

What $(document).ready is

It is a jQuery event that fires as soon as the DOM is fully loaded and ready to be manipulated by script. This is the earliest point in the page load process where the script can safely access elements in the page's HTML DOM. This event is fired before all the images and CSS are fully loaded.

If you look at the following code:
  1. jQuery("#jQueryBtn").click(function () {  
  2.    alert("Hello World");  
  3. });  
It is wrapped inside a jQuery(document).ready function that ensures that when the preceding piece of code is executed, the browser DOM is fully loaded. It can access the element “Button” and attach the click event handler to it.

Now you might be thinking, what will happen if we remove the jQuery(document).ready function?

Let' look at it practically.
  1. <script type="text/javascript" lang="ja">  
  2.    jQuery("#jQueryBtn").click(function () {  
  3.       alert("Hello World");  
  4.    });  
  5. </script>  
script

So, at the moment we don't have the $().ready function.

Run the application and click the button.

click

You will see nothing is happening because our JavaScript code is executed before the input element. In our script element, the jQuery function is looking for an element with an id “jQueryBtn” but it was looking for that element before the DOM was fully load and since the HTML input element code is executed after the JavaScript code the jQuery function was unable to find an element with that id.

Now let's see how to solve this problem.
  1. Place the input element before the script tag or just place the script before the closing body element.
    1. <input type="button" id="jQueryBtn" value="Click Me!" />  
    2.   
    3.    <script type="text/javascript" lang="ja">  
    4.    jQuery("#jQueryBtn").click(function () {  
    5.       alert("Hello World");  
    6.    });  
    7. </script>  
    Hello World

  2. Wrap the code inside the jQuery.ready function.
    1. <script type="text/javascript" lang="ja">  
    2.    jQuery(document).ready(function () {  
    3.       jQuery("#jQueryBtn").click(function () {  
    4.          alert("Hello World");  
    5.       });  
    6.    });  
    7. </script>  

Difference between $(window).load and $(document).ready

$(window).load is an event that fires when the DOM and all the content (everything) on the page is fully loaded. This event is fired after the ready event.

Let's look at an example.

  1. <script type="text/javascript" lang="ja">  
  2.   
  3.    $(window).load(function () {  
  4.       alert("Window load event fired");  
  5.    });  
  6.   
  7.    $(document).ready(function () {  
  8.       alert("document ready event fired");  
  9.    });  
  10. </script>  
In the preceding JavaScript, we created an anonymous function that contains an alert message. So, when the preceding two events are fired an alert window will pop-up.

Run the application and let's see which event is fired first.

The document ready function will be fired first.

document ready function

Then the window load event will be fired.

window load

When to use $(window).load instead of $(document).ready

In most cases, the script can be executed as soon as the DOM is fully loaded. So, ready() is usually the best place to write your JavaScript code. But there could be some scenario where you might need to write scripts in the load() function. For example, to get the actual width and height of an image.

As we know the $(window).load event is fired once the DOM and all the CSS, images and frames are fully loaded. So, it is the best place to write the jQuery code to get the actual image size or to get the details of anything that is loaded just before the load event is raised.

Let's look at an example.

Add an image to your project folder as in the following:

Add an image

Write the following HTML to generate an image element.
  1. <div id="myDiv">  
  2. </div>  
  3. <img src="batman.jpg" alt="Batman" />  
Write the following JavaScript code to get the actual width and height.
  1. <script type="text/javascript">  
  2.    $(window).load(function () {  
  3.       $("#myDiv").html("Width = " + $("#Batman").width() +  
  4.       "<br/>" + "Height = " + $("#Batman").height())  
  5.    });  
  6. </script>  
The entire body element looks like this:
  1. <script type="text/javascript">  
  2.    $(window).load(function () {  
  3.       //In the div element we want the Width and Height of the image to be displayed  
  4.       $("#myDiv").html("Width = " + $("#Batman").width() +  
  5.       "  
  6.        <br/>" + "Height = " + $("#Batman").height())  
  7.    });  
  8.   
  9. </script>  
  10. <div id="myDiv"></div>  
  11. <img src="Images/batman.jpg" alt="Batman" id="Batman" />  
Run the application.

Run

Now let's see what will happen if try to do the same thing using the ready function. 
  1. <script>  
  2.    $(document).ready(function () {  
  3.       $("#myDiv").html("Width = " + $("#Batman").width() + "<br/>" +  
  4.       "Height = " + $("#Batman").height());  
  5. });  
Run the application.

Run the application

The height and width of the image is 0 because the ready function never waits for an image to be fully loaded before being raised or fired.

In the next article we will explain the various types of element selectors we have in jQuery.

I hope you like this. Thank you.


Similar Articles