Introduction to jQuery Selectors

jQuery selectors are an important part of learning jQuery. Before changing text, applying CSS, hiding elements or responding to button clicks, you need to identify the HTML elements you want to work with.

This is where jQuery selectors are used.

A selector helps you find specific HTML elements on a webpage. You can select elements using their ID, class, tag name, attributes or relationship with other elements.

For example, suppose you have a webpage containing multiple buttons, headings, paragraphs and product cards. If you want to change the color of all paragraphs but update only one heading, jQuery selectors help you target the correct elements.

In this tutorial, you will learn the most commonly used jQuery selectors with syntax, complete code examples, explanations and practice exercises.

What Are jQuery Selectors?

A jQuery selector is an expression used to find one or more HTML elements in a webpage.

jQuery uses CSS-style selector syntax, so developers familiar with CSS can understand many selectors easily.

Basic Syntax

$(selector);

Here:

• $ is the jQuery function.

• selector identifies the HTML element or elements you want to select.

For example:

$("#heading");
$(".box");
$("p");

These statements select an element by ID, elements by class and all paragraph elements, respectively.

Important: A selector identifies elements. To change or manipulate them, you need to use a jQuery method such as text(), css(), hide() or show().

1. ID Selector in jQuery

The ID selector is used to select an HTML element by its unique ID.

In jQuery, the # symbol identifies an ID selector.

Syntax

$("#elementId");

Example

Welcome to My Website

Change Heading

Output

Initially, the heading displays:

Welcome to My Website

After clicking the button, it changes to:

Welcome to jQuery!

Explanation

• #changeButton selects the button.

• on("click", ...) registers a click event.

• #heading selects the heading.

• text() changes the heading's text.

When Should You Use an ID Selector?

Use an ID selector when you want to target a particular element, such as a page heading, message box or submit button.

Remember that IDs should be unique within an HTML document.

2. Class Selector in jQuery

The class selector selects elements that share the same CSS class.

In jQuery, the . symbol identifies a class selector.

Syntax

$(".className");

Example

First message

Second message

Third message

Change Color

Output

When you click the button, all three paragraphs change their text color to blue.

Explanation

The .message selector matches all elements containing the class message.

The css() method then applies the specified color to every matched element.

When Should You Use a Class Selector?

Class selectors are useful when you want to apply the same operation to multiple elements, such as product cards, menu items, notification messages or buttons.

3. Element Selector in jQuery

An element selector selects HTML elements by their tag names.

You do not need to use # or . for this selector.

Syntax

$("tagName");

Example

First paragraph

Second paragraph

Third paragraph

Highlight Paragraphs

Output

Clicking the button applies a light-yellow background to all paragraph elements.

Common Element Selectors

$("h1");
$("h2");
$("p");
$("button");
$("input");
$("div");

Each selector targets elements with the corresponding HTML tag.

When Should You Use an Element Selector?

Use an element selector when you want to select all elements of a particular type, such as every paragraph or every heading of a specified level.

4. Universal Selector in jQuery

The universal selector selects all elements in the document.

It uses the * symbol.

Syntax

$("*");

Example

$("*").css("font-family", "Arial");

This example applies the specified font family to all selected elements.

Important Note

The universal selector can match a large number of elements. Use it carefully, particularly when performing frequent operations on complex pages.

5. Group Selector in jQuery

A group selector lets you select multiple types of elements using one selector expression.

Separate the selectors with commas.

Syntax

$("selector1, selector2, selector3");

Example

Our Products

Choose your favourite product.

Shop Now

Output

The heading, paragraph and button text receive the specified text color.

Explanation

The selector h2, p, button matches all three element types.

When Should You Use a Group Selector?

Use it when the same operation needs to be applied to different types of elements.

6. Attribute Selector in jQuery

Attribute selectors identify elements based on the presence or value of an HTML attribute.

They use square brackets.

Example 1: Select Text Inputs

$("input[type='text']");

This selects input elements whose type attribute is text.

Example 2: Select Required Fields

$("input[required]").css("border", "2px solid red");

The required input receives a red border.

Example 3: Select an Element by Attribute Value

$("input[name='username']");

This selects the input whose name attribute is username.

Common Attribute Selectors

$("a[href]");
$("input[required]");
$("input[type='email']");
$("input[name='username']");

These selectors can help you target links, required fields and particular input elements.

7. Descendant Selector in jQuery

A descendant selector selects elements located anywhere inside another element.

Syntax

$("parent child");

There is a space between the parent and child selectors.

Example

First paragraph

Nested paragraph

Outside paragraph

$(".container p").css("color", "blue");

Output

Both paragraphs inside .container turn blue. The paragraph outside the container remains unchanged.

Explanation

The selector .container p matches every paragraph that is a descendant of an element with the class container, including paragraphs nested inside other elements.

8. Child Selector in jQuery

The child selector selects only the direct children of a particular element.

Syntax

$("parent > child");

The > symbol represents a direct parent-child relationship.

Example

Direct child paragraph

Nested paragraph

$(".container > p").css("color", "green");

Output

Only the direct child paragraph turns green. The nested paragraph inside the section is not selected.

Difference Between Descendant and Child Selectors

• .container p selects all descendant paragraphs.

• .container > p selects only direct child paragraphs.

