JQuery: getting started

It’s official: I’m on vacations :,,) while I was enjoying the sun on the beach today (I did managed to get there in time after leaving work), I though that it would be a good idea to write about JQuery. Why is this a good idea? First, because my experiences with it have shown me that it’s really a great framework! Second, because my JS is a little rusty and needs some training. Finally, because this is my blog and I want to do this 🙂

So, without further ado, lets gets started, right? The first thing we’ll need is getting the necessary JS files. You can get the latest JQuery JS file from its homepage. Notice that there are several files for download. If you’re trying to understand the code, then you should download the development file. Don’t forget to use the production file when you deploy your apps.

Whenever you’re working with JQuery, you’ll end up using the JQuery wrapper object. The JQuery wrapper is a custom JS object which has several interesting properties/methods that makes working with the DOM a breeze. Since this is an intro post and I want to go back to the bar to enjoy a cool drink, I’ll wrap this post with a really simple example which will let me present some important features introduced by JQuery. The next snippet intercepts any click that is done over a button and shows an alert when that happens:

<input type="button"value="click me"id="bt" />  

<
script src="jquery-1.3.2.js" type="text/javascript"></script>
<
script type="text/javascript">
  jQuery(document).ready(
                 
function() {
                    $(
"#bt").click(
                             
function( evt ){
                                alert(
"hello JQuery");
                              })
                  });
</
script>
</
html>

This snippet shows several interesting things:…

the jQuery method returns a JS object with several interesting methods (more about this in future posts) and events. in this case, we’re passing an anonymous function that should be fired whenever the wrapped element(s) is(are) ready for being manipulated (in this case, the anonymous function will be load when the HTML document is loaded – notice that we’re wrapping the document instance).

The anonymous function uses the $ alias (it’s the same as calling jQuery) for getting a reference to the bt element (notice the use of the ID CSS selector). At this time, you should understand that the jQuery function (or its $ alias) return a reference  to the  JQuery wrapper object (not to an instance of the DOM,, though you can get it from this custom object if you wish). This object may contain one or more DOM references (we’ll see how in future posts), ie, you can create a JQuery object which wraps several HTML elements of your page. This is a powerful feature which will really lead to less code.

After getting a reference to the button, we end up creating a new anonymous function which will be executed when someone clicks the button. And that’s it. We’ve just written our first JQuery snippet. Things will get interesting in the next posts. Keep tuned.

Advertisements

~ by Luis Abreu on July 10, 2009.

3 Responses to “JQuery: getting started”

  1. I was looking for a “getting started” like that. Simple and easy.

    Boas férias!

  2. Thanks Rafael.

  3. Been playing arround with jQuery also., Really powerfull and cool stuff.

    I”ve been using also jquery.ui and also a cool layout component: http://layout.jquery-dev.net/ .

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

 
%d bloggers like this: