October 12, 2026

Introduction to jQuery, its features, syntax, installation, and practical applications

jQuery is a popular JavaScript library that simplifies common web development tasks such as handling events, manipulating HTML elements, changing CSS styles, creating animations, and sending AJAX requests. It helps developers write concise code for interactive website features.

For example, an e-commerce website may use jQuery to display product details when a visitor clicks a button. A hotel website may use it to show room information, while an admin dashboard may use it to display form validation messages without reloading the page.

In this tutorial, you will learn the fundamentals of jQuery, understand how it works, and build practical examples that you can run in your browser.

1. What Is jQuery?

jQuery is a lightweight, open-source JavaScript library designed to make common JavaScript operations easier. It provides a simple syntax for selecting HTML elements, responding to user actions, updating page content, applying effects, and communicating with a server.

Instead of writing lengthy code for certain DOM operations, developers can use convenient jQuery methods.

For example, suppose you want to hide a message on a webpage.

Using JavaScript:

document.querySelector("#message").style.display = "none";

Using jQuery:

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

Both examples hide the element with the ID message. The jQuery version uses a shorter method.

It is important to understand that jQuery does not replace JavaScript. It is a library built on JavaScript.

2. Why Is jQuery Used in Web Development?

Websites often need to respond to user actions without navigating to another page. jQuery provides convenient methods for implementing many of these interactions.

Common applications include:

• Interactive forms: Display validation messages when required fields are empty.

• Product pages: Show additional product information or update interface elements.

• Hotel websites: Expand room descriptions, open menus, and manage booking form interactions.

• Admin dashboards: Respond to button clicks and update table content.

• Animations: Create fade and slide effects for menus, alerts, and panels.

• AJAX requests: Retrieve or submit data without a full-page reload.

For example, when a visitor clicks “View Room Details” on a hotel website, jQuery can reveal the room's amenities directly on the same page.

3. Key Features of jQuery

Simple Syntax

jQuery provides concise methods for common tasks such as selecting elements and changing their content.

HTML and DOM Manipulation

You can update text, HTML content, attributes, and elements dynamically.

Event Handling

You can respond to user actions such as clicks, form submissions, keyboard input, and changes to form fields.

Effects and Animations

Methods such as hide(), show(), fadeIn(), and slideUp() help create visual effects.

AJAX Support

jQuery provides methods for making asynchronous HTTP requests and handling server responses.

Cross-Browser Compatibility

jQuery helps manage many browser differences, although modern browsers and JavaScript APIs have reduced the need for it in new applications.

4. How to Install jQuery

You can add jQuery to an HTML page using a CDN or by hosting the library locally.

Method 1: Using the jQuery CDN

Add the following script tag to your HTML document:

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

This loads jQuery 3.7.1 from the official jQuery CDN.

For a reliable production setup, use a currently supported release and follow the official documentation. You can also use Subresource Integrity where applicable.

Method 2: Using a Local File

Download the jQuery library and save it in your project directory.

Example project structure:

jquery-project/
├── index.html
└── js/
    └── jquery.min.js

Load the local file using:

<script src="js/jquery.min.js"></script>

A local copy is useful when you want to host the dependency yourself or need the library to work without a third-party CDN.

5. Understanding jQuery Syntax

The basic jQuery syntax is:

$(selector).action();

Here is what each part means:

• $ represents the jQuery function.

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

• action() is the method that performs an operation.

Consider these examples:

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

$(".product-card").show();

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

The first statement hides the element with the ID message. The second shows elements with the class product-card. The third changes the text color of paragraph elements to blue.

You will learn selectors in detail in Module 2.

6. Your First jQuery Program

Let's create a simple webpage where a button changes a heading when clicked.

Complete HTML Code

Save the following code as index.html and open it in a browser with an internet connection.

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

    <title>My First jQuery Program</title>

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

    <h1 id="message">Welcome to Our Website</h1>

    <button type="button" id="changeBtn">
        Get Started
    </button>

    <script>
        $(document).ready(function () {

            $("#changeBtn").click(function () {
                $("#message").text("Welcome! You are learning jQuery.");
            });

        });
    </script>

