Introduction to JQuery


I’m on my vacation in Taiwan right now, it’s been very relaxing and I’m enjoying some of the most beautiful scenery I’ve ever seen. As usual, I always try to bring some reading material on my vacations to maximize spare time like traveling between areas, plane, or just idle time. This time round, I’ve  decided to explore the world of JQuery, a lightweight client side scripting library. I’ve heard very good things about JQuery and became especially excited when I learnt that Microsoft will be shipping JQuery in future versions of Visual Studio. As a consultant that works primarily with Microsoft technology, it’s a joy to see that MS is adopting Open Source, and I feel that JQuery will be able to fill the missing gap in MS’s lack of tools/API for client side scripting.

After just skimming the surface, I’m already impressed by JQuery’s power and cleaniness. If anyone has even written Javascript, you will agree that it is painful to write, especially when you attempt to write short, understandable and browser-compatible code.  With JQuery we can now write unobstrusive Javascript.

What are the most common things we do in Javascript? We generally always need to “select” DOM elements, and apply effects to them, be it adding a CSS class, manipulating their visiblity, opacity, etc. Using normal Javascript to do fancy stuff becomes much harder and just outright tiring. JQuery provides an extensive API that encapsulates the boring bits, and allows us to easily find DOM elements via patterns, tags or ids; easily add effects with it’s extensive utility functions and also allows programmers to extend JQuery infinitely.

To reference JQuery in your web pages, you just need to download the the library (which is a very lightweight JS file), and add a reference to it in your header, like so.

<html>
    <head>
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    </head>
</html>

Here are some simple examples  of how to select DOM elements using JQuery. The identifier for JQuery is defined by the $ alias.

$("a[href$=pdf]");

This example selects all hyperlinks to pdf files. The ‘$=‘ is similar to Regular Expressions, which is analogous to an “ends with”. So we are looking for href that ends with “pdf”.

$("body > div:has(a)");

This example selects only direct <div> children under the <body> tag.

$(#myButton").click(function() {
    alert("myButton was clicked.") });

This example demonstrates JQuery events. It looks for a DOM element with the Id of “myButton” (ids are specified using #), and attaches an event handler to it, displaying a javascript pop-up message.

$("#someId").fadeOut().addClass("someStyle");

This example  requires a special mention, because it demonstrates one of the powerful features of JQuery, which is known as chaining  of commands. fadeOut() is a JQuery command that triggers a fadeout animation (part of the JQuery API) and adds a Css Class called “someStyle” to a DOM element with Id of  “someId“. You can chain commands infinitely, although there’s no real good reason to do that. However when used appropriately, you can create cleaner but yet understandable code.

The last thing that’s worth mentioning is how to extend JQuery. In my opinion, it is pretty similar to C# 3.0 extension methods, and the next example will illustrate this. We will be defining a functi0n that will disable a DOM element if it can be disabled.

$.fn.disable = function() {
    return this.each(function() {
        if (typeof this.disabled != "undefined") this.disabled = true;
    });
}

$("form#myForm").disable();

The $.fn.methodname is the syntax for extending JQuery. The example check if the DOM element has a disabled method, and disables it if it does have one. Looking at the last line, when executed, we will select a form element with the Id of “myForm” and execute the disable() method on it. This is pretty powerful stuff!

If you have noticed, JQuery language might be somewhat familiar. That’s because it makes use of CSS Selectors and Regular Expressions, so this helps developers who are already familiar with them to pick up JQuery much quicker. As a developer, I’m excited that we can now write cleaner and obstrusive Javascript with ease. When I learn more about JQuery, I will post my findings at a later date. Til then, happy coding!

Share this post :
About these ads

2 Responses to “Introduction to JQuery”

  1. JQuery: Animated Collapsable List « Code Blitz Says:

    [...] this is too confusing, might help if you look at my Introduction to JQuery, or have a look at the JQuery site documentation and [...]

  2. JQuery: Animated Collapsible List « Code Blitz Says:

    [...] this is too confusing, might help if you look at my Introduction to JQuery, or have a look at the JQuery site documentation and [...]


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

Follow

Get every new post delivered to your Inbox.

Join 97 other followers

%d bloggers like this: