jQuery Selectors

Find elements with CSS-style selectors.

✍️ 3 exercises + code challenge in this lesson

❮ Previous Next ❯

$("p"): all paragraphs
$("#id"), $(".class")
$("ul li:first"), $("tr:even")
$("[href]"), $("input[type='text']")
$(this): the current element inside an event handler

Key Takeaways: jQuery Selectors

Mastering jQuery Selectors helps you write clean and reliable jQuery code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

jQuery Selectors Code Example

jQuery

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<ul>
  <li>HTML</li><li>CSS</li><li>JavaScript</li><li>jQuery</li>
</ul>
<a href="#">Has href</a> <a>No href</a>

<script>
  $("li:first").css("color", "#0769AD");
  $("li:odd").css("background", "#E0F2FE");
  $("a[href]").css("font-weight", "bold");
</script>

Free sign-in required · Google login available

jQuery Selectors Practice Exercises

Check what you learned in “jQuery Selectors”.

/ 3 solved

Fill in the blank

Select the first list item.

$("li")

✓ Correct! Not quite. Try again.

Multiple choice

Inside an event handler, how do you refer to the clicked element?

$(this) $(self) $(event) $(me)

✓ Correct! Not quite. Try again.

Code challenge

Hide every element with the class "ad" using jQuery.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services

jQuery Selectors

💡 Key Takeaways: jQuery Selectors

jQuery Selectors Code Example

jQuery Selectors Practice Exercises

Key Takeaways: jQuery Selectors