Page 1 of 3
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.
Now Available as a Print Book:
You can buy it from:
USA and World Amazon.com
I The Core UI
- Understanding jQuery (Book Only)
- The DOM And Selectors
- CSS Selectors
- The jQuery Object (Book Only)
- Advanced Filters - Traversing The DOM
- Modifying DOM Objects
- Creating And Modifying The DOM
- jQuery Data
- Function Queues
- jQuery UI
- jQuery UI Custom Control - Widget Factory
- jQuery - Easy Plugins
- Getting Started With QUnit Testing
The companion volume will be available as a book very soon:
Just jQuery: Events, Async & Ajax
- Reinventing Events
- Working With Events (coming soon)
- Asynchronous Code (coming soon)
- Consuming Promises
- Using Promises (coming soon)
- Ajax the Basics - get
- Ajax the Basics - 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
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.
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.
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.
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.
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.
<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.
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.
Another simple selector is the tag type. For example:
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.