Using jQuery To Enhance Your Websites
Written By: Frostedblue On: 18/02/2010Time(23:12:52)
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animation and Ajax for rapid web development. jQuery is designed to change the way that you write JavaScript. We at Frostedblue, have had the pleasure of using it for many months now and believe its the best Javascript platform to date.
Setting Up Your Page
This is a basic tutorial, designed to help you get started using jQuery. If you don't have a test page setup yet, start by creating a new HTML page with the following contents:
[Code]
<!doctype html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> </script> </head> <body> </body> </html> |
If you don't wish to download and store the javascript on your server or are unable to keep upto date with the latest version then you can use this other code which takes the JS file directly from Google Code's servers. We would recommend this approach (below), it makes things easier and cuts down on your server and bandwidth load.
[Code]
<!doctype html> <html> <head> <script src="http://www.google.com/jsapi"></script> <script> // Load jQuery google.load("jquery", "1"); </script> <script type="text/javascript"> </script> </head> <body> </body> </html> |
Remember, you can specify a version number by using this line instead: google.load("jquery", "1.4.2");
Using: google.load("jquery", "1"); will ensure you are upto date until version 2 is released.
Laying Out Your Code
The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this. jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event:
[Code]
$(document).ready(function(){ // Your code here }); |
Code Examples
For an interactive demonstration of the basics behind jQuery, please go here:
jQuery
Click Here For Link
For one of the most comprehensive collections of jQuery example, please go here:
Noupe
Click Here For Link
Plus a couple of my favorite sites for jQuery:
Web Designers Wall
Click Here For Link
jQuery For Designers
Click Here For Link
w3Schools jQuery
Click Here For Link
