October 12, 2026

Introduction to jQuery Selectors

jQuery selectors are used to find and select HTML elements on a webpage. After selecting an element, you can change its text, modify CSS, hide or show content, handle events, and perform other operations.

For example, on a hotel website, you might want to change the text of a booking button, highlight a room card, or display an error message below a form field. jQuery selectors help you target the correct elements.

In this tutorial, you will learn the most important jQuery selectors with practical code examples.

1. What Are jQuery Selectors?

A jQuery selector identifies one or more HTML elements using their tag name, ID, class, attributes, or other conditions.

The basic syntax is:

$("selector").action();

Here:

• $() is the jQuery function.

• selector identifies the HTML element.

• action() performs an operation on the selected element.

Example:

$("p").hide();

This code selects all paragraph elements and hides them.

2. Element Selector in jQuery

The element selector selects HTML elements using their tag names, such as p, h1, div, or button.

Example: Hide All Paragraphs

<p>Welcome to our website.</p>
<p>Learn web development with practical examples.</p>

<button id="hideText">Hide Paragraphs</button>

<script>
$(function () {
    $("#hideText").click(function () {
        $("p").hide();
    });
});
</script>

How It Works

• $("p") selects every paragraph element.

• .hide() hides the selected paragraphs.

• Clicking the button triggers the action.

Practical use: Hide introductory text, collapse descriptions, or control multiple elements of the same type.

3. ID Selector in jQuery

