Selectors

Learning objectives#

• Select by id, class, tag and attribute
• Use descendant, child and pseudo selectors
• Filter and count matched elements
• Tell a jQuery object from a DOM element

Explanation#

$("#id"), $(".class") and $("tag") work like CSS. Combine them: $("ul.menu > li"), $("input[type=email]").

jQuery adds filters: :first, :last, :even, :odd, :visible, :checked, :contains("text"). Methods like .first(), .eq(2) and .filter(".x") do the same and are faster.

$() always returns a jQuery object — even when nothing matches. Check .length to know how many elements were found.

A jQuery object is a list of DOM elements with jQuery methods. $(".x")[0] or .get(0) gives the raw DOM element; $(domElement) wraps one back.

Store selections you reuse in variables (by convention starting with $): const $rows = $("#orders tr");.

Syntax#

1$('#cart')               // id
2$('.item')               // class
3$('li:first')            // first li
4$('input[type=email]')   // attribute
5$('#menu > li.active')   // child + class

Code example: Selecting and counting#

1<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2<ul id="menu" style="font-family:sans-serif">
3  <li>Home</li><li class="active">Shop</li><li>Blog</li><li>Contact</li>
4</ul>
5<input type="email" placeholder="email"> <input type="text" placeholder="name">
6<script>
7  $(function () {
8    console.log('All items:', $('#menu li').length);
9    console.log('Active:', $('#menu li.active').text());
10    console.log('Third:', $('#menu li').eq(2).text());
11    console.log('Odd rows:', $('#menu li:odd').length);
12    console.log('Email inputs:', $('input[type=email]').length);
13    console.log('Missing:', $('.does-not-exist').length);
14    $('#menu li:first').css('font-weight', 'bold');
15  });
16</script>

All items: 4
Active: Shop
Third: Blog
Odd rows: 2
Email inputs: 1
Missing: 0
(“Home” is shown in bold.)

Step-by-step explanation#

1. $("#menu li") finds all four list items inside #menu.
2. .text() on the active item returns “Shop”.
3. .eq(2) picks the third match (indexes start at 0).
4. :odd matches indexes 1 and 3 — two items.
5. A selector that matches nothing returns an empty jQuery object with length 0, not null.

Real-world use case#

Common mistakes#

Best practices#

• Prefer ids and classes for speed
• Cache repeated selections in $variables
• Scope searches: $container.find(".x")
• Use .length to test for matches

Remember this#

Practice exercise#

1<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2<table>
3  <tr data-status="paid"><td>INV-1</td></tr>
4  <tr data-status="due"><td>INV-2</td></tr>
5  <tr data-status="due"><td>INV-3</td></tr>
6</table>
7<script>
8  $(function () {
9    const $due = $('tr[data-status=due]');
10    console.log('Due:', $due.length);   // Due: 2
11    $due.css('color', 'red');
12  });
13</script>

Mini quiz#

Want more? Practise all jQuery MCQs · jQuery interview questions

Related topics#

My notes#

Saved in this browser.