HTML and CSS Reference
In-Depth Information
In order to join these two criteria, a single selection criterion can be written as follows:
> $('input[type="text"]')
Notice that there is no space between one criteria and the next - if a space was placed here
this would mean something different, as we will see below.
We can use the same approach to match on both element
type
and
class
:
> $('input.large')
This will return all elements of
type
“input” that have a
class
of “large”.
It should never be necessary to combine selectors based on ID with other types of selector,
since IDs are unique within a document.
In addition to combining selectors for criterion relating to a single element, it is often ne-
cessary to select all elements that match selection criteria within a particular sub-tree of the
document.
Consider a case where we have multiple tables in the same document, but we want to return
the first row in a specific table (for instance, the table with the ID
tblTasks
). In order to
achieve this we first need to find the table called
tblTasks
, and then find the first row with-
in its sub-tree.
jQuery supports several ways of doing this. The most common approach is as follows:
> $('#tblTasks tr:first')
The space denotes the fact that these are two different selections. jQuery performs this be
selecting the elements that match the first selection:
$('#tblTasks')
and then executing the second selection against the sub-trees of these elements:
$('tr:first')
In fact, jQuery supports an alternative mechanism for doing this more explicitly:
> $('#tblTasks').find('tr:first')
Yet another approach to performing this same selection is to use the optional second para-
meter to the jQuery selector:
> $('tr:first', '#tblTasks')
The second parameter is used to specify the root of the sub-tree that the selection should
occur within. This can be a useful approach when you know you are dealing with a sub-
tree of the document, since you can assign the context to a variable, and then use that in all
selections:
