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:
Selects an element that matches a specific ID value.
Selects element(s) that has specified class(es).
Selects specified DOM elements.
$("p") -> selects all “p” elements
Besides selectors like the ones above, there are also pseudo-class selectors.
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:
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.