Spice up your web design with jquery basics

Want to make your website look flashy? Why not try your hand with some jquery. Try this.

Download jquery from: http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js and save this file.

Create an empty text file using notepad called "myjquery.js", and then insert

<script type="text/javascript" src="jquery-1.3.2.min.js"</script>

<script type="text/javascript" src="myjquery.js"></script>

in to a seperate html file's <head> section. The myjquery.js file must be in the same directory as the html file, and jquery file you downloaded.

In your html file, create a div with an id "test", and give it a blue background color. Enter some sample text. Now in your myjquery.js file, enter this and save:

$("#test").click(function() {

$("#test").fadeOut("slow");

});

You should have now have 3 files, a test html file, myjquery.js, and jquery-1.3.2.min.js. Open up the html ile in a browser, You will find that when you click on the div#test element, it will fade out slowly. This looks very nice right? The way this works is jquery(Javascript) controls the elements, allowing you to fadein, fadeout, move around, create sliding galleries, etc. This is a very basic example, but you could use this in your web design in many ways.

For more information, and tutorials, try: http://jquery.com/