Web Development: Introduction to jQuery

Published on May 26, 2009   //  Development
Off

Web Development

jQuery the Javascript framework that we’ll be discussing over the next couple of articles. jQuery allows you to do cool things with Javascript easily and quickly. jQuery, just like Javascript, works on a document tree. You start with a reference to an element on the page, branch out into functions from there.

Let’s take a look at the basics. First of all, you need to download jQuery, and then load it into the head of your document:

[code language="html"]<script type="text/javascript" src="jquery.js"></script>[/code]

Change jquery.js to the name (and path) of the file you downloaded.

To reference an element in jQuery is simple. Say I wanted to select the element with the id of head. This would simply be done like this:

[code language="js"]$("#head")[/code]

You can use this method to reference anything in the document object model. For example, you can also reference the document in this manner ($(document)) or entire ranges of HTML tags ($(“a”).

Once you have an object referenced, you can use one of jQuery’s many build-in functions to do something with the object. We’ll be going more indepth on that in our next article.