jQuery Selectors

The jQuery selectors 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: $().

Selector	Example	Description
`*`	`$("*")`	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`

Selector	Example	Description
`: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 < 2`
`:not(selector)`	`$("td:not(:empty)")`	All td elements that are not empty
`:odd`	`$("tr:odd")`	All odd tr elements
`:visible`	`$(":visible")`	Visible elements

Selector	Example	Description
`[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`

Selector	Example	Description
`: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.

<html>
<head>
    <title>Your Title</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    <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");
            });
        });
    </script>
</body>
</html>