jQuery Tutorial

jQuery is a JavaScript library that gives you concise methods for selecting HTML elements, responding to events, changing content and styles, creating effects, and working with AJAX. It is still useful on sites that already use jQuery and for learning how many existing web interfaces are built.

If you are starting today, use the full jQuery build when you need AJAX or jQuery effects. The current release at the time of this update is jQuery 4.0.0. You can also check the official jQuery download page for the latest release.

Load jQuery on a Page Top ↑

Load the jQuery library before code that uses $(). A CDN is convenient because you do not have to host the library file yourself.

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

For local hosting, download the production file from jQuery and serve it from your own site. The minified file is normally used in production; the uncompressed file is easier to inspect while learning or debugging.

Copy a complete starter HTML page with jQuery or jQuery UI.

Basic jQuery Syntax Top ↑

The short ready handler runs after the page DOM is ready:

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

A jQuery expression commonly starts with a selector and then calls a method:

$("#message").hide();
$(".notice").show();
$("p").toggle();
$(this).hide();

Try a Small jQuery Example Top ↑

The first example uses the same class on two buttons, so one event handler works for both. The second uses an ID to control one specific element.

$(function () {
    $(".jq-class-demo").on("click", function () {
        $("#jq-class-result").text("A button with this class was clicked.");
    });
});

$("#jq-toggle-button").on("click", function () {
    $("#jq-toggle-box").toggle();
});

Choose a jQuery Topic Top ↑

Getting Started

Begin with a copyable page structure and then learn how reusable JavaScript functions work with jQuery event handlers.

Basic jQuery structure · Functions used with jQuery

Events

Learn click, focus, blur, keyboard, mouse, resize, scroll and related event handling patterns.

jQuery Events · Click event · Keyboard events

Effects and Animation

Show, hide, fade, slide and animate elements, then explore the extended effect collection.

jQuery Effects · Show and hide · Animation

Forms and Input Controls

Read and validate form values, manage checkboxes and radio buttons, serialize form data and work with list boxes.

Form validation · Checkboxes · List boxes and dropdowns

AJAX and Data

Load remote content and exchange data using GET, POST and JSON-based requests.

load() · HTTP GET · HTTP POST · getJSON()

Membership and Authentication

Follow the complete account lifecycle from signup and password hashing through email verification, login, protected sessions and logout.

Membership & Authentication Tutorials · Signup · Login

jQuery UI

Add widgets and interactions such as date pickers, accordions, dialogs, draggable elements, progress bars and autocomplete.

jQuery UI Tutorials · Date Picker · Autocomplete

Bootstrap Examples

Explore the older Bootstrap-related examples in this section. These pages are being reviewed separately because the collection spans more than one Bootstrap generation.

Bootstrap tutorials · Bootstrap 4 examples

Practice

Use the exercise pages to practise selectors, events, effects and form interactions.

jQuery Exercises

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: