Getting Started with jQuery
Below is a quick tutorial to show you how to show and hide elements on your page. If you have a good understanding of how to target elements in an HTML page using CSS, you’ll be amazed at how easy jQuery is to use.
Why jQuery is so awesome
When I first started learning javascript I found it very complicated to understand, I’m a web designer, not a hard core programmer, so why should I need to know how to program complicated code just to add the simplest bit of functionality to a web page, especially after just spending so long mastering HTML and CSS… will it ever end?
jQuery is what I’ve always wanted javascript to be like, it simplifies javascript to the point where it makes sense to someone who knows HTML and CSS. I’m not saying you shouldn’t know how to program, I use PHP a lot and find it very easy to get around in, javascript on the other hand was created to interface with browser events and without something like jQuery (or another library), it just plain SUCKS because unlike PHP which runs on a reliable server environment, javascript runs in the browser, and different browsers (ie I’m talking to you) interperet your javascript differently.
To show you how it works, let’s put together a re-usable script that lets you hide and show items on the page. To see this script in action, click the links on our help page (this link will popup in a new window).
Don’t forget to include the library
Nothing will work if you don’t first include jQuery. The easiest and best way to do this is to link to it from Google’s servers. Google gives you free access to some of the major javascript libraries, they handle all the cache control and since so many users link to the files, most people’s browsers already have the file in their cache, so it’s the method to use as far as load time as well. Add this line to the head of your document:
|
1 |
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> |
You should probably also put your scripts (the jQuery we write) in an external javascript file that you link into the head of the document as well. On our site we call it global.js and it’s inside a directory called ‘includes’, so our include line would look like this:
|
1 |
<script type="text/JavaScript" src="/includes/global.js"></script> |
Make it unobtrusive
One of the things you want to do when you write any script is be sure your page still works without javascript running. Let’s start by writing the HTML you’d write if there was no jQuery on the page:
|
1 2 3 4 5 6 7 |
<h2 class="Toggle">Other jQuery resources for beginners</h2> <ul class="Hide"> <li><a href="http://docs.jquery.com/Main_Page">Official Documentation</a></li> <li><a href="http://visualjquery.com/">visual jQuery reference</a></li> </ul> |
That’s the basic code we’ll be using, if you view the source of the help page you’ll see another few classes in there which are specific to styling on this site, they’re not important for this example though (Remember, I’m assuming you know how to change the appearance of elements with CSS). The classes you should pay attention to are the ones we’re going to be using with jQuery, which are “Toggle” (which is on the headings) and “Hide” (which is on the ul’s).
Getting ready
Everything you do in jQuery is held inside a ‘document ready’ function which looks like this:
|
1 2 3 4 |
$(document).ready(function() { //your jQuery Code Goes Here }); |
It waits until the browser has loaded the DOM, meaning the browser is ready to manipulate the page. You don’t need to really understand too much about the code above for now, just notice where your jQuery code will go.
If you’re really a beginner at programming you might not recognize the comment above, in javascript you can make a comment (a note that’s not executed) with two slashes. Everything after the two slashes on the same line is considered a comment
|
1 |
//this is a comment in javascript |
What do we want to effect?
The $ function is used to grab an element (or elements) on the page. We already used it to grab the ‘document’ and wait until it’s ‘ready’. Once the document is ready if we then want to grab all the elements on the page that have the class of ‘Hide’, we’d do this:
|
1 2 3 4 |
$(document).ready(function() { $('.Hide'); }); |
Do something
Now that we have all the elements with the class of ‘Hide’ let’s hide them. To call the hide function we just seperate the function from the items we targeted with a period like this:
|
1 2 3 4 5 |
$(document).ready(function() { // hides stuff with the class of 'Hide' as soon as the DOM is ready $('.Hide').hide(); }); |
If you reload your page all the elements with the class of ‘Hide’ should be gone.
Make the headings look like links
To make the headings look clickable we’ll make them look like links by adding some CSS in our stylesheet. We’ll make a class called MakeLink:
|
1 2 3 |
.MakeLink { color: #06F !important; text-decoration: none; } .MakeLink:hover, .MakeLink:focus, .MakeLink:active { cursor: pointer; color: #C60; text-decoration: underline; } |
With just made the heading look blue and when you roll over it, it changes color, gets underlined, and the arrow pointer turns into the little hand which happens when you roll over links
We could just put class="MakeLink" in the HTML ourselves, but if we do this, when you disable javascript the headings will still look like links (but won’t act like them anymore). To fix this, we’re going to add the class of MakeLink to all elements that already have the class of Toggle
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function() { // hides stuff with the class of 'Hide' as soon as the DOM is ready $('.Hide').hide(); // add the class to make the headings look like links $('.Toggle').addClass('MakeLink'); }); |
Finally, add the ‘Toggle’ code
‘Toggle’ makes the hidden text re-appear and disappear again.
Again we get everything with the class of ‘Toggle’ and when it’s clicked we run a function that takes the current class
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(document).ready(function() { // hides stuff with the class of 'Hide' as soon as the DOM is ready $('.Hide').hide(); // add the class to make the headings look like links $('.Toggle').addClass('MakeLink'); // toggles the Hidden content upon clicking the link $('.Toggle').click(function() { $(this).next().slideToggle('normal'); }); }); |
The this keyword when inside a function looks at whatever we already grabbed (in this case, everything with the class of Toggle) and then we look to the next sibling with the next keyword and tell it to toggle.
The reason for taking this extra step and not just telling it to Toggle things with the class of toggle is that if we do it this way it doesn’t toggle everything with the class of ‘Toggle’ at once, just the one we’re clicking.
Did it work for you?
Feel free to drop us a line and let us know what wasn’t clear in this tutorial and we’ll try to help you out and improve the tutorial.