What is jQuery?
“jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released in January 2006 at BarCamp NYC by John Resig.” – Wikipedia 2009
Now that we’ve got that out of the way, the most plain speaking way to describe jQuery is that it’s a layer that sits on top of JavaScript and HTML, enabling you as a developer to easily code manipulations in your web page, such as doing something on a click event, or making elements in your page animate or change colour. jQuery is obviously more than this, but in a nutshell it’s aim is to make your life easier by giving you great flexibility whilst writing minimal lines of code.
A great example of it’s simplicity is it’s animation functionality. jQuery has an “animate” function which you give some parameters such as CSS properties, and a speed of execution. jQuery takes what would be a large chunk of javascript code and puts it into a one liner, such as:
$("myElement").animate({"height": "80px"}, 1500);
The above example would take an HTML element on your page, such as a DIV element called “myElement” and animating it’s height to 80 pixels. The “1500″ quoted at the end is the time it takes to execute that animation, so in this case, 1500 milliseconds.
How to use jQuery?
jQuery source code comes prebuilt, you simply need to reference it in your HTML file to utilize it. The simplest way to do this is to download the latest version from jquery.com here. Grab the minified version.
Next step is to place the jQuery source code file somewhere where you can reference it. Again, for simplicity – store it in the same folder as the HTML file you want to use it in. Now all that is left is to reference it in your HTML file:
<html> <head> <title>My Page</title> <script src="jquery-1.3.2.min.js"></script> </head> <body> </body> </html>
That’s it!
jQuery code structure
The majority of jQuery code looks like this:
$(".class").function({Options}, callbackFunction(){ // do something; });
$
The $ sign simply tells the the javascript engine to run the following code as jQuery code, and not pure javascript. You can also use $jquery as well.
(“.class”)
This is where you tell jQuery which DOM element you want to interact with, this can be:
- an #element which relates to an element in your HTML with an id attribute
- a .class which relates to a number of elements in your HTML with a class attribute
There are more that can be found here.
function({Options})
So this part is replaced with the relevant function you wish to call on your element or elements, such as click() or animate(). There are a ton of functions available. Most functions have options too which you can set to your liking.
callbackFunction()
So this is where you can place some code to run once the initial function has finished. For example, if you set an element to animate, the callback function will be called once that animation completes.
