I already have the most basic concept of jQuery in my previous post, let’s try to do something easy. I would like to pop up an alert message box when this post or web page is open. You should always see this kind of message box when visiting some websites on the Internet.

Add the following line of codes to the registered ready event:

alert(“Hi! I am testing jQuery!”);

The web page now look like:

<html>
<head>                                                                  
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        jQuery("document").ready(function() {

                // Do something with jQuery
                alert("Hi! I am testing jQuery!");

        });
    </script>
</head>

<body>
    <h1>Learning jQuery</h1>
</body>
</html>

Save the file.

Let’s explain the code briefly:

1. We need to include a reference path to the jQuery library in order to use it.

<script type="text/javascript" src="jquery.js"></script>

In my example above, the jQuery library (jquery.js) is saved in the same directory.

2. jQuery call the function and run the codes when the DOM of the webpage is ready. This is called document.ready event. Remember that jQuery DON’T need to wait the webpage to download to execute the function.

<script type="text/javascript">

        jQuery("document").ready(function() {

                // Do something with jQuery
                // Codes here.....

        });
    </script>

Therefore the structure of a typical jQuery enabled webpage is:

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        jQuery("document").ready(function() {

                // Do something with jQuery
                // Codes here.....

        });
    </script>
</head>

<body>
    Webpage contents here.....
</body>
</html>

Download Basic jQuery Webpage Template
To start writing jQuery codes fast, easy and convenient, you may download the basic jQuery webpage template.
Click here to download Basic jQuery Enabled Webpage Template.

Okay! Let’s get back to the example.

When you open the web page or this post, you should see a message box pop up like below:

jQuery Example File:

Click here to download.

Please mouse right click the above link, then select “Save link as…” to download the example source file.

So we wrote the first jQuery code. jQuery is easy to learn. Isn’t it?