jQuery Selectors

jQuery selectors are used to select one or more elements in DOM (Document Object Model) so that you can do client-side manipulations on those selected elements. Like changing color, shape, size, innerHTML, visibility etc.

There are different types of jQuery selectors that let you choose DOM elements in different ways, by using different attribute values of the elements as a selection criteria.

Once you select element or elements using a jQuery selector, you can manipulate/chain manipulate them using jQuery functions.

Below are some selectors and sample usage for them:

ID Selector:
Selects an element that matches a specific ID value.

CLASS Selector:
Selects element(s) that has specified class(es).

ELEMENT Selector:
Selects specified DOM elements.
$("p") -> selects all “p” elements

Besides selectors like the ones above, there are also pseudo-class selectors.

:last Selector:
With this pseudo-class selector you can select the last element from the set of all matched elements.

Consider the “p” element selector. When you add “:last” pseudo-class selector to “p” element selector, you will get the last “p” element in the DOM.

$("p:last") -> selects the last “p” element in the DOM

Then you can manipulate this element like so to set “background-color” and “font-weight” css attributes:

$("p:last").css({backgroundColor:"blue", fontWeight:"bold"});

:visible/:hidden Selectors:
With these pseudo-class selectors you can select visible or hidden elements from a set of matched elements.

$("p:hidden")->selects all “p” elements that are hidden
$("p:visible")->selects all “p” elements that are visible

For example with the code below you can show all the hidden “div” elements at once:


Once you get an understanding of the jQuery selectors they are really easy and handy.

For all the jQuery selectors you can visit jQuery API site.

Hope this helps someone.

Good luck,

Leave a Reply

Your email address will not be published. Required fields are marked *