, This is a basic tutorial, designed to help you get started using jQuery. A good place to start is by looking at common problems and the solution(s) that jQuery provides to them.
If you don't have a test page setup yet, I recommend that you create a new HTML page with the following contents, just to get started:
<html>
<head>
<script type="text/javascript"
src="link/to/jquery.js"></script>
<script type="text/javascript">
// Your code goes here
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
Edit the src attribute in the script tag to point to your copy of jquery.js. For example, if jquery.js is in the same directory as your HTML file, you can use:
<script type="text/javascript" src="jquery.js"></script>
Launching Code on Document Ready
The first thing that most Javascript programmers add to their program is code similar to this:
window.onload = function(){ ... }
To access elements inside the HTML document, the Document Object Model (DOM) must be loaded. When the window.onload function is executed, everything is loaded, including images and banner ads. This is too late because we don't want to wait for all the images to load.
For this matter, jQuery provides a "ready" event that you can use with this simple statement:
$(document).ready(function(){
// Your code here
});
This code checks the document and waits until its ready to be manipulated - which is just what we want. So take the above snippet and stick it into the script area on your test page.
Making Something Happen on Click
The first thing we're going to try is having something happen whenever a link is clicked. In the ready function, try adding the following:
$("a").click(function(){
alert("Thanks for visiting!");
});
Save your HTML file and reload the test page in your browser. Clicking the one link on the page should make the Alert pop-up, before leaving to go to the main jQuery page.
Adding a CSS Class
Another thing that is a common task is the addition (or removal) of css classes from elements, for example:
$("a").addClass("test");
or even:
$("a").removeClass("test");
if you were to add some style information into the header of your script, like this:
<style type="text/css">
a.test { font-weight: bold; }
</style>
and then added the above addClass call - all your anchor (a) elements would now be bold.
Special Effects
The Effects Module provides a couple of handy special effects. To put these to the test, change the click that you added earlier to this:
$("a").click(function(){
$(this).hide("slow");
return false;
});
Now, if you click the links, it should make the link slowly disappear. By adding "return false", you prevent the default behaviour, therefore the browser doesn't follow the link.
Working With Callbacks
A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. The special thing about a callback is that functions that appear after the "parent" can execute before the callback executes.
Another important thing to know is how to properly pass the callback. This is where I have often forgotten the proper syntax.
For a callback with no arguments you pass it like this:
$.get('myhtmlpage.html', myCallBack);
Notice that the second parameter here is simply the function name (but not as a string and without parentheses).
What do you do if you have arguments that you want to pass?
The Wrong Way (will not work!)
$.get('myhtmlpage.html', myCallBack(param1, param2));
The Right Way
$.get('myhtmlpage.html', function(){
myCallBack(param1, param2);
});
This is basically wrapping the execution of the callback function inside another function so that you can pass the parameters.
Next Steps
From here, you should probably begin looking at the rest of the Documentation, including more tutorials - it's very comprehensive and covers all aspects of jQuery. If you have any questions, please feel free to drop me an email or send a message to the mailing list.
Also, you'll probably want to check out the variety of demos that are available, using jQuery.