In this article, we will set up a basic HTML5 document that will create an alert box. An alert box pop up will popup when the visitor clicks on the words "Click here".  This demonstrates how to write code for something to happen after a click event using the .click() method.

Open your file from Tutorial-1 and rename it or open a blank page in a text editor such as Notepad++, and type in (or copy and paste) the following :

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8" />
    <title>jQuery Alert Box</title>
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    </script>
    <script type="text/javascript">
        // Place your code here
    </script>
    <style type="text/css">
        #hellobox {
            width: 150px;
            margin: 30px auto 0 auto;
            padding: 15px;
            background: #eee;
            cursor: pointer;
            text-align: center;
        }
    </style>
</head>
<body>
</body>
</html> 

Save the document as "tutorial-2.html" in a folder of your choice, say a folder called "jquery-tutorials". As you type in your code, save the document frequently.


jQuery ready event

In order for your web page to open in a logical manner, jQuery has what is called the "ready event" or the "$(document).ready" function. This line of code is right away making use of the DOM, or Document Object Model. With jQuery, the HTML element that is being targeted is placed in parentheses following a "$" sign. This is jQuery's way of telling the browser, look for this element.

The .ready is the jQuery code that tells the browser to wait until the document is finished loading to do the following function.

Place the following lines of code in between the <script>...</script> tags in the example.

<script type="text/javascript">
    $(document).ready(function() {
         // Place your code here
    });
</script>

Create an HTML element for jQuery to target

In this step we will create an element in the HTML and assign an id to it. This way we can target a very specific element on the page. Type the following lines between the <body>...</body> tags. What is between the <body>...</body> tags is what will appear on the web page.

<body>
    <p id="hellobox">Click here</p>
</body>


Target the HTML element with jQuery

We will now use jQuery to create a simple pop-up alert box when someone clicks on the element. With jQuery, you do not have to use an anchor tag <a> for clickable text. Any element can be "clicked" on. We did do some styling for this particular <p> tag so that it looks more like something to click on. 

In the example below, we are using the jQuery .click() function

<script type="text/javascript">
    $(document).ready(function() {

         $("#hellobox").click(function() {
            alert("Hello World!");
         });
    });
</script>


Open the document in a browser

In your browser address bar, type in the path to your HTML document. For example:

file:///C:/jquery-tutoials/tutorial-2.html

This should open up a web page with a grey box that reads "Click here". Click on the grey box and an alert box will pop up that reads "Hello World!". This will look a little bit different in different browsers as the alert box is styled by the browser.


Things to note about coding

With jQuery you must be very precise about the coding. If it is not perfect syntax, the JavaScript will break. This means that it creates errors and will not load at all. You must also be precise about targeting the correct element. Here is a list of things to watch out for with jQuery:

  • the correct number of opening and closing parentheses and curly brackets ({...}); If there is an opening parenthesis there must be a matching closing parenthesis, and so forth.
  • proper placement of semi-colons at the end of each line in the function
  • proper use of quotations - you can use singe or double quotes, but they must match for the initial one and the ending one

Learn to utilize Error Reporting

Browsers such as Firefox have plug-ins or extensions that include an error reporting panel for diagnosing problems with your scripting. For Firefox it is the Web Developer extension that has this feature. This is an extremely valuable tool that helps to target syntax errors and other problems with your script. It will save you many headaches and hours of frustration if you learn to use Error Reporting tools.