Search within TutorialsPark

Jquery Selecting Elements


Understand the jQuery Syntax used to select Element based on different Criteria.


Selecting Elements using jQuery

To use jQuery you must be first able to select element from the DOM on which the operations can be performed

Jquery enables you to select element based of various types of criteria, all CSS selectors can be used to select elements, its done by simply passing the selector to the jQuery $ function

Table : Jquery Extension Selectors

Selector Description
:animated To specify the function to be executed when the DOM is ready
:contains(text) To select the element that contains the specified text
:eq(n) To select the element at the nth index position
:even To select all the elements at even numbered positions
:first To select the first element that matches the condition
:gt(n) To select the element with index value greater than n.
:has(selector) To select the element that contains at least one element that matches the specified selector
:last To select the last element that matches the condition
:lt(n) To select all the elements with an index value smaller than n
:odd To select all elements with odd-numbered index value.
:text To select all text elements

In the demo below, the CSS styles are applied to every element at odd position in the list, using the CSS pseudo selector :odd

Syntax: Select Elements using jQuery

Example: Jquery $(..) Selector

Give it a TRY! » Exercise:Try using all the pseudo element to select elements on different criteria


Jquery Select Element using Extension Type Selectors

Just like Pseudo elements , jQuery can also select element using the type extension selectors.

Table : Jquery Type Extension Selectors

Selector Description
:button To select all buttons
:checkbox To select all checkboxes
:file To select all file elements
:header To select all header elements(h1 to h6)
:hidden To select the first element that matches the condition
:image To select all image elements
:input To select all input elements
:last To select the last matched element
:parent To select all the elements that are parents to other elements
:password To select all password elements.
:radio To select all radio elements
:reset To select all elements that resets a form
:selected To select all elements that are selected.
:submit To select all form submission elements
:visible To select all visible elements

In the demo below, the button element is selected using Jquery Extension Selectors.

Syntax: Jquery Select Element using Extension Type Selectors

Example: Jquery Select Element using Extension Type Selectors

Give it a TRY! » Note:Click the Button to Select Elements


Jquery Selection : Narrowing the Selection using Context

While searching for elements, the jQuery code goes through the entire DOM, but the scope of the search can be narrowed by supplying additional arguments to the $ function.

This additional argument is called as the context , it defines the starting point for matching elements.

Example: Jquery custom Shorthand

Give it a TRY! » Note:jQuery searches for all :odd elements within class .asia


You can even define the context using an HTMLElement object, the demo below searches for even numbered list elements, which are descendants of elements with id "cars"

Example: Jquery Narrowing selection using HTMLElement

Give it a TRY! » Note: Use this method when you want to narrow a search programmatically.