I spent last weekend outdoors painting the outside of the building my apartment it’s in. It’s a big building, and the painting work seems to be a never-ending job. In order to motivate myself for the monkey work, I synced my iPod with the latest episodes of Dot Net rocks before I went outside.

I turned on the episode about the Java Script library jQuery with Rick Strahl. There been some fuzz in the blogsphere lately about jQuery (Fredrik Karlseth, Rick Strahl), fuzz I haven’t had time to catch up on before now. During the podcast I got more and more excited about this library. After I was done listening to the podcast, I immediately ran inside and sat down in front of my computer, downloaded jQuery and opened Visual Studio and created an empty web project. After a few minutes I had created the jQuery hello world, and I literally took my breath away, I was amazed. Let me do you a favor and introduce you to jQuery! - By the way I totally forgot to paint the rest of the day!

So what is jQuery?

Let me give you the elevator speech to get you up to speed. Java Script is quite easy to learn and use in small scale, but developing large and complex applications in this language and environment is hard. Therefore many developers tends to give the server alone the responsibility to rendering the HTML, and they use server side components like the ASP.NET Ajax Framework when they want to get fancy with AJAX functionality, but they rarely touch Java Script themselves. Why? As I said, complex applications in this language and environment are hard!

So what is jQuery? You probably heard of LINQ or SQL? Both of those are languages for performing dataset operations like selection, grouping, filtering etc. LINQ does it inside the .NET platform on CLR objects and SQL inside databases. I consider both of these to be so called DSLs (Domain Specific Language) which ease the work of dataset manipulation. I like to think of jQuery as a DSL to, not for datasets, but for manipulating the DOM (Document Object Model) inside the browser. It’s built on top of the Java Script language, and it provides you with some smart syntax and expressions to query the DOM. For instance, say you want to select all the link (a) tags in the webpage and assign a specific click event handler to them. You don’t need for-loops and the getElementById function anymore; you just write an expression to “select” all the link tags in the document, and voila you will get the instances to those objects.

Not only is it easy to manipulate the DOM, but it also has built in support for AJAX. You can actually do an AJAX call in one line of code and partial render the result into div object. Like a coworker of mine would have said; it is the icing on the cake. Not only is AJAX easy to program, but you don’t need to think about cross browser issues when using the XmlHttpRequest ActiveX component; the library will handle it for you.

Programming jQuery

Let’s get our hands dirty and do some programming. Let us start with setting up jQuery. Download the Java Script library from the jQuery webpage. The next step is to create HTML file and add a reference to the Java Script file in the header of the page.

Demo 1: Query the DOM (Document Object Model)

In this demo I will show you an example of how to write a simple expression (query) that contains a filtering option. We want to select all the objects in the DOM of type link (a tag) and filter out the links that contains an anchor. An anchor is a link that points to a resource within the HTML document (<a href=”#section”>anchor</a>). The last step in the demo is to override the click event handler by assigning it with a new callback function (line 10).

This samples was a very basic hello world, but hopefully I unveiled the power you get from this library to manipulate the DOM. If your minds start spinning then check out the API documentation, which will give you a great overview of what’s possible.

Demo 2: Ajax

Let’s begin with the form post scenario. Where I override the default submit functionality on the form object in order to avoid the post back to happen in the browser and last but not least do the post asynchronously (AJAX). This will avoid the page to flicker and reload itself.

The post-verb in the HTTP protocol will in most cases enter some data into a web application. Therefore you probably also want to do some partial rendering (update a particular area of the webpage) in order to get the latest data after the post is submitted. The code in the pictures below illustrates this in line 12.

Can I combine jQuery with other technologies?

Yes, of course you can, but you have to redistribute the Java Script file with your application/web application. A technology I’ve been playing a bit with lately is the ASP.NET MVC (Model View Controller) Framework, and jQuery and this Framework is the perfect couple, but that’s another post. I also speculate on the possibility to use it when developing Windows Vista Sidebar Gadgets or Mac OS Widgets.

Where do I start?

The jQuery project has a very good webpage with tons of tutorials and demos. I recommend you to start there. I hope this inspired you to check it out, because jQuery is a library that can do the heavy lifting Java Script in your Web 2.0 applications!