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. This first chapter of our book on jQuery 3 sets up the foundation for understanding how to use jQuery and how it works.

 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 links in the above list will take you to material that hasn't yet been updated to jQuery 3. 

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.

That is JavaScript does not work with the HTML by editing the text that created the page in the first place. It could work in this way but it doesn't. What happens is that the HTML is rendered by the browser to create the UI for the user to interact with and a set of JavaScript objects, the DOM, that represent the elements of the UI. In general there is a one to one correspondence between the HTML tags and DOM. That is for each tag like <Button> or <div> there is a DOM object. Also each DOM object has properties corresponding to the attributes of the tags and some additional properties that only make sense in a programming environment. 

The association between the DOM and the UI displayed to the user is live. That is if you change DOM objects then the UI will change in response. 

Thus working with the DOM is an essential part of JavaScript web programming. The DOM is JavaScripts interface to the UI. 

You can work with the DOM 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

The first aspect of jQuery that you need to understand is the way that it uses "selectors" to pick out DOM objects for you to work with. When you first start to work with the DOM the problem you have to solve is how to find the component of UI you want to modify. For example how do you find the DOM object that corresponds to a particular button? 

The most basic way of finiding a DOM object is to use its id or class as a selector. 

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 be assigned to 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.

You can imagine how these are used in practice. You use the id to uniquely identify a component of the UI - e.g. id="button1" and you use the class to identify a group of components that have something in common - usually the way they look. 

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.

Another simple selector is the tag type. For example:

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.