Basic Selectors in Visual C#.NET

Painting QR Code JIS X 0510 in Visual C#.NET Basic Selectors

A query is characterized by a selector. A selector is simply the expression that, when properly evaluated, selects one or more DOM elements. In jQuery, you have three basic types of selectors based on ID, CSS, or tag name. In addition, a selector can result from the composition of multiple simpler selectors combined using ad hoc operators. In this case, you have a compound selector. An ID selector picks up DOM elements by ID. An ID selector commonly selects only one element unless multiple elements in the page share the same ID this condition violates the HTML DOM standard, but it is not too unusual in the real world. Here s the syntax of an ID selector:

// Select all elements in the context whose ID is Button1 $("#Button1")

The leading # symbol just tells jQuery how to interpret the following text. A CSS-based selector picks up all elements that share the given CSS class. The syntax is shown here:

// Select all elements in the context styled with the specified CSS class $(".header")

In this case, the leading dot (.) symbol tells jQuery to interpret the following text as a CSS style name. Finally, a tag-based selector picks up all elements with the specified tag, such as all IMG tags, all DIV tags, or whatever else you specify. In this case, the selector consists of the plain tag name no leading symbol is required:

// Select all IMG elements in the context $("img")

Concatenation is possible through a number of operators. For example, the white space picks up all elements that satisfy the second selector and are descendants of those matching the first. Here s an example:

// Select all anchors contained within a DIV $("div a")

The selector just shown is functionally equivalent to the following jQuery expression:

$("div").find("a");

Similar to the white space, the > operator selects elements that are direct child elements (and not just descendants) of the elements matched by the first selector:

// All anchors direct child elements of a DIV $("div > a")

The preceding selector is functionally equivalent to the following jQuery expression:

$("div").children("a")

Plain concatenation of selectors results in a logical AND of conditions. For example, consider the following query:

$("div.header.highlight")

It selects all DIV elements styled using both the class header and class highlight. The + operator the adjacent operator selects sibling elements in the second selector immediately preceded by elements selected by the first selector. Here s an example:

// All P immediately preceded by A $("a + p")

21

The ~ operator the next operator is similar to + except that it selects sibling elements just preceded by others. Here s an example:

// All P preceded by A $("a ~ p")

By using the comma, instead, you return the union of elements queried by multiple selectors. In terms of operations, the comma represents a logical OR of selectors. The next example, in fact, picks up elements that are either A or P:

// All A and all P $("a, p")

Beyond simple operators, you have filters. A filter is a jQuery-specific expression that contains some custom logic to further restrict the selected elements.

Selectors can be further refined by applying filters on position, content, attributes, and visibility. A filter is a sort of built-in function applied to the wrapped set returned by a basic selector. Table 21-1 lists positional filters in jQuery.

TABLE 21-1

Returns the first DOM element that matches Returns the last DOM element that matches Returns all DOM elements that do not match the specified selector Returns all DOM elements that occupy an even position in a 0-based indexing Returns all DOM elements that occupy an odd position in a 0-based indexing Returns the DOM element in the wrapped set that occupies the specified 0-based position Returns all DOM elements that occupy a position in a 0-based indexing greater than the specified index Returns all DOM elements that occupy a position in a 0-based indexing less than the specified index Returns all DOM elements that are headers, such as H1, H2, and the like Returns all DOM elements that are currently being animated via some functions in the jQuery library