jquery logo

jQuery Tutorial

jQuery Tutorial


Welcome to the exciting world of jQuery. If you're considering adding dynamic features to your website, you have come to the right place; jQuery offers many solution for implementing features that will enhance your site and/or make it look modern. jQuery is a client side script based on Javascript, and may be implemented on any site through the use of downloadable pre-written plugins or your own code. This site will demonstrate a few things you can do with jQuery, along with step-by-step guides on how to use these features.

Before You Start...

Unfortunately, browsers currently do not "know" how to execute jQuery. Because of this, a jQuery plug-in (written in JavaScript) is required before you can use jQuery on your site. There should be a link to a jQuery file on each page on which you wish to use jQuery features.

This can be done in one of two ways: an external link to a remote jQuery file or download and provide a relative link to it within your own site. Regardless of the method you choose, this link should be placed before your custom scripts. A good spot to place the script is near the bottom of your source code page just before the closing body tag.

Go to the jQuery Homepage or Google Hosted Library and download the jQuery file ("jquery.min.js" or similar) and place in your scripts folder. Alternatively, you may wish to use a link to an external file:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

If using the downloaded version, place file in the "scripts" folder in root directory (the directory in which the index.html page is located) and provide a relative link.

   <script src="scripts/jquery.min.js"></script>

Now onto the tutorials:

Image Source: Zazzle