Introduction

A web page is composed of a variety of HTML elements, such as form, p, span, paragraph, hyperlink, table, input, select, and so on. When writing a client script, there is often a need to manipulate these elements. In JavaScript, it is possible to access these elements using their unique IDs with the help of the document.getElementById() statement.

However, in real-world applications, there might be a requirement to retrieve elements based on attributes other than their IDs. Or some applications may require retrieval and manipulation of more than one element. This is made possible by the use of selectors in jQuery.

A selector is a jQuery construct that retrieves elements on a page based on a specified condition. It can be used to return single or multiple elements. Using jQuery selectors, it is possible to match elements using their ID, CSS class, tag name, and position in the Document Object Model (DOM) or other attributes.

When an ASP.NET page is viewed in the browser, the controls are rendered as HTML elements. This makes it possible to select ASP.NET controls using standard jQuery selectors. The following table summarizes the mapping of some common ASP.NET controls to their rendered HTML equivalents:

Standard jQuery selectors can also be used with ASP.NET MVC since MVC applications use raw HTML markups or built-in extension methods of the HTML class to render the content.

jQuery selectors can be broadly classified into the following types:

• Basic selectors: These selectors are similar to CSS selectors that are used in style sheets to apply styles to selected elements. Basic selectors can be used to retrieve elements based on the HTML tag, CSS class, element ID, or a combination of all these. The examples of basic selectors are as follows:

  

• Hierarchy selectors: These selectors are also similar to CSS selectors and are used to select child elements in the DOM tree. The examples of hierarchy selectors are listed as follows:

  

• Attribute selectors: These selectors retrieve elements based on the attributes they have. The examples of attribute selectors are listed as follows:

  

• Form selectors: These selectors are used to work with various form elements, such as an input, checkbox, radio, and so on. The examples of form selectors are as follows:

  

• Position filters: These selectors retrieve elements based on their position in a collection. The examples of position selectors are listed as follows:

  

Note

Find out more about the different types of jQuery selectors at http://api.jquery.com/category/selectors.

When writing the jQuery code, often anonymous functions are used. An anonymous function is a function without a named identifier. It is usually used as an argument to other functions.

Let's say we have an onDocumentReady()function. This function is passed to the $(document).ready() function as an argument, as follows:

function onDocumentReady(){…}

$(document).ready(onDocumentReady);

Instead of working in this way, an anonymous function can be directly passed to $(document).ready() as an argument, as follows:

$(document).ready(function(){ …} );

However, note that anonymous functions are not accessible once they have been created.