Use jQuery Javascript library to make easy effects for your website

jquery-logo.jpg

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 <head> and </head>)

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.

jquery-effect-diagram.jpg

If you would look to see an example page with jQuery Javascript Library, click here.

Leave a comment