Introduction

While I'm normally associated with Silverlight and WPF development, I do occasionally journey across the divide into developing more standard web based applications. For many years, I hand crafted JavaScript code and built up the usual library of browser checks, hacks and workarounds to try to develop websites that worked the same in Internet Explorer as they did in Firefox, Safari and the likes. About 18 months ago, I was introduced to the joys of jQuery and I haven't looked back when working with JavaScript.

"So Pete. Why do you like jQuery so much?" I hear you asking (you may not know you're asking, but you are). Well, according to the jQuery homepage:

"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript."

If that was all there was to jQuery, then I'd be impressed, but there's more. It is highly extensible, and there is a rich community infrastructure of developers creating plugins and extensions for all sorts of features. If you want to show a datepicker, no problem. Want to display a draggable item? No problem.

In this article, I'm going to take us on a whirlwind tour of jQuery and hopefully help you get a better understanding of what it is and how it can be used.

Getting Started

Obviously, we can't develop the code we want against jQuery if we haven't downloaded it. The latest version can be found here (I'm currently using version 1.4.4). There is a minified version of the library which you may consider using when you deploy the website because it has been heavily compressed, but I would recommend initially installing the uncompressed version so that you can step into it and get a better understanding of it when you are debugging.

Note: Don't look to use the packed version of the library. This is a compressed version which has to be uncompressed at the client side, which will add significant overhead to the load time.

Once it's downloaded, we need to copy it into our website and add references to it. I typically like to organise my folders to have a top level js folder in the website, with jQuery being deployed in a subdirectory of this. Assuming you want to follow this convention, you'd add a reference to jQuery into a website page using:

So, What Does This Do, and How Does it Work?

In this sample, we've added two buttons that are going to hide the span. One of the buttons animates the hide so that the span disappears (and then reappears when the element has completed the hide operation). The second button just hides the element, which is equivalent to setting its CSS display to none.

One thing that may surprise you here is that we don't have an onclick in either of the button definitions, yet if you click on the buttons in the web page, they do respond to the click event. How do they do that?

If we take a look at the header, we see a section that starts with $(document).ready(function() {. This section is really important, and it introduces us to our first bit of actual jQuery. The $ tag (which is an alias for jQuery) tells jQuery to act on the element inside the brackets. It effectively supersedes the getElementById and getElementsByTagName JavaScript methods. This means that we can use the same syntax to retrieve a tag as we can to retrieve an element by the id or class. Now, that's pretty cool in its own right, but it goes further.

A common thing we need to do is to wait for the webpage to complete loading before we can manipulate elements in the DOM (bear with me please, this is relevant and not fluff to pad out the article). Traditionally, this would have been coded using window.onload=function(){ /* Do something */}. jQuery provides a helpful ready method which waits for the document to complete loading:

$(document).ready(function() {

Once the page has finished loading, the DOM elements are in place for us to manipulate. Remember that we have two buttons that need click handlers allocating to them; jQuery provides a click event handler for us to hook into. As I stated before, the $ tag allows us to choose an element or group of elements. Here we're going to use this tag to find the elements that match the ids of the buttons, hook up to the event handlers we're interested in. In order to get an element based on the id, we use the pattern $("#<<elementname>>); if we want to get a set of elements based on their class, we use $(".<<elementname>>). The use of # and . to specify id and class should be familiar from CSS.

Note: The mechanism for selecting elements is known as a selector. The use of the tag name, the class selector and the id selector are only some of a more powerful set of selectors available to jQuery. We'll go into more detail later on.

In the ready function, we select the two buttons and attach the click event handler to them using the click function. This code is treated specially by jQuery which tracks the creation of events so that they are automatically removed for us, preventing leaks in IE due to the DOM not being able to automatically unload elements because there are references to events in their. Internally, jQuery uses attachEvent and detachEvent to manage the events. The following code is executed internally by jQuery to add the onclick functionality:

Finally, our click handlers actually have to do something. Again, we search for the element with the id of para1 using $("#para1") and we call the methods hide (and show in the case of the animateHide function). The parameters in the hide and show methods are optional, as we'll find that a lot of jQuery parameters are.

Beating the Carp out of textareas

Okay, that's enough of that example. It's time for us to write something a little bit more practical. In this example, we're going to write some code that limits the amount of text that we can enter in a multiline textbox (something that you can't do on the textarea alone).

In the ready event, we are hooking the textarea keyup and change methods to the same function (checkMaxLength). We do this so that the user cannot enter more than 20 characters, either by typing them in or attempting to paste beyond the limit. But wait, what is this strange $(this) element in the call to checkMaxLength? We need some way to let the checkMaxLength method know what element we are actually working on; $(this) gives us the element that is in context when this is evaluating. In a simple case like this, we could use $("#multiline") to achieve the same effect, but what happens if we want to append this check to all textareas? We couldn't use the id specifier, so we use $(this) to provide some context for the element.

Inside the method checkMaxLength, we retrieve the value of the textarea from the passed in element using the val() function, and depending on the results of the length test, we replace the text using the .text() method.

It Doesn't Just Support Dutch Football

You can't go anywhere in web development nowadays without hearing about AJAX. If the hype is to be believed, AJAX will turn an Austin Allegro of a site into a Ferarri 458. A responsive, leaping gazelle of a site, positively brimming with vim and vigour. This means, of course, that any serious web development library needs to support AJAX. Surprise, surprise, jQuery does support it, and it is as easy to use as the other elements of jQuery.

Let's pull together a quick sample, and see how it works. As we are not going to be writing any server side code for the purposes of this article, we need a source of data that we can query over the web. Fortunately, Twitter provides a handy API that we can query so we'll use that to get the latest posts and display them in a web page. This is a more complex example, but the building blocks are still the same, so we should have no problems with the new concepts in them.

As we can see, there's more going on here but it's still fairly straightforward. The core of the functionality is in the $.ajax method, so we'll break that down and see what's going on (there is a shortcut for calling a JSON method in jQuery called getJSON, but as the purpose of this part is dealing with AJAX in raw form, we aren't using it here).

We can see that the Ajax function (along with many other jQuery functions) uses key/value pairs to store details of the parameters. The first entry is the URL which we have set up beforehand to point to the Twitter status timeline for Chris Maunder. Next we state that we want to use JSON for the data we are receiving from the server. The value of this depends on the type of data we are going to receive, and could be a type such as HTML, XML, jsonp or script.

The interesting part of this function is the success section. Here we are creating a function that the API will callback into (big hint here, it's known as a callback function and we find lots of them scattered over jQuery). As we've done before, we are going to manipulate the underlying DOM elements in this function. The first thing we do in here is to remove previous tweets, ensuring that we don't get the same tweet in the list twice.

As you are probably aware, we can receive multiple tweets back from the server. This means that we need to iterate over the collection of tweets. Fortunately, jQuery provides a very handy set of methods for dealing with collection data, and we use the each function to iterate over the JSON. Inside this function, we extract the tweet text we are interested in, and append it into the item that belongs to the class tweets. The careful among us have noticed that the class has been used in two locations; by specifying that it's #result .tweets, we tell jQuery to append this information inside the tweets class that's contained in the div with the id result. This is part of the reason that jQuery is so powerful - by doing this, we've cut down on a lot of manual code that we'd have to write.

Note: To fill in the user information, we only need to use the first returned element because this data is the same for each post for this user.

There's an xhr parameter which allows us to specify how the XML Http Request object is created. There have been some memory leak issues in the past with AJAX calls in jQuery, and specifying this code overcomes the issues.

Obviously, using jQuery in a production environment would normally entail use of error handling and validation, but hopefully this gives you an idea of how to construct the basics of an AJAX application using jQuery.

Final Thoughts

So, there we go. A quick introduction to the power of jQuery, and a guide to just how easy it is to use it to create rich and powerful websites. I hope that you like it, and that it inspires you to see how you can push your sites forwards.

Share

About the Author

A developer for over 30 years, I've been lucky enough to write articles and applications for Code Project as well as the Intel Ultimate Coder - Going Perceptual challenge. I live in the North East of England with 2 wonderful daughters and a wonderful wife.

Even if you feel like the article doesn't add anything new to the JQuery discussion, no article that presents an idea in a clear concise manner and that follows the CodeProject formatting guidelines is deserving of anything less than a 3. I put it to you that your vote is unwarranted, and the article itself deserves more consideration that just a 1 (or even a 2).

".45 ACP - because shooting twice is just silly" - JSOP, 2010-----You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010-----"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997

I find it rather interesting that the highest rated users on this site see value in Pete's article, yet you, with no real reputation to speak of, thinks so little of it. If you know so much about the subject at hand, why don't *you* write an article? If it gets approved for publishing, we'll see what everyone thinks of it. And don't worry, nobody's going to play childish little revenge games - if it's good, everyone will say so.

".45 ACP - because shooting twice is just silly" - JSOP, 2010-----You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010-----"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997

I'm just too busy developing, I then have a very active life outside of work

I'll leave the publishing of articles to others....or maybe

I should add, I am thinking of publishing some articles over the summer (I'm to busy up mountains in my free time during the winter)
If I do it’ll be on my own site, not Code Project as I'm not that bothered about being voted up/down.
I suggest that the vast majority of posters on here are after votes of 5 for what ever reasons they have.
Publish to my own site, make my site SEO friendly and developers will find the articles with ease via google.

Few of the articles Google throws up are anything like as clear and informative as this.

The example you cite on west-wind.com includes code only meaningful to .Net developers yet fails to explain what the code means or why it's there, or indeed whether it's part of jQuery or not. A newcomer to jQuery with no prior knowledge of .Net would surely need to look elsewhere.

This article clearly states what is needed, and explains why and how it is used. It uses examples in the most basic HTML and JavaScript necessary.

This is the kind of article that I think newcomers find most helpful. If you're at a level where you want something deeply challenging or which deals with the latest cutting edge technology, just pass by articles marked 'beginners'.

First, do you think substring is good idea to limit the character length of TextArea ? For example : If someone wrote some text, then pastes some large text between or at the beginning of written text, now the exceeded text(written text or pasted text) will be trimmed off and that might make user crazy

Second, would you like to write these sort of articles for MooTools framework ?

To answer point 1 - this behaviour is consistent with the behaviour of the standard textbox, so it's in keeping with the behaviour they expect.

To answer point 2 - I've not used MooTools. I'm more than happy to look into it, but I wouldn't have the length of professional experience that I have with jQuery. Apart from that, thanks for the vote.

I'm not a stalker, I just know things. Oh by the way, you're out of milk.

To answer point 1 - this behaviour is consistent with the behaviour of the standard textbox, so it's in keeping with the behaviour they expect.

the users do not have much info about it...what I did was quite simple, do not let the user submit the text if they crossed the limit as well as keep them showing how many characters are allowed and change the color to red if they exceeded. Anyway, just a suggestion

Pete O'Hanlon wrote:

To answer point 2 - I've not used MooTools. I'm more than happy to look into it

well I like mootools, its very well structured and much better. The only problem is that its not popular like Opera.