The ID selector selects an element using its unique HTML id. It uses the hash symbol (#) before the ID name.

Example: Change a Heading

<h2 id="welcome">Welcome to Our Hotel</h2>

<button id="changeHeading">Change Heading</button>

<script>
$(function () {
    $("#changeHeading").click(function () {
        $("#welcome").text("Enjoy Your Stay!");
    });
});
</script>

How It Works

• #changeHeading selects the button.

• #welcome selects the heading.

• .text() changes the heading's text.

Practical use: Update a page title, display a status message, or change a specific booking button.

Remember: An ID should normally be unique within a webpage.

4. Class Selector in jQuery

The class selector selects elements using their CSS class names. It uses a dot (.) before the class name.

Example: Highlight Room Cards

<div class="room-card">Deluxe Room</div>
<div class="room-card">Executive Room</div>
<div class="room-card">Family Room</div>

<button id="highlightRooms">Highlight Rooms</button>

<style>
.room-card {
    padding: 12px;
    margin: 8px 0;
    border: 1px solid #ccc;
}
.highlight {
    background-color: #fff3cd;
    border-color: #e0a800;
}
</style>

<script>
$(function () {
    $("#highlightRooms").click(function () {
        $(".room-card").addClass("highlight");
    });
});
</script>

How It Works

• .room-card selects all elements with that class.

• .addClass("highlight") adds a CSS class to them.

• The CSS class changes the appearance of each room card.

Practical use: Highlight products, room cards, dashboard widgets, or selected items.

5. Universal Selector in jQuery

The universal selector (*) selects all elements within the selected document or context.

Example

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

This applies the specified font family to all selected elements.

Use the universal selector carefully because selecting every element can affect page performance and styling unexpectedly.

6. Group Selector in jQuery

The group selector lets you select multiple types of elements using a comma-separated list.

Example

<h2>Our Services</h2>
<p>Explore our hotel facilities.</p>
<button id="changeStyle">Change Style</button>

<script>
$(function () {
    $("#changeStyle").click(function () {
        $("h2, p").css("color", "#164e63");
    });
});
</script>

This changes the text color of all h2 and p elements.

Practical use: Apply a common style or operation to multiple types of elements.

7. Attribute Selector in jQuery

Attribute selectors target elements based on their HTML attributes or attribute values.

Example: Select Required Fields

<input type="text" name="guestName" required>
<input type="email" name="guestEmail" required>
<input type="text" name="optionalNote">

<button id="markRequired">Highlight Required Fields</button>

<script>
$(function () {
    $("#markRequired").click(function () {
        $("[required]").css("border", "2px solid #dc3545");
    });
});
</script>

How It Works

• [required] selects elements that have the required attribute.

• .css() changes their border style.

Other examples include:

$("[type='email']");
$("[name='guestName']");
$("input[required]");

These selectors are useful when working with registration forms, booking forms, and contact forms.

8. The this Selector in jQuery

The this keyword refers to the current element associated with an event handler. In jQuery, $(this) wraps that element so you can use jQuery methods on it.

Example: Change Only the Clicked Button

<button class="bookBtn">Book Deluxe Room</button>
<button class="bookBtn">Book Family Room</button>

<script>
$(function () {
    $(".bookBtn").click(function () {
        $(this).text("Selected");
    });
});
</script>

When a visitor clicks one button, only that button's text changes.

Practical use: Product buttons, room selection, remove buttons, and interactive lists.

9. Descendant Selector in jQuery

The descendant selector selects elements located anywhere inside another element.

Example

<div class="room-card">
    <h3>Deluxe Room</h3>
    <p>Air conditioning and Wi-Fi included.</p>
</div>

<script>
$(".room-card p").css("color", "#164e63");
</script>

The selector .room-card p targets paragraph elements inside elements with the room-card class.

It does not select paragraphs outside those cards.

10. Child Selector in jQuery

The child selector (>) selects only direct children of a parent element.

Example

<div class="room-card">
    <p>Direct child paragraph</p>

    <div>
        <p>Nested paragraph</p>
    </div>
</div>

<script>
$(".room-card > p").css("font-weight", "bold");
</script>

Only the direct paragraph child is selected. The paragraph inside the nested div is not selected by this selector.

11. Multiple Selectors with Practical Examples

You can combine selectors to target specific elements.

$("#bookingForm input");
$(".room-card h3");
$("button[type='submit']");
$("div.room-card");

These examples select:

• Inputs inside the element with ID bookingForm.

• Headings inside room cards.

• Submit buttons.

• div elements with the class room-card.

Combining selectors helps you target the right elements without changing unrelated content.

12. Complete Practical Project: Highlight a Selected Room

This project demonstrates ID, class, and this selectors in one small interface.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Selectors Practical Example</title>

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

    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 40px auto;
            padding: 20px;
        }

        .room-card {
            padding: 16px;
            margin-bottom: 12px;
            border: 1px solid #ccc;
            border-radius: 8px;
        }

        .selected {
            background: #e6f4ea;
            border: 2px solid #198754;
        }

        button {
            padding: 8px 12px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h1 id="pageTitle">Choose Your Room</h1>

    <div class="room-card">
        <h2>Deluxe Room</h2>
        <p>₹2,500 per night</p>
        <button type="button" class="selectRoom">Select Room</button>
    </div>

    <div class="room-card">
        <h2>Family Room</h2>
        <p>₹3,500 per night</p>
        <button type="button" class="selectRoom">Select Room</button>
    </div>

    <p id="status" aria-live="polite">No room selected.</p>

    <script>
        $(function () {
            $(".selectRoom").click(function () {
                const roomCard = $(this).closest(".room-card");
                const roomName = roomCard.find("h2").text();

                $(".room-card").removeClass("selected");
                roomCard.addClass("selected");

                $("#status").text(roomName + " selected.");
            });
        });
    </script>

</body>
</html>

What You Learn

• #pageTitle demonstrates an ID selector.

• .room-card demonstrates a class selector.

• .selectRoom selects the room buttons.

• $(this) identifies the clicked button.

• .closest(".room-card") finds its nearest room card.

• .find("h2") gets the room name within that card.

• .removeClass() and .addClass() update the selected room's styling.

This is a front-end selection demonstration. A real booking system must also verify availability and save reservations on the server.

13. Common jQuery Selector Mistakes

Using the Wrong Symbol

$("#room");   // Selects an ID
$(".room");   // Selects a class
$("p");       // Selects paragraph elements

Use the selector that matches the HTML.

Forgetting to Load jQuery

If the jQuery library has not loaded, $ may be undefined. Ensure the library is loaded before executing your jQuery code.

Reusing an ID

IDs should be unique. Use classes when multiple elements need the same behavior or styling.

Selecting Too Many Elements

Broad selectors such as * can affect the whole page. Prefer specific selectors when possible.

14. Frequently Asked Questions

What is a jQuery selector?

A jQuery selector identifies HTML elements so you can modify them, handle their events, or retrieve their content.

What is the difference between ID and class selectors?

An ID selector uses # and normally targets one unique element. A class selector uses . and can target multiple elements.

Can jQuery select elements by attribute?

Yes. For example, $("[required]") selects elements with the required attribute.

What does $(this) mean in jQuery?

It wraps the current element in a jQuery object, allowing you to use methods such as .text(), .hide(), and .addClass() on it.

Are jQuery selectors similar to CSS selectors?

Yes. Many jQuery selectors use familiar CSS selector syntax, including ID, class, attribute, descendant, and child selectors.

Conclusion

jQuery selectors are a fundamental part of learning jQuery. They allow you to target HTML elements precisely and build interactive features for websites, forms, product pages, and admin dashboards.

Start by practising element, ID, class, and attribute selectors. Then move on to descendant selectors, child selectors, and event handling.