HTML and CSS Reference
In-Depth Information
Selection
The first thing we are going to do with jQuery is select elements from the document.
Selecting elements obviously has no intrinsic value in its own right; we are eventually going
to do something with these elements. A jQuery selection will return zero or more elements
from the document. More specifically, the selection will return zero or more jQuery wrapped
DOM elements from the document. This distinction will be important in later sections.
In order to perform a selection, simply include the selection criteria inside the following
construct:
$('<selection criteria>')
The
$
is an alias for the function called jQuery, so we could also use the following construct:
jQuery('<selection criteria>')
The
$
alias tends to produce better readability, so we will use that convention in the sections
below. The only time to avoid this alias is if you are using any other libraries that use the
$
global variable: jQuery does support a no-conflicts mode in this case, and allows you to
create a new alias.
The selection criteria utilized by jQuery is in fact essentially the same selection criteria util-
ized by CSS. This is enormously helpful, since it means you only need to learn the selection
language once in order to use CSS and jQuery.
There are five core ways to select elements:
• Element type.
• Element attribute.
• Element class.
• Element ID.
• Pseudo classes.
All five approaches will be briefly outlined below.
The first way to select an element is by its type. For instance, if we want to select all the
table
elements in the document, we can use the following syntax:
> $('table')
This, and all other commands in this chapter, can be run directly in the console after first
loading the tasks.html page. This command will return an array of one element, and that ele-
ment will be the table holding the tasks.
