jQuery selectors are used to select DOM elements in the HTML page. Most jQuery code starts with a jQuery selector. The code selects one or more HTML elements and then traverse the DOM elements using the jQuery traversal features, manipulate the DOM elements via the jQuery DOM manipulation features, add event listeners to them via the jQuery event features, or add effects to them via the jQuery effects features.

jQuery contains a wide range of selectors which can select HTML elements based on their element name, id, attribute values, visibility, element order and many other criteria. This jQuery selector tutorial will cover the most commonly used selectors. For a full list of all jQuery selectors, see the following page in the official jQuery documentation:

http://api.jquery.com/category/selectors/

jQuery Selector Overview

A jQuery selector is a string which specifies which HTML elements to select. The selector string is passed to the$() or jQuery() selection function which returns a collection of the selected elements.

The jQuery selector syntax is the same as CSS selectors, so if you are familiar with CSS selectors you will learn jQuery selectors very quickly.

jQuery lets you select elements based on the following criteria:

• Element name (e.g. ‘p‘, ‘a‘, ‘div‘ etc.)
• Element id
• Element CSS class
• Element attributes
• Element visibility
• Element order
• Form Fields
• Element parents or children
• Combinations of the above

I will cover each of these options in the sections below.

jQuery Selector Example

To get you started, let me show you a simple jQuery selector example:

var theDiv = $("#theDiv");

This example selects the div element with the id theDiv, meaning the div element which has an id attribute with the value theDiv.

The $() and jQuery Functions

The $() returns a jQuery enhanced set of elements. This jQuery enhanced set of elements contains a lot of utility functions which can be applied to all elements in the set. For instance, here is how you set a CSS class on all the selected elements in the set:

var theDiv = $("#theDiv");

theDiv.addClass("newCssClass");

This example sets the CSS class newCssClass on all elements in the set. Since the example only selects a single element, only one element will get the new CSS class.

A shorter way of writing the above code is:

$("#theDiv").addClass("newCssClass");

Notice how the addClass() function is chained directly to the $() call.

Many of the utility functions on the jQuery enhanced selection set return the selection set itself. That means that you can chain method calls on the selection set, like this:

$("#theDiv").addClass("newCssClass")
            .css("border", "1px solid #cccccc")
            .css("background-color", "#f0f0f0")
    ;

As hinted, this technique is called method chaining. In the JavaScript world an API designed to work with method chaining is also referred to as a "fluent" API. jQuery‘s fluent style API makes it very easy to make changes to the DOM.

Instead of the $() function you can also use the jQuery() function. The two functions do exactly the same thing, but sometimes you might be using other JavaScript libraries which also define a $() function. In that case, use thejQuery() function instead.

The many utility functions on the selection set are covered in separate texts in this jQuery tutorial trail. For instance, there are traversal functions, CSS manipulations functions, DOM manipulation functions, various effects (like fading and scrolling of elements), event listener functions, and much more.