The JQuery object is a wonderful example of just how sophisticated JavaScript can be. It is worth knowing how to use it and how it works.

This is an extract from my book Just jQuery The Core UI.

 Available as a Book:

buy from Amazon

1. Understanding jQuery
2. Basic jQuery CSS Selectors
      Extract: The DOM
3. More Selectors
      Extract: Basic Selectors
4. The JQuery Object
5. Filters 
6. DOM Traversal Filters 
7. Modifying DOM Objects
      Extract: Modifying The DOM 
8. Creating Objects & Modifying The DOM Hierarchy
   
9. Working With Data
      Extract: Data ***NEW!!!
10. Forms 
11. Function Queues
12. Animation 
13. jQuery UI
14. jQuery UI Custom Control
15. Easy Plugins 
16. Testing With QUnit
17. Epilog A Bonus Function

Also Available:

buy from Amazon

The way that jQuery is implemented is very clever and very JavaScript. It is worth understanding the jQuery object at a deeper level, partly because then you will know how best to use jQuery and what can go wrong. Even more important is that jQuery provides an example of how to use JavaScript properly. It is a technique worth using in your own programs.

Before diving into jQuery it will help to go over some standard, but often overlooked, JavaScript features.

The Function Object

One of the key features of JavaScript that makes it very different from other programming languages is that “functions are first class objects”.

This is often quoted but what does it mean?

In JavaScript an object has properties, some of which can be functions, and roughly speaking everything in JavaScript is an object including functions.

Normally you define a function using something like:

myFunction(){ 
 statements
}

but this is a form of expression introduced to make JavaScript look like other languages.

You can also define a function using:

var myFunction= new Function(statements);

or just:

var myFunction=function(){
 statements
}

These two forms emphasize that a function is just an instance of a Function object. What this means in practice is that a function can have properties.

For example:

var sum=function(a,b){
 return a+b;
}

defines a simple function to add two numbers together. You can, however, add to it any number of properties you like.

For example:

sum.bias=100;
sum.author=”Programmer Smith”;

introduces two new properties, bias and author, to the sum Function object. These can be accessed in the usual way:

var result=sum.bias+100;
alert(sum.author);

Notice that when we are accessing a property you just use the variable:

sum.author;

but when you want to call the function you use parentheses:

sum()

It is helpful to think of () as the function evaluation operator. That is, when you write:

object();

it means evaluate the function represented by object. Of course, if object isn’t a Function this doesn’t work. You can include arguments to be passed to the function within the evaluation operator.

As well having simple properties, a Function object can also have properties which are Function objects – and this is the most confusing part of all.

For example:

sum.diff=function(a,b){
  return a-b;
} 

Now the sum Function has a property, diff, that is a Function object in its own right. You can call this function in the usual way:

sum.diff(4,2);

So now we can call sum or sum.diff. In other languages sum.diff would be called a method of the sum object. What is different about JavaScript is that sum is also a Function in its own right.

To summarize:

• In JavaScript functions are instances of the Function object

• The function evaluation operation () can be applied to any Function object to evaluate it as a function object().

• Functions can themselves have properties and these can be Function objects.

• To evaluate a property that is a Function you simply use the evaluation operator object.property().