jQuery Exercises

Use these exercises to practice selectors, CSS classes, show/hide methods, text areas, events, forms, sessions and jQuery UI. Try each exercise before opening the solution.

CSS and Shared Styles Top ↑

1. Assign font size, font family and background color to a paragraph.
2. Apply the same class to three paragraphs.
3. Move the reusable style into a common CSS file.

CSS solution →

Selectors and Click Events Top ↑

1. Show a welcome message when a button is clicked.
2. Give five text inputs the same class and highlight whichever input is clicked.
3. Remove one class and add another.
4. Toggle two visual states on click.
5. Copy textbox text onto a button.

Selector solution →

show(), hide() and toggle() Top ↑

1. Insert a welcome message into a div.
2. Apply the same background to two divs.
3. Show and hide a div using separate buttons.
4. Toggle a div with one button.
5. Display a name inside a div when a button is clicked.

Show/hide solution →

Textarea Counter and Progress Top ↑

1. Show textarea length after a button click.
2. Update the count while text is entered.
3. Represent the count with a Progressbar.

Textarea solution →

Event Management and Calculator Top ↑

1. Add an error class on blur when a numeric value exceeds 10.
2. Build +, −, × and ÷ buttons for two numeric inputs.
3. Keep operation buttons disabled until both inputs contain values.

Event solution →

AJAX Login and Sessions Top ↑

1. Submit user ID and password with jQuery without reloading the page.
2. Show an error style for an invalid login and a welcome state for a valid login.
3. Create a session after a valid login, protect a member page, then implement logout.

Member/login solution →

Related reading: PHP sessions.

jQuery UI Challenge Top ↑

Interlock a Spinner with a Progressbar so changing the Spinner changes the Progressbar value.

Spinner · Progressbar

Dependent Dropdown Challenge Top ↑

Build Country → State → City linked dropdowns.

Demo: three linked dropdowns →

Additional Original Learning Routes Top ↑

• show-hide.php
• toggle.php

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: