These past few years of Web 2.0, more and more web developers have been coming up with some amazing designs on their websites. From animated menus to sleek looking image galleries and slideshows, web developers have found various tools to improve the look and feel of a website. At first glance some of these improvements may look like they were designed using Flash, but look into the code and you'll find out that they were animated using jQuery. Web developers have started using jQuery due to its simplicity and ease of use. It is a new type of JavaScript library that makes animating and event handling easier and faster. Unlike Flash designs, jQuery uses less code thus requiring fewer files. Some plugins or widgets you find on the web that you can incorporate into your website use jQuery, and if you know how to use jQuery, you'll be able to customize some of these widgets. We'll take a look at how to use jQuery and how it can improve your website design.
1. Learn jQuery. There are dozens of tutorials on the web that will help you learn jQuery and have you running the codes or events on your website within a few hours. You can also learn by example. There are examples online, like image galleries or slideshows that you can download and study for the source code. There are books you can find that have projects for you to do so you will learn how to create your own designs with jQuery.
2. Download the jQuery JavaScript library. You have to download the jQuery javascript library onto your website. There are several ways to do this; one is to download it from the jQuery site, in the <head> and </head> tags you'll put this code as the source:
<script src="javascript/jquery-1.3.2.min.js" type="text/javascript"></script>
Or you can download from the Google server:
<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.3.1');
</script>
Since there are always updates in the library, this third way can save you the trouble of updating.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
3. Learn to use jQuery in CSS. Learn how jQuery relates to CSS, because this is where you will control the events that create the effects on your website. It will enable CSS to create events like animate tabs, or resize images. Learn how adding or removing a class or id will affect the design on the website. There are events in CSS for example like the mouse hover, or when the cursor is placed on a tab or image that is clickable, or an event will happen if you click the image or tab, and these are the events that jQuery can add on and enable CSS to expand its functions.
Web designers can benefit a lot from using jQuery, and due to its simple coding you can do a lot with a lot less coding. The website will load faster than a flash site because it is lightweight. jQuery will enable you to improve your website's interface in so many ways.
Delicious
Digg
Google
Yahoo
