Submit Your Article
Home Articles News Tutorials Videos Add An Article
Topics: Design Photoshop Programming PHP CSS Java Database Web Development Javascript Ajax
– Close + Open

Find Out More About DevWebPro!

Sign up for the newsletter


» Terms & Conditions

Welcome to the New DevWebPro!

DevWebPro Includes:
  Hundreds Of Tutorials   Developer News
  Unique Gadget Videos   Tons of Topics to Discuss
  Expert Advice   We Will Publish Your Articles

Use jQuery Javascript library to make easy effects for your website

By: Kasted
Saturday, January 6th, 2007
Text: Decrease Font Size Increase Font Size | Print Print Article | Share: Delicious Digg StumbleUpon Post to Twitter Post to Facebook

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.

Topics: , , ,

About the Author:

Leave a Comment

DevWebPro is an iEntry Network ® publication - © 1998-2010 All Rights Reserved