Beginners jQuery Tutorial
by 18th January 2009|
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:
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.
Step 2: Adding the code
Below the previous line type
This basically waits till the page is ready before doing whatever is between the curly brackets. So update it to read:
alert("Kino Creative says hello!");
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:
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.