The way of jQuery

jQuery's philosophy differs from most other JavaScript frameworks that predated it. Understanding the design patterns it uses is key to writing readable and efficient code. We'll cover these patterns in the next sections.

Chaining

Most jQuery statements are of the following form: a selection followed by one or more actions. The way those actions are combined is called chaining and is one of the most elegant aspects of jQuery. A beginner using jQuery who wants to set the width of an element to 300 pixels and its height to 100 pixels would typically write something like:

$("#myElementId").width(300);
$("#myElementId").height(100);

With chaining, this would be written as:

$("#myElementId").width(300).height(100);

This has many advantages: the element is selected only once, and the resulting code is more compact and conveys the semantic meaning that what you want to achieve is really only one thing, which is to change the element size.

Functions that allow chaining don't only make it possible to group many calls on the same object, but also there are many ways to actually change on what object (or objects) the next function on the chain will operate. In these situations, it is typical to use indentation to convey the idea that you're not working on the same elements as the previous indentation level.

For example, the following chain first selects an element, then sets its background's color as red. It then changes the elements in the chain to the children of the previous element and changes their background-color attribute to yellow.

$("#myElementId").css("background-color", "red")
   .children().css("background-color", "yellow");

It's important that you always ask yourself how the current interactions with the previous and next element in the chain can be avoided for undesired behavior.

Polymorphism

jQuery has its own way to use polymorphism, and a given function can be called in a lot of different ways depending on how much information you want to give to it. Let's have a look at the .css() function. If called with a String data type as the only argument, this function will behave as a getter by returning the value of the CSS property you asked for.

For example, the following line retrieves the left-hand side position of a given element (assuming it's positioned absolutely):

var elementLeft = $("#myElementId").css("left");

However, if you pass a second argument, it will start to behave like a setter and set the value of the CSS property. The interesting thing is that the second argument can also be a function. In this situation, the function is expected to return the value that will be set to the CSS property.

The following code does just that and uses a function that will increase the left-hand side position of the element by one:

$("#myElementId").css("left", function(index, value){
   return parseInt(value)+1;
});

However; wait, there's more! If you pass just one element to the same function, but that element is an object literal, then it will be considered as holding a map of properties/values. This will allow you to change many CSS properties in one single call, like setting the left and top position to 100 pixels in the following example:

$("#myElementId").css({
   left: 100,
   top: 100
});

You can also use strings as the key and value of your object literal as it's done in JSON.

A very complete resource for finding about all the ways to call a function is the jQuery API website (http://api.jquery.com).

We will now focus on a few functions that are of interest for developing games.