</body>
</html>

How It Works

1. The browser loads the HTML document and jQuery library.

2. $(document).ready() runs the callback when the DOM is ready.

3. $("#changeBtn") selects the button.

4. .click() registers a function that runs when the button is clicked.

5. $("#message").text() changes the heading text.

Expected result: Clicking the “Get Started” button changes the heading without reloading the webpage.

7. Practical Project: Show and Hide Room Details

Let's build a small feature for a hotel website. Visitors can expand a room card to view its amenities.

HTML and jQuery

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

    <title>Hotel Room Details</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;
            background: #f5f6fa;
        }

        .room-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            border: 1px solid #ddd;
        }

        button {
            padding: 10px 16px;
            background: #164e63;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #roomDetails {
            display: none;
            margin-top: 15px;
            line-height: 1.7;
        }
    </style>
</head>
<body>

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

        <p>Starting from ₹2,500 per night</p>

        <button type="button" id="viewRoom" aria-expanded="false">
            View Details
        </button>

        <div id="roomDetails">
            <h3>Room Amenities</h3>
            <ul>
                <li>Air conditioning</li>
                <li>Complimentary Wi-Fi</li>
                <li>Television</li>
                <li>Room service</li>
            </ul>
        </div>
    </div>

    <script>
        $(document).ready(function () {

            $("#viewRoom").click(function () {
                const button = $(this);
                const isExpanded =
                    button.attr("aria-expanded") === "true";

                $("#roomDetails").stop(true, true).slideToggle();

                button.attr("aria-expanded", String(!isExpanded));

                button.text(
                    isExpanded ? "View Details" : "Hide Details"
                );
            });

        });
    </script>

</body>
</html>

What You Learn from This Project

• How to respond to button clicks.

• How to show and hide content.

• How to use the slideToggle() effect.

• How to change button text dynamically.

• How to update an accessibility attribute.

This pattern can also be used for FAQs, product descriptions, service details, and dashboard panels.

8. Understanding Document Ready

When a browser loads a webpage, the HTML is parsed to create the Document Object Model (DOM). jQuery code that tries to select an element before it exists may not behave as expected.

The following pattern waits until the DOM is ready:

$(document).ready(function () {
    // Write jQuery code here
});

A shorter equivalent is:

$(function () {
    // Write jQuery code here
});

Use either pattern when your script may execute before the relevant HTML elements have been parsed.

9. Advantages and Limitations of jQuery

Advantages

• Concise syntax for common DOM operations.

• Convenient event handling.

• Built-in animation methods.

• Useful AJAX utilities.

• Helpful for maintaining existing jQuery-based applications.

Limitations

• Adds a library dependency to your project.

• Some features are already available through modern JavaScript.

• Developers still need to understand JavaScript fundamentals.

• Older plugins may contain compatibility or security issues.

For new applications, compare jQuery with native JavaScript and choose the simplest suitable approach.

10. Frequently Asked Questions

Is jQuery a programming language?

No. jQuery is a JavaScript library that simplifies common web development operations.

Do I need to learn JavaScript before jQuery?

Basic knowledge of JavaScript, HTML, and CSS is recommended. It will help you understand how jQuery works and debug problems more easily.

Can I use jQuery with PHP?

Yes. jQuery can send HTTP requests to PHP scripts, display responses, and update page content dynamically.

Can jQuery be used with CodeIgniter 4?

Yes. You can use jQuery in CodeIgniter 4 views for form interactions, client-side validation, AJAX requests, and dynamic interfaces. Server-side validation and authorization must still be implemented in PHP.

Is jQuery still relevant?

Yes. jQuery remains useful in many existing websites and applications. For new projects, modern JavaScript may be sufficient, depending on the requirements.

Is jQuery free?

Yes. jQuery is open-source software distributed under the MIT License.

Conclusion

jQuery makes many common website interactions easier to implement. By learning its syntax, installation methods, event handling, and basic effects, you can begin creating interactive features for business websites and web applications.

Practice the examples in this tutorial before moving on to more advanced topics.