Enhancing Your Website with JQuery

Estimated Time To Read This: 2 – 3 minutes

More and more recently I’ve found that I’ve had to add Javascript functionality to my PHP based websites; from something simple like hiding/displaying sections of a webpage based on user input to adding in UI features like Datepickers, menus, tabs, etc to using Ajax to modify the contents of a page. While it’s possible to do all of this from scratch, it’s time consuming – and most of it has probably already been done by someone else. That’s where Javacript libraries come in – they allow you to easily perform the actions I’ve mentioned above, along with many others. There are several Javascript libraries out there (Prototype, scrip.aculo.us, etc), but I’ll talk about JQuery and JQuery UI in this article. I won’t go too in depth, but it should give you enough to get started.

Using JQuery is pretty simple – a simple command looks something like this:

$(“#content”).hide(“slow”);

This will take an element on your page (a div, table, etc) with an id of “content”, and make it slowly disappear. To make the same element appear, you would use something like:

$(“#content”).show(“slow”);

This allows you to do a lot with a very small amount of code. For example, if you wanted to apply a style that you created (let’s call it ‘blue’) to all links on the page, you could do it as follows:

$(“a”).addClass(“blue”);

These are only a couple of examples; there are a lot of things you can do with JQuery like getting the contents of an input field on a form, writing HTML code to the page, write AJAX commands, etc. As I said above, it’s nothing that you couldn’t build yourself in javascript. but the code is easier to write and easier to read.

Adding in JQueryUI makes things even more interesting. JQueryUI is an extension to JQuery that allows you to easily add in some standard widgets like Date Pickers, Progress bars and Autocomplete, and allows you to do some interesting effects like dragging items, making part of your webpage resizeable, etc. As with JQuery, the code is pretty simple. For example, to add a datepicker to an input field on a form is as simple as:

$( “#datepicker” ).datepicker();

As with JQuery itself, there’s a lot more that you can do with JQueryUI. To get started, and to read more about how to use both these libraries, you just need to go the websited (jquery.com for JQuery, and jqueryui.com for JQuery UI), and download the latest versions of each. Both sites offer fairly extensive demos and tutorials to get you started.