Selectors

$() is jQuery's one selection function, and it takes the same CSS-style syntax you already know from stylesheets — a tag name, a .class, an #id, or a combination — and hands back a jQuery object wrapping every match.

Basic selectors

Given this markup:

<ul id="fruits">
  <li class="fruit">Apple</li>
  <li class="fruit">Banana</li>
  <li class="fruit">Cherry</li>
</ul>

console.log($("li").length);
console.log($(".fruit").length);
console.log($("#fruits").length);

3
3
1

Every one of these returns a jQuery object, even $("#fruits") which can only ever match one real element — that's why .length works the same way across all three, instead of some calls returning a single node and others returning a list like the native DOM API does.

jQuery-only selectors

Beyond plain CSS syntax, jQuery adds its own selectors for common positional needs:

console.log($("li:first").text());
console.log($("li:last").text());
console.log($("li:eq(1)").text());

Apple
Cherry
Banana

:eq(1) is zero-indexed, so it grabs the second <li> — Banana. These extras aren't part of the CSS spec; they only work inside jQuery's own $(), not in document.querySelector().

Chaining after a selection

Because every jQuery method returns a jQuery object, you can call another method right after the first without re-selecting anything:

$(".fruit").css("color", "green").addClass("highlight");