Use jQuery Javascript library to make easy effects for your website
If you're new here, you may want to subscribe to my RSS feed.
In this tutorial I will explain how to use the jQuery Library to make some easy effects for your webpage. jQuery is infamous for easily implementing it into your site, and for its usage of effects. I like jQuery for its ease of use over other Javascript library’s such as Prototype and moo.fx, lets get started.
First off we will be to sort of “install” jQuery on your page, don’t panic its simple. Make sure you download the latest build jQuery by clicking here. Once you have the file jquery-latest.js in the same folder as your html files, or in a separate folder for scripts, your gonna need the code to put it on your site, here it is.
You need to put that code in the head of your site(in between
and )Once you have that up, we’ll start with the syntax of jQuery, if you know anything about Javascript, you’ll notice that it has its own syntax, which makes it easier to use, and is great for simple solutions. Below is a sample of some jQuery code.
The code above does one obvious thing, it shows a DIV tag that has the class “hidden”. Yes it is that easy.
Below is a diagram I made up to show off a simple jQuery string and where everything is placed for it to work.
If you would look to see an example page with jQuery Javascript Library, click here.
(4 votes, average: 4.5 out of 5)
Loading ...
4 Comments
Karl Swedberg on January 6, 2007
Hi there,
I really like that diagram. Nice work!
One thing I should point out is that your example does not show “a DIV tag that has the ‘class‘ hidden.” Instead, it shows any DIV element that has been hidden (by use of CSS display:none or visibility:hidden). If you wanted to show a DIV with the class “hidden,” you would do this:
$(’div.hidden’).show(’slow’);
Also, since this is a “first look at jQuery” tutorial, it might be helpful to mention $(document).ready(function() {});
Congrats on the new site. It looks very promising. I’m looking forward to reading new entries as they’re posted.
–Karl
Karl Swedberg on January 6, 2007
Sorry for the double post, but I just noticed something else: It looks like WordPress may have munged up a couple tags that you tried to get into the entry:
“You need to put that code in the head of your site(in between and ).”
Try using character entities < and >. Sometimes WordPress can be a little too helpful.
cherries on January 11, 2007
jQuery is gross.
Use mootools instead.
admin on January 13, 2007
@Karl Swedberg:
Thanks for the tips, I’m still messing with Wordpress to get all the HTML, CSS, and JS code to show correctly, Will put that into consideration for my next tutorial, thanks a lot!