In this article, we will set up a basic HTML5 document that provides the basic parameters for using jQuery. You can store this document in a folder of your choice on your own computer and use it for future tutorials.

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 Blank Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           // code will go in here
       });
    </script>
    <style type="text/css">

    </style>
</head>
<body>
</body>
</html> 

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

aa-three-dots

Linking to the jquery core library files

In this file we are linking to the external files in the Google library for the src="/".

You could also choose to fetch the latest jQuery library files and download them to your own computer. These files can be found at http://jquery.com/download/. Download the file and put it into a subfolder named js. In this case the line will read something like this:

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

Be sure to put the proper path and filename in this line.

aa-three-dots

The 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.

This is found in the following lines of code in between the <script>...</script> tags in the example.

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

aa-three-dots

Open the document in a browser

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

file:///C:/jquery-tutorials/jquery-blank.html

This should open up blank page. We have not put any code or content into this page as yet.

aa-three-dots

Save this page for other tutorials

tutorial-directoriesThis blank document can be opened and renamed with using "Save As" for future tutorials to save time and effort.

Within the folder named jquery-tutorials, you should also create new folders named, js, css and images. Future tutorials will be using other external .js files, stylesheets and images.