To complement the new jQuery lesson series I thought I’d just write an article on what exactly jQuery is, and how it can really help your website without you needing to know too much about Javascript coding or anything like that. After reading this article you can implement a few tricks that will make your website easier to use, and look “cool”. This article is intended for those who don’t really know much about jQuery and especially for those who sent us, in the past days, many requests about an introduction post about this framework.

For a printable reference guide to the jQuery API I suggest you to download this interesting jQuery Visual Cheat Sheet designed by Antonio Lupetti or take a look at the official jQuery documentation.

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.

Again like my previous article on CodeIgniter, I need to say that 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.

First Steps

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.

<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript">
</script>

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.

Doing the Cool Stuff

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.

<!--Start of container div, and form-->

<div id="mydiv" style="display:none;">
  <form id="myform" action="wherever.php" method="post">
    <input name="myinput" type="text" />
    <input type="submit" value="Submit" />
  </form>
</div>

<p>To show the form <a class="showform" href="/mylink.php">click here</a>.</p>

<!-- End of form and container div -->

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:

<script type="text/javascript">
$(function(){
  $('.showform').click(function(event)){
    event.preventDefault();
    $('#mydiv').fadeIn();
  });
});
</script>

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.

What Was That About AJAX?

Earlier I mentioned AJAX, I’m sure one of us will cover AJAX in more detail later but I’ll quickly just say that AJAX can really bring power to your website and with jQuery is really easy to learn. AJAX basically does things behind the scenes without you needing to know about it, so for example in the case of this tutorial we could put in that function an AJAX call which loads a bit of HTML that is on a completely different page on the website, instead of the code that is already there. It sounds complicated, but it is very useful and it can help you do things like post that form above and enter data to the server without you ever leaving the page. With jQuery AJAX is easy, but we’ll cover it later.

Don’t Go Crazy!

I see some websites that are ‘jQuery-Tastic’, in other words they have every possible type of jQuery function available. Because jQuery is so easy to learn and easy to implement it’s very tempting to do all sorts of things, like when you click on a button it fades in a new part of the web page at a really slow speed and then drops down a box which covers the old form and gets in the way etc. Please don’t go crazy and remember that although jQuery can make your website very cool, it also has the power to really put your users off. Your users are potentially your customers – so let’s give them a great user experience, and let jQuery help us!

I hope you found this little introduction helpful, and I’m looking forward to doing more advanced tutorials in the future, for example making a jQuery timer that has an animated clock and saves the time to a database every minute (ooh that does sound fun!).