JQuery Day 01

I have started a new project for Microsoft Colombia and the Secretary of Health that is at the same time a proof of concept of a migration of an application from VS2003 to VS2008 as well as the reconstruction of the application (refactoring) towards a Software + Services oriented model.

One of the deliverables of the project is a Web Site, so it seemed a good opportunity to start exploring JQuery, which I had seen around with the announcements of support in VS2008 and so on but I had never touched it.

The first thing is to make it work, Scott Guttrie explains that better in a post, so I created a Web Application, then a scripts folder, and in it I copied the file jquery-1.2.6.js and the file jquery-1.2.6-vsdoc.js, these two allow me to have JQuery and IntelliSense in Visual Studio, they can be downloaded from Here.

Then I included the JQuery file and the documentation file in the default.aspx like this:

<script src=”scripts/jquery-1.2.6.js” type=”text/javascript”></script>

<script src=”scripts/jquery-1.2.6-vsdoc.js” type=”text/javascript”></script>

If the documentation file is not included JQuery works, but I do not have intellisense.

Now, how does this work:

Traversing the DOM

var help = $(“#help”); //gets the element that is called help, it is like using document.getElementById only that it works in any browser.

var p = $(“p”); //gets all the elements of type <p>

var username = $(“input[name=’username’]”); //gets an element of type input called username

All the previous functions return an array (array), in fact, the function $(), known as the JQuery function always returns an array of 0 elements, 1 element or the number of elements it finds (and it is really an abbreviation of JQuery(“p”) ).

It is a recommended practice to name the variables with the dollar sign, so the last example should be something like this:

var $username = $(“input[name=’username’]”);

Being $username an array it has a set of methods that can be used to obtain its length, elements, etc (var form = $form.get(0); var form = $form. length)

Manipulating the DOM

Once I have the objects identified I can start to do something with them, some tips:

It is not necessary to create all the classes that are going to be used in the style sheet, they are only needed so that JQuery identifies them

An element can have several classes applied like this: <table class=”VisualTable PopulationTable”>…</table>, in this way I can separate the classes that the designers modify from the ones I use in JQuery to manipulate the objects.

Events

One of the important elements of JQuery are the events, these generally respond to user actions, but one that is always useful is the ready event of the document. Something like this:

$(document).ready(function{ myCodigo});

Which means that the code {MyCodigo} must be executed when the page is ready. Something interesting is the way the function to be executed is declared, very similar to an anonymous method and also with a JSON notation. However if for some reason one does not like this form of inline functions one can use this notation: %(document).ready(onLoaded); where onLoaded is a method previously defined in the script. (this can also be useful when various scripts are combined and one wants to invoke from an event a part of another script).

Many events receive functions as parameters, even a function in each parameter, for example:

$(“#partList .row”).hover

(

function()

{

$(this).addClass(“rowOver”);

},

function()

{

$(this).removeClass(“rowOver”);

}

)

It receives two functions, one for when entering the hover and another for when leaving. Here it may be interesting to note the $(this) which means a “pointer” to the element that is executing the event, something similar to $(document).

Juan Pelaez.

Software Architect.

Keywords: JQuery, Web Applications,

Published at www.juanpelaez.com/blog