Understanding this difference helps you target elements accurately.

9. First and Last Selectors

jQuery provides positional selectors that can select the first or last matched element.

First Selector

$("p:first").css("color", "red");

This selects the first paragraph in the matched document selection.

Last Selector

$("p:last").css("color", "blue");

This selects the last paragraph in the matched document selection.

Example

First paragraph

Second paragraph

Third paragraph

If you apply the examples above, the first paragraph becomes red and the last paragraph becomes blue.

Note: The :first and :last selectors are jQuery extensions, not standard CSS selectors.

10. Form Selectors in jQuery

Form selectors help you identify input fields and other form controls.

They are especially useful when building registration forms, login pages and contact forms.

Select All Input Elements

$(":input");

This selects form controls supported by jQuery's :input selector, including input elements, textareas, selects and buttons.

Select Text Inputs

$("input:text");

This selects text input elements.

Select Checked Checkboxes

$("input[type='checkbox']:checked");

This selects checkboxes that are currently checked.

Select Selected Options

$("select option:selected");

This selects the currently selected option elements in a select control.

Practical Example

    
    I accept the terms and conditions
Check Agreement

Output

• If the checkbox is checked, the browser displays Terms accepted.

• If the checkbox is unchecked, the browser displays Please accept the terms.

Explanation

The is(":checked") expression checks whether the selected checkbox is currently checked.

11. Multiple Class Selector

You can select elements that contain more than one class by combining class names.

Example

Featured Product

Regular Product

$(".card.featured").css("border", "2px solid green");

Output

Only the first card receives a green border because it has both the card and featured classes.

Important: There is no space between .card and .featured.

Compare these selectors:

• .card.featured selects elements with both classes.

• .card .featured selects elements with class featured that are descendants of an element with class card.

12. How to Combine jQuery Selectors

You can combine selectors to target elements more precisely.

Example

Laptop

₹45,000

Mobile

₹20,000

$(".product .price").css("color", "green");

This selects all elements with class price that are descendants of elements with class product.

The price text in both product cards becomes green.

Complete Practical Example: Working with Different Selectors

The following example demonstrates ID, class, element and attribute selectors in one HTML file.

jQuery Selectors Example

jQuery Selectors

First message

Second message

What Will Happen?

1. Clicking Change Heading changes the heading text.

2. Clicking Change Paragraphs changes the color of both paragraphs.

3. Clicking Highlight Input adds a green border to the username field.

This example shows how different selectors can target different elements on the same webpage.

Common Mistakes When Using jQuery Selectors

1. Using the Wrong Symbol

Use # for an ID selector and . for a class selector.

$("#heading");
$(".message");

2. Incorrect ID or Class Name

If the selector does not match the HTML, the expected operation may not happen.

Check spelling and make sure the element exists.

3. Forgetting to Load jQuery

If jQuery has not loaded, the browser may show an error such as $ is not defined.

Load the jQuery library before your own jQuery code.

4. Confusing Direct Children with Descendants

A space selects descendants, while > selects direct children.

$(".container p");
$(".container > p");

These selectors do not necessarily match the same elements.

5. Selecting Too Many Elements

Using a broad selector may affect more elements than intended.

Prefer specific selectors when working with complex pages.

Frequently Asked Questions About jQuery Selectors

What is a selector in jQuery?

A selector identifies one or more HTML elements so you can apply jQuery methods to them.

What is the difference between ID and class selectors?

An ID selector uses # and normally targets one uniquely identified element. A class selector uses . and can match multiple elements.

Which symbol is used for a class selector in jQuery?

The dot symbol (.) is used for a class selector.

How do you select all paragraphs in jQuery?

Use $("p") to select all paragraph elements.

How do you select an element by ID?

Use $("#elementId").

How do you select elements by attribute?

Use square brackets, such as $("input[type='email']").

What is the difference between $("div p") and $("div > p")?

The first selects all descendant paragraphs inside a div. The second selects only paragraphs that are direct children of a div.

Can jQuery select multiple elements at once?

Yes. A selector such as $(".message") can select every element with the specified class.

Practice Exercises

Complete these exercises to test your understanding.

1. Select an element with the ID header and change its text.

2. Select all elements with the class box and change their background color.

3. Select all h2 elements and change their text color.

4. Select all email inputs using an attribute selector.

5. Select only the direct paragraph children of a div.

6. Select all checked checkboxes.

7. Select elements that have both the card and active classes.

Quiz: Test Your Knowledge

Question 1: Which symbol is used for an ID selector?

A. .
B. #
C. *
D. @

Question 2: Which selector selects all paragraph elements?

A. $(".p")
B. $("#p")
C. $("p")
D. $("paragraph")

Question 3: Which selector targets text inputs?

A. $("input[type='text']")
B. $("#text")
C. $(".input")
D. $("text")

Question 4: Which selector targets only direct child paragraphs?

A. $("div p")
B. $("div > p")
C. $("div + p")
D. $("div ~ p")

Answer Key: 1-B, 2-C, 3-A, 4-B.

Conclusion

jQuery selectors allow you to identify HTML elements accurately before performing operations on them. In this tutorial, you learned ID, class, element, universal, group, attribute, descendant, child, positional and form selectors.

Practice these selectors with small HTML examples until you can identify the correct selector for each task.