This beginners jQuery tutorial takes you through the basics for getting jQuery setup on your website. It’s very straightforward and aimed at those who aren’t over familiar with Javascript or jQuery
Step 1: Setting up the site
We will start with a basic empty web page. Open your preferred webpage editor (Dreamweaver, Notepad etc) and open a new HTML file. Your code should look like this:
<html> <head> </head> <body> </body> </html>
We will also need the jQuery library. The jQuery library contains all the Javascript commands that make jQuery work, and saves us the hassle of writing them ourselves. We could link to an online library, but for this tutorial we will download and setup our own local copy rather than rely on an external site.
Go to the jQuery site and under “Grab the latest version!” select the “minified” production version of the library and follow the link to download from the Google Code site. This is the compact version and is fine for most needs, the bigger development version is for developers who like to tinker with things.
Make a new folder called “scripts” in your site root and put the jquery.js file in there. We now need to reference the jQuery in the html so that the html knows where to look for the jquery.js file. Place the following code between the head tags of your page.
<script type="text/javascript" src="scripts/jquery.js"></script>
This line simply references the .js file
Step 2: Adding the code
Below the previous line type
<script type="text/javascript">
$(document).ready(function() {
});
</script>
This basically waits till the page is ready before doing whatever is between the curly brackets. So update it to read:
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
alert("Kino Creative says hello!");
});
});
</script>We now have a function that says when a link (defined by “a”) is clicked (click function) pop up a box (alert) with a message (Kino Creative says hello!).
Now all we need is to add a link to the page between the body tags:
<a href="">Link</a>
Clicking this link will activate the popup.
Step 3 See if it works!
Upload all the files to your web space and visit the page in your browser. Click the link and you should see this:
If you don’t then double check all the code and try again.