jQuery Selectors

jQuery selectors are used to find the elements in the HTML page.

Here are some of the most frequently used selectors.

Finding all elements with specific tag name

To select all elements with specific tag, you can use below syntax.
$(“tag_name”)

For example – to select all elements with table tag, you can use below syntax.
$(“table”)

Below selector will select all <div> elements and <span> elements

$(“div,span”)

Below selector will select all <span> elements within <div> elements

$(“div span”)

Below selector will select all <span> elements and their parent is <div> element.

$(“div > span”)

Below selector will select all <span> elements if it comes right after div element. (similar to first sibling)

$(“div + span”)

Below selector will select all <span> elements followed by div element.

$(“div ~ span”)

Finding all elements with specific id

To select all element with specific id attribute value, you can use below syntax.
$(“#Value_Of_Id_Attribute”)
For example – If you want to select the element with Id attribute’s value as transactionNumber, you can use below syntax.
$(“#transactionNumber”)

Finding all elements with specific class name

To select all element with specific class attribute value, you can use below syntax.
$(“.className”)

Below selector will select all div elements that have call name as inactive

$(“div.inactive”)

Finding all elements

To select all elements, you can use below syntax.
$(“*”)

Selecting current element

To select current element, you can use below syntax.
$(this)

Finding all elements with specific tag name and attribute value

To find all input tag element having attribute type = ‘hidden’
input[type=’hidden’]

Find all input tag element having attribute type = ‘hidden’ and name attribute = ‘ren’
input[type=’hidden’][name=’ren’]

Find all input tag element with attribute type containing ‘hid’
input[type*=’hid’]

Find all input tag element with attribute type starting with ‘hid’
input[type^=’hid’]

Find all input tag element with attribute type ending with ‘den’
input[type$=’den’]

Below selector will select all elements that have src attribute.
$(“[src]”)

Below selector will selects all <img> elements where src attribute is not equal to xyz.

$(“img[src!=’xyz’]”)

Below selector will selects all <img> elements where src attribute starts with xyz.

$(“img[src|=’xyz’]”)

More complex Selectors

To select all even and odd tr elements, use below selector

1. $(“tr:even”) – This will select all even rows from the table.
2. $(“tr:odd”) – This will select all odd rows from the table.
3. $(“a:active”) – This selector will select all active links.
4. $(“a:hover”) – This selector will select link on which mouse is hovered.
5. $(“a:visited”) – This selector will select all visited links.
6. $(“a:link”) – This selector will select unvisited links.
7. $(“:checked”) – This selector will select all checked elements.
8. $(“:disabled”) – This selector will select all disabled elements.
9. $(“:enabled”) – This selector will select all enabled elements.
10. $(“:empty”) – This selector will select all elements that do not have any children.
11. $(“:read-only”) – This selector will select all elements that have readonly attribute.
12. $(“:read-write”) – This selector will select all elements that do not have readonly attribute.
13. $(“:required”) – This selector will select all elements that have required attribute.
14. $(“:optional”) – This selector will select all elements that do not have required attribute.
15. $(“:out-of-range”) – This selector will select all elements that have out of range values.
16. $(“:in-range”) – This selector will select all elements that have values in the range.
17. $(“:root”) – This selector will select root element
18. $(“:valid”) – This selector will select all valid elements
19. $(“:invalid”) – This selector will select all invalid elements
20. $(“input:focus”) – This selects the focused input element

Selecting children, siblings and parents

1. $(“:first-child”) – This selects the first child of every element