Lesson 4: More jQuery Selectors | Learn jQuery with Interactive Examples

Advanced jQuery Selectors

Building on the foundation from Lesson 3, we'll explore more powerful jQuery selectors that enable you to target elements with greater precision and flexibility.

Why Advanced Selectors Matter:

Target elements based on their position in the DOM
Select elements by their attributes and values
Filter selections using advanced criteria
Combine selectors for complex targeting
Improve efficiency in your jQuery code

Expanding Your Selector Toolkit

jQuery provides a rich set of selectors that go beyond basic element, ID, and class selection:

Universal Selector

$("*")

Selects all elements in the document

Current Element

$(this)

Selects the current HTML element

First Element

$("selector:first")

Selects the first matching element

Pro Tip: When using the universal selector ($("*")), provide a context to limit its scope and improve performance. For example: $("*", "#container") selects all elements within #container.

Advanced Selectors in Action

Try these interactive demos to see how advanced selectors work:

The Universal Selector (*)

Select and manipulate all elements within a specific context:

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

// Select all elements within #universalDemo
$("#selectAll").click(function() {
  $("#universalDemo .demo-item").addClass("highlight");
});

// Reset selection
$("#resetUniversal").click(function() {
  $("#universalDemo .demo-item").removeClass("highlight");
});

The Current Element Selector (this)

Target the specific element that triggered an event:

// Hide the button that was clicked
$(".demo-btn").click(function() {
  $(this).addClass("hidden");
});

Class-based Selectors

Select elements with specific class attributes:

Position-based Selectors

jQuery provides powerful selectors that target elements based on their position in the DOM:

Selector Type	Syntax	Description	Example
:first Selector	$("selector:first")	Selects the first matching element	$("p:first")
:last Selector	$("selector:last")	Selects the last matching element	$("li:last")
:even Selector	$("selector:even")	Selects even-indexed elements (0, 2, 4...)	$("tr:even")
:odd Selector	$("selector:odd")	Selects odd-indexed elements (1, 3, 5...)	$("tr:odd")
:first-child	$("selector:first-child")	Selects elements that are the first child of their parent	$("li:first-child")

Position Selector Demo

Select elements based on their position:

Programming Languages

Web Technologies

HTML
CSS
jQuery
React
Vue.js
Angular

// Select first item in each list
$("#selectFirst").click(function() {
  $("ul li:first-child").addClass("highlight");
});

// Select last item in each list
$("#selectLast").click(function() {
  $("ul li:last-child").addClass("highlight");
});

// Select even items (0-indexed: 0, 2, 4)
$("#selectEven").click(function() {
  $("ul li:even").addClass("targeted");
});

// Reset selection
$("#resetPosition").click(function() {
  $("ul li").removeClass("highlight targeted");
});

Selector Best Practices

Follow these guidelines to write efficient jQuery code:

Specificity Matters

Use the most specific selector possible to improve performance.

$("#main-nav li.active")

Cache Selectors

Store frequently used selectors in variables for reuse.

const $navItems = $(".nav-item");

Context is Key

Provide context to limit search scope and improve performance.

$("input", "#search-form")

Avoid Universal Selectors

Use $("*") sparingly as it can cause performance issues.

// Use with caution
$("*").css("color", "red");

Performance Tip: When working with large DOM structures, avoid using complex selectors in loops. Instead, cache your selections outside the loop for better performance.