jQuery - you can't help hearing about it, but it can seem a bit mysterious. jQuery experts seem to just write compact impenetrable code and even seeing what it is supposed to be doing can be tough. What is jQuery and how do you use it?

There is a later version of this chapter covering jQuery 3.

Getting Started With jQuery - The DOM

This is the first part of a close look at what jQuery is all about.

Chapter List 

1. The DOM
2. CSS Selectors
3. Filters
   
4. Advanced Filters
   
5. Manipulating The DOM
6. Promises & Deferred
   
7. Promises, Deferred & WebWorkers
   
8. Ajax the Basics - get
9. Ajax the Basic -  post
10. Ajax - Advanced Ajax To The Server 
11. Ajax - Advanced Ajax To The Client
12. Ajax - Advanced Ajax Transports And JSONP
13. Ajax - Advanced Ajax The jsXHR Object
14. Ajax - Advanced Ajax Character Coding And Encoding
15. jQuery - Easy Plugins
16. jQuery UI
17. jQuery UI Custom Control - Widget Factory
18. Getting Started With QUnit Testing

jQuery is perhaps poorly named. Many beginners tend to think that it has something to do with database or SQL - it doesn't. However, its name isn't that silly when you find out what the core of jQuery actually does.

jQuery is a JavaScript library that allows you to work with the DOM - the Document Object Model - in a browser independent and efficient way. It also brings with it some other useful facilities - event handling, Ajax and some UI features and you might consider any of these the top feature and reason to use it depending on what you are actually trying to do. However in terms of range of functions available it is the DOM that is central to jQuery and it is how jQuery lets you work with a typical web page.

First a quick look at the DOM.

DOM Basics

From the point of view of a JavaScript programmer the User Interface UI is created by HTML. When HTML was first invented there was no intention for it to be the UI for a programming language and so a connection between the elements that make up a page and the code had to be engineered - the result was the DOM.

JavaScript is an object oriented language and if you are using it correctly you will be creating lots of objects to get the work done. The UI created by the HTML was grafted on to the JavaScript object system by the DOM. Each element on the page corresponds to a DOM object - i.e. a <Button> tag generates a Button object in the DOM. If you want to work with the button in JavaScript then you have to get the DOM object that represents it and work with its properties and methods to modify it.

Now you can do all of this without jQuery, but exactly how things work varies according to the browser that the JavaScript is running in. You can write code that irons out the differences, but jQuery does it for you and provides much more sophisticated facilities.

As the tags or elements on the page are nested one inside another the DOM naturally has a tree-like structure and often trying to find a DOM object is a matter of moving through the tree from one object to another. jQuery makes this easy.  Often, however, the real solution is to make the UI objects easier to find by modifying the HTML in the first place. Don't get carried away by what jQuery can do when there are simpler solutions.

Simple Selectors - tag name, id and class

Beginners often get confused about id an class.

The key idea is that on a page the id identifies an element uniquely, but a class can consist of multiple elements.

For example:

<div id="div1" class="bigdivs"></div>

creates a div with id div1 and class bigdiv. Only one element on the page can have the id div1, but any number can belong to the class bigdiv.

One use of these attributes is as part of a CSS definition of what the element should look like. You can apply a set of properties to an element by picking it out by type, id or class in a style sheet.

For example:

.bigdivs {
 background-color: black
}

sets all of the elements that are a member of the bigdivs class to a black background color.

Also:

#div1 {
 background-color: black
}

selects the single element with id set to div1 and sets its background to black.

And:

div {
 background-color: black
}

sets all div tags to black backgrounds.

It really is this simple and you can deal with 90% of all situations just using these three selectors.

• name  all tags like <name>
• #name the singe tag with id="name"
• .name all tags with class="name"

There are, of course much more complicated forms of selector,  and we will look at these in later articles but for now - let's keep things simple.

Basic jQuery

So what do CSS selectors have to do with jQuery?

The simple answer is that to pick out a DOM object using jQuery you use CSS selectors - plus some additions.

First, however, we need to get jQuery into our project.

There are a number of ways to do this. You can download it from the jQuery site and load it into the page from your web server. Alternatively you can use a content delivery network (CDN) to supply it from its server. Google, for example, does the job very well for no cost. So the easiest way to try jQuery out is to add the line:

<script src="https://ajax.googleapis.com
    /ajax/libs/jquery/1.8.2/jquery.min.js"    
 type="text/javascript">

You can use other CDN services and other versions of jQuery. In general use the most recent.

Now you have jQuery loaded into the page we can try it out. 

A very basic use of jQuery is to retrieve a DOM object corresponding to a particular element.

For example, to pick out the div with id set to div1 you would use:

var divs = jQuery('#div1');

This returns a jQuery object which "wraps" the DOM object that represents the div.

What does "wrap" mean?

jQuery adds a set of methods and properties to the basic DOM object that makes it easier to use. However before we explain this in more detail it is worth revealing one more important fact about the jQuery object.

Suppose you write:

var divs=jQuery("div");

In this case the selector matches the tag type, i.e. the div, and so you would expect it to match multiple elements, i.e. all the divs on the page.

What is returned in this case?

The answer is that jQuery always returns an array of the DOM objects it has found - even if you use an id selector which can only return a single object.

• That is jQuery always returns an array of DOM objects wrapped in a jQuery object.

One of the standard jQuery properties is length which tells you how many objects have been returned.

So:

var divs = jQuery('#div1');
alert(divs.length);

will always display 1 because there can only be one element with the id div1.

The bit problem with returning an array of DOM objects is that you are going to have to specify array indexes in operations.

The trick is that jQuery assumes that most of the time if you have picked out a set of DOM objects then what ever you want to do you want to do to all of them or possibly just the first element.  So for example, the jQuery text method will obtain the text from each DOM object and form a single string by concatenating it. On the other hand he val method will get the value for the first element in the array. 

In most cases the "do it to all" or the "do it to the first" approach is natural and corresponds to what you want to do. It also means that often the most difficult part of using jQuery is to discover how to specify just one element or and exact set of elements you want to work with.

So to summarize:

• jQuery returns an array of all of the DOM objects that match the selector you specify.
• The array of DOM objects is wrapped by a jQuery object complete with additional methods to let you work with the array of objects
• Most jQuery methods either operate on all of the DOM objects in the array or just the first DOM object.