HTML and CSS Reference
In-Depth Information
jQuery selectors can be grouped into the following categories:
•
Basic selector:
Selects elements based on basic criteria such as ID, CSS class, and
HTML tag name.
•
Basic filter:
Filters an element set based on conditions such as first occurrence, last
occurrence, and odd or even elements.
•
Attribute selector:
Selects elements by matching their attribute values.
•
Child filter:
Filters an element set based on conditions such as first-child, last-child,
n
th-child, and only-child.
•
Content filter:
Filters elements based on their content.
•
Form selector:
Selects form elements based on their type (button, check box, and so
on) and state (selected or checked).
•
Hierarchy selector:
Selects elements from a hierarchy (children, descendents,
siblings, and adjacent).
•
Visibility filter:
Selects elements based on their visibility status (visible or hidden).
The selectors that are needed frequently and that are used in this topic's examples are discussed in the
following sections.
n
Note
Some of the examples discussed in the following sections use the Northwind database, a sample database
developed by Microsoft for SQL Server. So, you may consider installing it in your local SQL Server or SQL Server
Express instance. You can download the T-SQL script of the Northwind database from the MSDN download center.
Selecting Elements Based on ID, Tag Name, and CSS Class
Selecting HTML elements based on their ID, tag names, or CSS class is a common requirement in client-
side scripting. From the previous sections, you already know how to select HTML elements by specifying
their ID. Listing 2-6 shows these three types of selections.
Listing 2-6.
Using ID, Tag Name, and CSS Class to Match Elements
$(document).ready(function () {
$("#myDiv").html("<h1>Hello jQuery !</h1>");
$("div").css("background-color", "#ded8d8");
$(".MyClass").text("We have the same CSS class!");
})
The first line in the
ready
function selects a DOM element whose ID is
myDiv
. It then sets the HTML
content of the selected element to some markup using the jQuery
html()
method. The second line selects
all the
<div>
elements from the page and sets their background color to
#ded8d8
using the
css()
method.
Finally, the third line of code selects all the elements that have a CSS class named
MyClass
applied to them
and sets their HTML content to a string.
Figure 2-5 shows a sample run of the page.
