jQuery Selectors

Sunday, June 10, 2012

The jQuery selectors to let us quickly and easily access individual or groups of HTML elements in the Document Object Model (DOM). Selectors allow you to get the exact element or attribute you want from your HTML document. jQuery supports the existing CSS Selectors, as well as some custom selectors. All of the jQuery selectors begin with the dollar sign and parentheses: $().

*$("*")All elements
selector-1,selector-2$("p,div")All elements with matching selectors
#id$("#one")The element with id="one"
.class$(".two")All elements with class="two"
element$("div")All div elements
.class.class$(".abc.def")All elements with the classes "abc" and "def"

:animated$(":animated")All animated elements
:contains(text)$(":contains('test')")All elements that contain the text
:empty$(":empty")All elements with no child nodes
:eq(index)$("ul li:eq(2)")The third element in a list [starts at 0]
:even$("tr:even")All even tr elements
:first$("div:first")The first div element
:gt(index)$("ol li:gt(2)")List elements with an index > 2
:header$(":header")All header elements [h1, h2 ...]
:hidden$("div:hidden")All hidden div elements
:last$("div:last")The last div element
:lt(index)$("ol li:lt(2)")List elements with an index < than 2
:not(selector)$("td:not(:empty)")All td elements that are not empty
:odd$("tr:odd")All odd tr elements
:visible$(":visible")Visible elements

[attribute]$("[href]")All elements with a href attribute
[attribute=value]$("[href='index.htm']")All elements with a href attribute equal to "index.htm"
[attribute!=value]$("[href!='index.htm']")All elements with a href attribute not equal to "index.htm"
[attribute$=value]$("[href$='.png']")All elements with a href attribute ending with ".png"
[attribute^=value]$("[href^='http']")All elements with a href attribute beginning with "http"

:input$(":input")All input elements
:text$(":text")Input elements with type="text"
:password$(":password")Input elements with type="password"
:radio$(":radio")Input elements with type="radio"
:checkbox$(":checkbox")Input elements with type="checkbox"
:submit$(":submit")Input with type="submit"
:reset$(":reset")Input elements with type="reset"
:button$(":button")Input elements with type="button"
:image$(":image")Input elements with type="image"
:file$(":file")Input elements with type="file"
:enabled$(":enabled")Enabled input elements
:disabled$(":disabled")Disabled input elements
:selected$(":selected")Selected input elements
:checked$(":checked")Checked input elements

The selectors are very useful and would be required at every step while using jQuery. They do a great job making it easy to get to the exact element that you want from your HTML document. Here is an example where you are selecting all paragraph elements and when you click on any of them, the text color changes to red. If you copy and paste this example, make sure you update the correct value for the src attribute in the reference to the jQuery library.

<title>Your Title</title>
 <script type="text/javascript" src="jquery.js">

   <p>This is a paragraph.</p>
   <p>This is second paragraph.</p>
   <p>This is third paragraph.</p>

   <script type="text/javascript">
       $(document).ready(function () {
           $("p").click(function () {
               $(this).css("color", "red");

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

HTML CSS and JavaScript Editor Professional jQuery JavaScript and jQuery: The Missing Manual