Basics of jQuery: Part 1

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.


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

Run the application and click the button.



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!" />
   3. <script type="text/javascript" lang="ja">
   4. jQuery("#jQueryBtn").click(function () {
   5. alert("Hello World");
   6. });
   7. </script>
   
   
   
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.

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.



Then the window load event will be fired.



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:



Write the following HTML to generate an image element.
Write the following JavaScript code to get the actual width and height.
The entire body element looks like this:
Run the application.



Now let's see what will happen if try to do the same thing using the ready function. 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.