What is jQuery?

jQuery is a Javascript framework that basically helps you to do dynamic ‘client-side’ stuff to your website with ease. ‘Client-side’ means that everything happens on the user’s browser and doesn’t involve the server (forget AJAX at the moment!). So what does that mean in lay-person’s terms? It means that with a small knowledge of this amazing thing called ‘jQuery’ you can really lift the usability of your website and do things (like AJAX – which I’ll explain later) which you weren’t really able to do before because they were far too technical.

There are other Javascript frameworks available to use such as MooTools and ProtoType which are also amazing, but I am going to focus on jQuery in this article.

The first thing you’re going to want to do to get jQuery working on your website is include the main jQuery file on your web page. You can either download the jQuery library and install it on your webserver (so your link is relative), or you can link to it directly from the jQuery website. There are pros and cons to both, for example the plus side of using the direct link to jQuery from their website is you always get the latest version, but this can be a bad thing too because of compatibility. For the purposes of this tutorial we’re just going to link to the remotely hosted version.

Use this code below and place it in the header tags of your page.

Now the framework is loaded, let’s start using it to hide and show parts of a web page. Before I show you that, don’t forget to follow the jQuery lesson series to get more in-depth tutorials as this is just a very quick overview and guide to getting started.

You may see on a lot of websites these days, that things fade in and fade out when you click on links. This is Javascript doing its thing (and probably jQuery too). There are a lot more cool things you can do with jQuery, other than fading things in and out, but trust me – clients love this kind of thing and it will gain you lots of favor with those paying you to build their website. It’s also really simple to do effects like this so I’ll quickly show you something that hides and shows a form. So, I’ll assume you have a form inside a DIV tag and you want to show it when someone clicks on a button, instead of it going to a whole new page and taking a long time to load. I use this trick a lot on my websites.

With the code above, if you click on the link it will go to a new page as you would normally expect. What I am doing here is something called ‘progressive enhancement’ which basically means that if your user doesn’t have Javascript enabled they can still use the website. One major flaw to a lot of websites is they expect the user to have Javascript or Flash installed and running and don’t take in to account those that don’t have it. If the user doesn’t have Javascript and I wasn’t using this method they wouldn’t be able to use my website, and that wouldn’t really give them a very good user experience!

The div containing the form is hidden as you’ve noticed. So what we need to do now is put the jQuery magic in there to show the form, so below the code that is there you want to paste the following code:

Ok, I need to explain all of that! First of all the $(function(){tells us to only execute the code once the page is loaded. Then the next line $(’.showform’).click( tells the browser to listen for a mouse click over anything with a class of ’showform’, and then run the following function.

Before I explain the function I’ll just quickly mention that in this code I am passing ‘event’ through to the function. The event is normally taking the browser to the next page, but the whole point of this function is to load the form (which normally would have been in a different page) smoothly in to this page, without a page refresh. So the ‘event’ is passed to the function, and then event.preventDefault(); is called, which as you guessed prevents the default action of going to a new page. This is a really useful thing to know, and also serves as the ‘progressive enhancement’ that I mentioned earlier.

The last bit of the code is our function which basically makes your website cool! The fun part of jQuery is the fade ins and fade outs (in my personal opinion), and I use them often! So with this function the $(’#mydiv’).fadeIn(); just tells the browser to fade the div with the ID of mydiv in at it’s default speed (which you can change if you want to).

So copy and paste the script above in to your web page, and see what happens. You can do other cool things like have a toggle, instead of a one-way fade in using $(’#mydiv’).toggle(); or you could style the DIV so that it has a background image of a speech bubble (or something like that!), which would look quite cool.

I’m sure you get the idea, and it’s these little things that really can make a website more usable, but also a lot cooler.