Home » Learn » jQuery Tutorial » jQuery Selectors

jQuery Selectors

Selectors are the most important part of jQuery. They find the HTML elements which you want to work with. They are based on CSS selectors, and jQuery adds some more.

The page for the examples

<div id="main">
  <h2>Fruits</h2>
  <ul class="list">
    <li class="item">Apple</li>
    <li class="item special">Banana</li>
    <li class="item">Mango</li>
  </ul>
  <a href="https://example.com" target="_blank">Example</a>
  <a href="/about">About</a>
  <input type="text" name="city" value="Delhi">
</div>

Basic selectors

SelectorExampleSelects
Element$('li')All li elements
ID$('#main')The element with id main (one element)
Class$('.item')All elements with the class item
All$('*')All elements
Multiple$('h2, a')All h2 and all a elements
console.log($('li').length);
console.log($('#main').length);
console.log($('.item').length);
console.log($('h2, a').length);
Console output

3
1
3
3

Hierarchy selectors

SelectorExampleSelects
Descendant$('#main li')All li inside #main (any level)
Child$('ul > li')li which are direct children of ul
Adjacent sibling$('h2 + ul')The ul right after an h2
General sibling$('h2 ~ a')All a after an h2, same parent
console.log($('#main li').length);
console.log($('ul > li').length);
console.log($('h2 + ul').attr('class'));
console.log($('h2 ~ a').length);
Console output

3
3
list
2

Attribute selectors

SelectorSelects
$('[href]')Elements which have an href attribute
$('a[target="_blank"]')a with target equal to _blank
$('a[href^="https"]')href starts with https
$('a[href$="about"]')href ends with about
$('a[href*="example"]')href contains the word example
$('input[type="text"]')text input fields
console.log($('[href]').length);
console.log($('a[target="_blank"]').text());
console.log($('a[href^="https"]').text());
console.log($('a[href$="about"]').text());
console.log($('a[href*="example"]').length);
console.log($('input[type="text"]').val());
Console output

2
Example
Example
About
1
Delhi

Position and filter selectors

jQuery has some extra selectors for position. They work, but since jQuery 3.4 many of them are marked deprecated, because they are not part of the CSS standard. The methods are better for the new code: .first(), .last(), .eq().

SelectorMethod (recommended)Meaning
$('li:first')$('li').first()First element
$('li:last')$('li').last()Last element
$('li:eq(1)')$('li').eq(1)Element at index 1 (counting starts from 0)
$('li:even')$('li').filter(':even')Elements at index 0, 2, 4 …
$('li:not(.special)')$('li').not('.special')Elements without the class
console.log($('li').first().text());
console.log($('li').last().text());
console.log($('li').eq(1).text());
console.log($('li').not('.special').length);
console.log($('li:nth-child(2)').text());
Console output

Apple
Mango
Banana
2
Banana

Form selectors

  • :input all form fields, :text, :checkbox, :radio, :submit
  • :checked, :selected, :disabled, :enabled for the state of fields

Tips for selectors

  • ID selectors are the fastest, because the browser has a direct method for it.
  • Keep selectors short and clear. Long chains are slow and hard to read.
  • Use a class for a group of elements and an id for one element.
  • If nothing is selected, jQuery does not give an error. Check .length to know if the element was found.
Note: A jQuery selector always returns a jQuery object, even if no element is found. Use if ($('#box').length) { ... } to test. Next: jQuery Events.

Share this post:

Share on LinkedIn
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.