jQuery Basic Selectors

Last Updated Jul 21, 2015, 12:00:06 PM




jQuery Basic Selectors

jQuery provides many selectors we can use on a webpage, in this chapter we will learn the basic selectors

jQuery :even Selector

jQuery even selector is used to select only the even HTMLelements on the webpage. Indexes are zero-based index

Syntax
Example HTML

See the below jquery even selector example, it will select all the even tr elements (0, 2, 4) and applies background-color:red color to the above HTML code

jQuery
Output
Try It Now

jQuery odd Selector

The jQuery odd selector is used to select only the odd HTMLelements on the webpage. Indexes are zero based

Syntax
Example HTML

See the below jquery odd selector example, it will select all the odd tr elements (1, 3, 5) and applies background-color:red to the above HTML code

jQuery
Output

Try it Now

jQuery eq Selector

jQuery :eq selector is used to select an HTML element with a specific index within the matched set.

Imagine, if you have to style a single specific element out of hundreds or thousands of HTML elements in the webpage you might consider using the jQuery :eq selector

Syntax
Example HTML

The below jquery :eq selector example will target the second td element from zero based index and style that td element color as green
Output

Try It Now

jQuery first Selector

jQuery first selector selects the first matched element in the given list of HTML elements.

Note:

The :first pseudo-class is equivalent to :eq( 0 )


Syntax
Example HTML
jQuery

In the above example, we have 7 tr elements. Using the above jquery :first selector we can target the first selector and apply the required styles


Output

Try It Now

jQuery last Selector

jQuery last selector selects the last matched element in the given list of HTML elements.

Note: :last selector, selects a single element by filtering the current jQuery collection and matching the last element within it.


Syntax
Example HTML
jQuery

In the above jQuery :last selector example, we have 3 tr elements. Using the above jquery :last selector we can target the last tr element and apply the green color to the text


Output

Try It Now

jQuery gt Selector

jQuery :gt selector is used to select all elements which are greater than the given index.

When there are many similar HTML elements you can select specific element(s) which are greater than some specific index.

Syntax
Example
jQuery

In the above example jQuery :gt selector targets the specific td element, which is greater than 3. The Third td element.


Output

Try It Now

jQuery lt Selector

jQuery :lt selector is used to select all elements which are less than the given index.


Syntax
Example

The above example will select all the td elements which have the index as less than 5

Output
Try It Now

jQuery not Selector

jQuery not selectorselects all elements that do not match the given index. In other words, it selects all the elements except the mentioned element in the selector


Syntax

All selectors are accepted inside :not() selector, for example: :not(div a) and :not(div,a).


Example HTML
jQuery

The above jQuery :not selector selects all the elements and applies its background color as green except the elements which have a css class name called dont-select-me. In our example, Monday and Wednesday paragraphs contain p class="dont-select-me" class. So it will be ignored


Output

Try It Now

jQuery :focus Selector

jQuery :focus selector is used to select the currently focused HTMLelements if it is currently focused.


Syntax
Example
jQuery

The above example selects the currently focused element and applies the css style to that element. For example when the user focus on the input text field it will change its background color to red.

Output

Try It Now

All jQuery Basic Selectors Reference

Other Advanced jQuery Selectors you might want to learn

jQuery Selectors

jQuery Basic Selectors

jQuery Child Selectors

jQuery Content Filter Selectors


Sources and Credits

The content and methods in the tutorial has been referred and updated with jQuery API and The jQuery Foundation

Last Updated Jul 21, 2015, 12:00:06 PM

More great reads