jQuery selectors samples

jQuery selectors are one of the most important part of jQuery. Their main purpose is to allow users to quickly and easily identify and manipulate any set of page elements.
The selector is a string expression that identifes the set of DOM elements that will be collected into a matched set to be operated upon by the jQuery methods (but we will focus on selectors). In this article you will find samples of using jQuery selectors.

Basics

#id

Matches a single element with the given id attribute.

Sample:

$('#SelectMe')

This selector select element with id SelectMe.

<p id="SelectMe" style="display:none">This paragraph will be selected</p>
<p id="NotSelectMe">This paragraph will not be selected</p>

element

Matches all elements with the given name.

Sample:

$("p")

This selector select all paragraph (p) elements.

<p id="SelectMe" style="display:none">This paragraph will be selected</p>
<p id="NotSelectMe">This paragraph will not be selected</p>
<button id="butSelect">Select</button>

For example if we call:

$("p").toggle();

both paragraphs will be toggled.




.class

Matches all elements with the given class.

Sample:

$(".testClass")

This selector select all elements with class testClass.

<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<p id="NotSelectMe">This paragraph will not be selected</p>
<button id="butSelect" class="testClass">Select</button>

*

Matches all elements.

Sample:

$("*")

Matches all elements.

<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<p id="NotSelectMe">This paragraph will not be selected</p>
<button id="butSelect" class="testClass">Select</button>

selector1, selector2, selectorN

Matches the combined results of all the specified selectors.

Sample:

$("#SelectMe, .testClass")

This selector select element with id #SelectMe and elements with class testClass.

<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<p id="NotSelectMe">This paragraph will not be selected</p>
<button id="butSelect" class="testClass">Select</button>

Hierarchy

ancestor descendant

Matches all descendant elements specified by "descendant" of elements specified by "ancestor".

Sample:

$("div p")

This selector select all paragraph (p) elements which are in div element.

<div id="divToSelect">
<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<p id="NotSelectMe">This paragraph will not be selected</p>
<input id="testInput" />
</div>
<button id="butSelect" class="testClass">Select</button>

parent > child

Matches all child elements specified by "child" of elements specified by "parent".

Sample:

$("div > p")

This selector select all paragraph (p) elements which are in div element.

<div id="divToSelect">
<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<p id="NotSelectMe">This paragraph will not be selected</p>
<input id="testInput" />
</div>
<button id="butSelect" class="testClass">Select</button>

prev + next

Matches all next elements specified by "next" that are next to elements specified by "prev".

Sample:

$("p + input")

This selector select all input elements which are next to paragraph element.

<div id="divToSelect">
<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<p id="NotSelectMe">This paragraph will not be selected</p>
<input id="testInput" />
</div>
<button id="butSelect" class="testClass">Select</button>
<input id="noSelect" />

Selectors/siblings

Matches all sibling elements after the "prev" element that match the filtering "siblings" selector.

Sample:

$("#NotSelectMe ~ input")

This selector select all input elements after element with id NotSelectMe.

<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<input id="testInput" />
<p id="NotSelectMe">This paragraph will not be selected</p>

<input id="noSelect" />
<button id="butSelect" class="testClass">Select</button>

Basic filters

:first

Matches the first selected element.

Sample:

$("input:first")

This selector select first input element.

<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<input id="testInput" />
<p id="NotSelectMe">This paragraph will not be selected</p>
<input id="noSelect" />
<button id="butSelect" class="testClass">Select</button>

:last

Matches the last selected element.

Sample:

$("input:last")

This selector select last input element.

<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<input id="testInput" />
<p id="NotSelectMe">This paragraph will not be selected</p>
<input id="noSelect" />
<button id="butSelect" class="testClass">Select</button>

:not(selector)

Filters out all elements matching the given selector.

Sample:

$("input:not('#noSelect')")

This selector select all input element without element with id noSelect.

<p id="SelectMe" class="testClass">This paragraph will be selected</p>
<input id="testInput" />
<p id="NotSelectMe">This paragraph will not be selected</p>
<input id="noSelect" />
<button id="butSelect" class="testClass">Select</button>

:even

Matches even elements, zero-indexed.

Sample:

$("tr:even")

This selector select all even tr elements, zero-indexed.

<table border="1" class="style1">
<tr>
<td>
Row 0</td>
</tr>
<tr>
<td>
Row 1</td>
</tr>
<tr>
<td>
Row 2</td>
</tr>
<tr>
<td>
Row 3</td>
</tr>
</table>

:odd

Matches odd elements, zero-indexed.

Sample:

$("tr:odd")

This selector select all even tr elements, zero-indexed.

<table border="1" class="style1">
<tr>
<td>
Row 0</td>
</tr>
<tr>
<td>
Row 1</td>
</tr>
<tr>
<td>
Row 2</td>
</tr>
<tr>
<td>
Row 3</td>
</tr>
</table>

Related articles:
jQuery hello world
jQuery on blogspot (blogger) post
Basic web effect with jQuery