Article Diary - General Knowledge Digest

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.

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.


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.



To show the form click here.



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:

$(function(){
$(’.showform’).click(function(event)){
event.preventDefault();
$(’#mydiv’).fadeIn();
});
});

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.

Source: http://woorkup.com/2009/11/22/jquery-for-beginners-making-your-website-cool/
Attached Files
There are no attachments for this article.
Comments
There are no comments for this article. Be the first to post a comment.
Name
Email
Security Code Security Code
Related Articles RSS Feed
Featured Items Widget with jQuery
Viewed 1086 times since Sun, Dec 27, 2009
How to password protect folder/files using htaccess file?
Viewed 797 times since Sun, Mar 14, 2010
dTree - Flexible JavaScript Tree Menu
Viewed 1252 times since Thu, Jan 14, 2010
What is Search Engine Optimization?
Viewed 1133 times since Fri, Jun 25, 2010
JavaScript Tree Menu Component - jsTree Menu
Viewed 1359 times since Sat, Jan 9, 2010
Use PHP Functions In JavaScript with PHP.JS Library
Viewed 770 times since Fri, Jan 8, 2010
Facebook Style Chat Script - ArrowChat
Viewed 881 times since Tue, Aug 3, 2010
How do I setup and use SSH?
Viewed 1239 times since Thu, Oct 15, 2009
jCart - Free PHP AJAX Shopping Cart
Viewed 1100 times since Sun, Jan 3, 2010
MENU