Jquery (The easy path to Ajax goodness)


I bought another book yesterday, one I’ve been on the look out for, for a while now.

The book is entitled "Learning jQuery 1.3", and is published by "Packt Publishing" under ISBN 9781847196705. I’ve been using JQuery for some time now, but am by no means an expert in it, so this book will serve as a reference to sit alongside my other books on my already overcrowded desk. You can see it on Amazon Here (Learning jQuery 1.3)

So what is JQuery i hear you ask?

Put simply JQuery is a JavaScript/client side toolkit that helps you add dynamic actions, JavaScript events and much more to your web pages, and don’t be put off by it being JavaScript either. JQuery’s main motto is "Write Less, do More" and can be downloaded from The JQuery website along with many tutorials and plug-ins.

What makes JQuery so good is that it not only simplifies JavaScript usage in the browser, but it works with everything (Well at least everything I’ve tried it with anyway) this means, you can use it with PHP, ASP.NET, Plain html, Perl, Python, Ruby and a whole lot more.

Here’s a small sample of what you can do.

let’s assume we have the following html document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>jQuery test</title>
  <script src="jquery.js" type="text/javascript"></script>
  <style>
    .redtext{
      colour: red;
    }

    .boldtext{
      font-weight: bold;
    }

  </style>
</head>
<body>
  <h1 id="thetitle">This is a title</h1>
  <p id="theparagraph">this is a paragraph</p>
</body>

As you can see, there’s noting particularly special about the code, I’ve added a script line in to include the JQuery script, and I’ve defined a couple of inline styles, it’s all pretty standard stuff that can be typed as is or generated from any server side language you care to choose.

The first thing that JQuery makes easy, is the setting up and handling of events at page load, so any handlers you define will be activated as soon as everything is ready, and not before, to do this, add the following into the html above. Add it just after

</style>

but before

</head>
<script language="javascript">
  $(document).ready(function() {
    alert('Hello world');
  });
</script>

Refresh your page in the browser, and you should see that a message box pops up saying hello world.

The idea behind this start up routine however is to register handlers for any elements you might have in your html code. In the html above, after the closing

</p>

but before the closing

</body>

add an input button as follows:

<input type="button" id="#mybutton" value="Click me"/>

Now in the document ready function you added previously, remove the "alert" line and replace it with:

$('#mybutton').click(function() {
  alert("Somebody clicked me");});

Refresh your page, and click on the button, you should now see that the button pops up the message "Somebody clicked me" when it’s clicked, that was easy wasn’t it 🙂

If you try this across different browsers too, you’ll see that it works flawlessly in all of them. Of course we really are just scratching the tip of the iceberg here, in fact I would go so far as to say scratching the tip of the tip… for example, we can add/remove styles dynamically on the fly, in the click handler above replace the alert line with:

$('#thetitle').addClass("redtext");

and if all goes ok, you should see that the headline changes colour when you click on the button.

you can remove a class by using:

$('#thetitle').removeClass("redtext");

then changing the text to bold by:

$('#thetitle').addClass("boldtext");

The trick to getting the correct element is in the selector. If you notice ALL the important elements in the sample html have

id="..."

attributes. It’s this id that we use in the JQuery call, so you can see that

$('#thetitle')

references the element with

id="thetitle"

in it.

Again this is just the very basics, you can select by tag type, tag and attribute, value of data, contents of text and so much more. Let’s not forget also the Ajax functions, and the animation functions all of which I just don’t have time to write about here.

There’s a ton of tutorials and other reference material at the jQuery website, I encourage you to go there and take a look if you’re in the slightest bit interested in adding client side and rich web2.0 functionality into your web pages.

I never do a web project now without using it.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s