Page 1 of 2
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?
This is the first part of a close look at what jQuery is all about.
- The DOM
- CSS Selectors
- Advanced Filters
- Manipulating The DOM
- Promises & Deferred
- Promises, Deferred & WebWorkers
- Ajax the Basics - get
- Ajax the Basic - post
- Ajax - Advanced Ajax To The Server
- Ajax - Advanced Ajax To The Client
- Ajax - Advanced Ajax Transports And JSONP
- Ajax - Advanced Ajax The jsXHR Object
- Ajax - Advanced Ajax Character Coding And Encoding
- jQuery - Easy Plugins
- jQuery UI
- jQuery UI Custom Control - Widget Factory
- 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.
First a quick look at the DOM.
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.
<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.
sets all of the elements that are a member of the bigdivs class to a black background color.
selects the single element with id set to div1 and sets its background to 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.
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:
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:
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.
var divs = jQuery('#div1');
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.