60 jQuery exercises

Tags

Here’s a list of 60 jQuery exercises, categorized by difficulty and functionality.

Basic jQuery Exercises

  1. Include a jQuery file in an HTML document and verify functionality with console.log.
  2. Change the text of a <p> tag on a button click.
  3. Hide and show a <div> using jQuery hide() and show().
  4. Toggle the visibility of an element using toggle().
  5. Add a class to an element on button click using addClass().
  6. Remove a class from an element on button click using removeClass().
  7. Append a <li> to a <ul> dynamically.
  8. Prepend a new <li> to a list.
  9. Create a simple fade-in effect on an image.
  10. Create a fade-out effect on a <div>.

Selectors and Events

  1. Select all <p> tags and change their text color to red.
  2. Select the first <li> in an ordered list and underline it.
  3. Select the last <li> in an unordered list and change its font size.
  4. Add an event listener to a button that logs “Button clicked!”.
  5. Change the background color of all even rows in a table.
  6. Toggle the visibility of all <img> tags when clicked.
  7. Count the number of <div> elements on the page and display the count.
  8. Display the text of a <span> when it is clicked.
  9. Highlight the text of an input field when it gains focus.
  10. Remove the highlight from an input field when it loses focus.

Manipulating DOM Elements

  1. Insert text before an element using before().
  2. Insert text after an element using after().
  3. Replace the text of a <h1> tag dynamically.
  4. Clone a <div> and append the copy to the body.
  5. Wrap a <span> around all <p> tags on the page.
  6. Remove an element from the DOM when a button is clicked.
  7. Detach an element and re-attach it on another button click.
  8. Append a new row to a table dynamically.
  9. Add a placeholder text to an input field.
  10. Create a new element dynamically and add it to the page.

CSS and Animation

  1. Change the width of a <div> to 300px on button click.
  2. Increase the height of a <div> over 2 seconds using animate().
  3. Change the font size of a paragraph using css().
  4. Create a sliding effect using slideUp().
  5. Create a sliding effect using slideDown().
  6. Create a toggle sliding effect using slideToggle().
  7. Animate a circle moving 200px to the right.
  8. Create a fade effect with fadeToggle().
  9. Change the opacity of an image dynamically.
  10. Rotate a <div> on button click.

Form Handling

  1. Display the value of an input field when the user presses Enter.
  2. Clear the value of an input field on button click.
  3. Validate that an input field is not empty.
  4. Count the characters entered in a textarea and display the count.
  5. Enable or disable a button based on a checkbox toggle.
  6. Populate a dropdown dynamically from a JavaScript array.
  7. Display the selected value from a dropdown menu.
  8. Create a dynamic search filter for a list of items.
  9. Auto-fill an address form based on a dropdown selection.
  10. Prevent form submission if certain fields are empty.

Advanced jQuery Exercises

  1. Fetch JSON data using $.getJSON() and display it in a table.
  2. Create an accordion-style menu using slideToggle().
  3. Build a dynamic image carousel using fadeIn() and fadeOut().
  4. Implement infinite scrolling for a list of items.
  5. Add a loading spinner while fetching data from a server.
  6. Create a sticky navigation bar that stays fixed on scroll.
  7. Validate an email address using a regular expression.
  8. Implement drag-and-drop functionality with jQuery UI.
  9. Create a sortable list using jQuery UI.
  10. Build a custom tooltip that appears on hover.

Bonus Suggestions

You can extend these exercises by adding:

  • Combining effects, like fading and sliding together.
  • Using Ajax to load content into a <div> dynamically.
  • Building small interactive applications like a calculator or a to-do list.
LinkedIn Reddit