Looking to get better at jQuery with hands-on practice? You’ve come to the right place. This post gives you 100 jQuery practice problems with clear, complete solutions. You’ll find simple tasks like selecting elements, handling clicks, and showing or hiding content, along with more advanced challenges using AJAX, animations, and form work.
Each problem is broken down so you can understand the code, try it yourself, and check the answer right away. Whether you’re just starting out with web development or preparing for a front-end interview, these jQuery exercises will help you write real code and build confidence. Pick a problem, start coding, and see how much you can learn.
Try it: 100 Javascript practice problems with solutions
1. Change the text of a paragraph with id “demo” to “Hello jQuery”.
javascript
$("#demo").text("Hello jQuery");
2. Hide a div with class “box” when a button with id “hideBtn” is clicked.
javascript
$("#hideBtn").click(function() {
$(".box").hide();
});
3. Show a hidden div with class “box” when a button with id “showBtn” is clicked.
javascript
$("#showBtn").click(function() {
$(".box").show();
});
4. Toggle the visibility of a div with id “toggleDiv” on button click.
javascript
$("#toggleBtn").click(function() {
$("#toggleDiv").toggle();
});
5. Change the background color of all paragraphs with class “highlight” to yellow.
javascript
$("p.highlight").css("background-color", "yellow");
6. Add a new class “big-text” to a heading with id “title”.
javascript
$("#title").addClass("big-text");
7. Remove the class “error” from all input fields.
javascript
$("input").removeClass("error");
8. Toggle a class “active” on a button when it is clicked.
javascript
$("button").click(function() {
$(this).toggleClass("active");
});
9. Get the value of an input with id “username” and display it in a console.
javascript
var val = $("#username").val();
console.log(val);
10. Set the value of an input with id “username” to “JohnDoe”.
javascript
$("#username").val("JohnDoe");
11. Append a new list item “Item 4” to an unordered list with id “myList”.
javascript
$("#myList").append("<li>Item 4</li>");
12. Prepend a new list item “Item 0” to the same list.
javascript
$("#myList").prepend("<li>Item 0</li>");
13. Remove the last list item from an unordered list.
javascript
$("#myList li:last").remove();
14. Empty all content inside a div with id “container”.
javascript
$("#container").empty();
15. Find the number of paragraphs on the page and display it in an alert.
javascript
alert($("p").length);
16. Make all links with target=”_blank” open in a new tab (already default, but example).
javascript
$("a[target='_blank']").attr("target", "_blank"); // just a demonstration
17. Disable all input fields of type “text” inside a form with id “myForm”.
javascript
$("#myForm input[type='text']").prop("disabled", true);
18. Enable all buttons that were disabled.
javascript
$("button").prop("disabled", false);
Try it: 100 HTML practice problems with solutions
19. Change the HTML content of a div with id “content” to “<strong>Important</strong>”.
javascript
$("#content").html("<strong>Important</strong>");
20. Fade out a div with id “message” slowly over 2 seconds.
javascript
$("#message").fadeOut(2000);
21. Fade in the same div after it is hidden.
javascript
$("#message").fadeIn(1000);
22. Slide up a paragraph with id “para”.
javascript
$("#para").slideUp();
23. Slide down the same paragraph after it is hidden.
javascript
$("#para").slideDown();
24. Slide toggle a div with id “panel” on button click.
javascript
$("#togglePanel").click(function() {
$("#panel").slideToggle();
});
25. Animate a div to move 200px to the right and increase width to 300px.
javascript
$("#animateDiv").animate({
left: "+=200",
width: 300
}, 1000);
26. Chain multiple animations: fade out, then change text, then fade in.
javascript
$("#chain").fadeOut(500, function() {
$(this).text("New Text").fadeIn(500);
});
27. Stop the current animation on a div when a button is clicked.
javascript
$("#stopBtn").click(function() {
$("#animatingDiv").stop();
});
28. Select all checkboxes inside a div with class “options” and check them.
javascript
$(".options input:checkbox").prop("checked", true);
29. Get the selected value from a dropdown with id “colorSelect”.
javascript
var selectedColor = $("#colorSelect").val();
30. Set the selected option of a dropdown to the second option.
javascript
$("#colorSelect option:eq(1)").prop("selected", true);
31. Add a new option “Green” to a dropdown with id “colorSelect”.
javascript
$("#colorSelect").append('<option value="green">Green</option>');
32. Remove all options from a dropdown.
javascript
$("#colorSelect").empty();
33. Bind a click event to all elements with class “item” and show their text.
javascript
$(".item").click(function() {
alert($(this).text());
});
34. Use event delegation to handle click on dynamically added .item elements.
javascript
$(document).on("click", ".item", function() {
alert($(this).text());
});
35. Prevent the default action of a link with class “external” when clicked.
javascript
$(".external").click(function(e) {
e.preventDefault();
alert("Link click prevented");
});
36. Get the value of a radio button group named “gender” (male/female).
javascript
var gender = $("input[name='gender']:checked").val();
37. Set the radio button with value “female” as checked.
javascript
$("input[name='gender'][value='female']").prop("checked", true);
38. Find all images with alt attribute starting with “logo” and add a border.
javascript
$("img[alt^='logo']").css("border", "2px solid red");
39. Find all elements that have a data attribute “data-id” with value greater than 10 (filter).
javascript
$("[data-id]").filter(function() {
return parseInt($(this).data("id")) > 10;
}).css("background", "lightgreen");
40. Use .each() to iterate over all list items and log their text.
javascript
$("li").each(function(index) {
console.log(index + ": " + $(this).text());
});
Try it: 100 Node.js practice problems with solutions
41. Use .map() to create an array of all paragraph texts.
javascript
var texts = $("p").map(function() {
return $(this).text();
}).get();
console.log(texts);
42. Get the parent of a specific element with id “child”.
javascript
var parent = $("#child").parent();
43. Find all children of a div with id “container” that are of type “span”.
javascript
$("#container").children("span");
44. Find the next sibling of an active list item and highlight it.
javascript
$(".active").next().css("background", "yellow");
45. Find the previous sibling of a list item with id “current”.
javascript
$("#current").prev().css("border", "1px solid black");
46. Find all siblings of a paragraph except itself.
javascript
$("p").siblings().css("font-style", "italic");
47. Find the closest ancestor with class “wrapper” from a nested span.
javascript
$("span").closest(".wrapper").css("outline", "1px solid gray");
48. Show the current scroll position of the window when scrolling.
javascript
$(window).scroll(function() {
console.log($(window).scrollTop());
});
49. Scroll to top of page when a button with id “topBtn” is clicked.
javascript
$("#topBtn").click(function() {
$("html, body").animate({ scrollTop: 0 }, 600);
});
50. Get the dimensions (width and height) of a div with id “box”.
javascript
var width = $("#box").width();
var height = $("#box").height();
console.log(width, height);
51. Set the width of a div to 50% of its parent’s width.
javascript
$("#responsiveDiv").width("50%");
52. Check if an element with id “exists” is present in the DOM.
javascript
if ($("#exists").length) {
console.log("Element exists");
}
53. Load external HTML content into a div with id “content” using AJAX.
javascript
$("#content").load("external.html");
54. Send a GET request to a JSON API and display the result.
javascript
$.get("https://jsonplaceholder.typicode.com/todos/1", function(data) {
$("#result").text(data.title);
});
55. Send a POST request with form data and handle response.
javascript
$.post("submit.php", { name: "John", age: 30 }, function(response) {
console.log(response);
});
56. Use $.ajax to fetch JSON with error handling.
javascript
$.ajax({
url: "data.json",
dataType: "json",
success: function(data) {
console.log(data);
},
error: function(xhr, status, error) {
console.error("Error: " + error);
}
});
57. Serialize a form with id “myForm” into a query string.
javascript
var formData = $("#myForm").serialize();
console.log(formData);
58. Serialize a form into an array of objects.
javascript
var formArray = $("#myForm").serializeArray();
console.log(formArray);
59. Set a cookie named “user” with value “John” that expires in 7 days.
javascript
$.cookie("user", "John", { expires: 7 }); // requires jQuery Cookie plugin; alternative: document.cookie
60. Read the value of cookie “user”.
javascript
var user = $.cookie("user");
console.log(user);
61. Delete cookie “user”.
javascript
$.removeCookie("user");
62. Use $.each to iterate over an array [1,2,3,4,5].
javascript
$.each([1,2,3,4,5], function(index, value) {
console.log(index + ": " + value);
});
63. Use $.extend to merge two objects.
javascript
var defaults = { color: "red", size: "M" };
var options = { size: "L", weight: 100 };
var settings = $.extend(defaults, options);
console.log(settings);
64. Use $.grep to filter an array of numbers to keep only even numbers.
javascript
var numbers = [1,2,3,4,5,6];
var evens = $.grep(numbers, function(n) { return n % 2 === 0; });
console.log(evens);
65. Use $.map to double each element in an array.
javascript
var doubled = $.map([1,2,3], function(n) { return n * 2; });
console.log(doubled);
66. Use $.inArray to find the index of an element in an array.
javascript
var idx = $.inArray(3, [1,2,3,4]); console.log(idx); // 2
67. Use $.isArray to check if a variable is an array.
javascript
console.log($.isArray([1,2])); // true
console.log($.isArray({})); // false
68. Use $.isFunction to check if a variable is a function.
javascript
function test() {}
console.log($.isFunction(test)); // true
69. Use $.isEmptyObject to check if an object has no properties.
javascript
console.log($.isEmptyObject({})); // true
console.log($.isEmptyObject({a:1})); // false
70. Use $.type to get the type of a value (better than typeof).
javascript
console.log($.type(42)); // "number" console.log($.type([])); // "array"
71. Use $.now() to get current timestamp in milliseconds.
javascript
var timestamp = $.now(); console.log(timestamp);
72. Use $.parseJSON to parse a JSON string (deprecated, use JSON.parse).
javascript
var obj = $.parseJSON('{"name":"John"}');
console.log(obj.name);
73. Use $.unique to remove duplicates from an array (only for DOM elements, but works on primitives in older versions).
javascript
var arr = [1,2,2,3]; var unique = $.unique(arr); console.log(unique);
74. Use $.when to execute a callback after multiple deferreds resolve.
javascript
var def1 = $.Deferred();
var def2 = $.Deferred();
$.when(def1, def2).done(function() {
console.log("Both done");
});
def1.resolve();
def2.resolve();
75. Create a custom jQuery plugin that adds a red border to selected elements.
javascript
$.fn.redBorder = function() {
return this.css("border", "2px solid red");
};
// Usage: $("div").redBorder();
76. Create a plugin that allows chaining (e.g., change background and font).
javascript
$.fn.styleMe = function(bgColor, textColor) {
return this.css("background-color", bgColor).css("color", textColor);
};
77. Use $.data to store custom data on a DOM element.
javascript
$("#myDiv").data("info", { id: 123, name: "test" });
var info = $("#myDiv").data("info");
console.log(info.name);
78. Remove data stored with $.data.
javascript
$("#myDiv").removeData("info");
79. Use $.proxy to fix the context of a function.
javascript
var obj = { name: "Alice", say: function() { console.log(this.name); } };
var func = $.proxy(obj.say, obj);
setTimeout(func, 1000);
80. Use $.noConflict to release the $ variable.
javascript
var jq = $.noConflict();
jq("div").hide(); // use jq instead of $
81. Check if the document is ready using jQuery.
javascript
$(document).ready(function() {
console.log("DOM ready");
});
// Shortcut:
$(function() {
console.log("Ready");
});
82. Detect when an image has finished loading.
javascript
$("#myImage").on("load", function() {
console.log("Image loaded");
});
83. Use $.error to throw a custom error (deprecated, but for legacy).
javascript
$.error("Something went wrong");
84. Use $.fn.extend to add multiple methods to jQuery prototype.
javascript
$.fn.extend({
highlight: function() {
return this.css("background", "yellow");
},
fade: function() {
return this.fadeOut();
}
});
85. Use $.ajaxSetup to set default AJAX options.
javascript
$.ajaxSetup({
timeout: 5000,
headers: { "X-Custom": "value" }
});
86. Use $.ajaxPrefilter to modify AJAX requests before they are sent.
javascript
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
options.url = "https://api.example.com/" + options.url;
});
87. Use $.Deferred to implement a custom async operation.
javascript
function wait(ms) {
var deferred = $.Deferred();
setTimeout(function() {
deferred.resolve();
}, ms);
return deferred.promise();
}
wait(1000).then(function() {
console.log("Waited 1 second");
});
88. Use $.when with a single deferred to simulate async.
javascript
var d = $.Deferred();
$.when(d).done(function() { console.log("Resolved"); });
d.resolve();
Try it: 100 TypeScript practice problems with solutions
89. Create a tooltip that appears on hover using jQuery.
javascript
$("[title]").hover(function() {
var title = $(this).attr("title");
$("<div class='tooltip'>" + title + "</div>").appendTo("body").css({
position: "absolute",
top: $(this).offset().top - 30,
left: $(this).offset().left
});
}, function() {
$(".tooltip").remove();
});
90. Make a draggable element using jQuery UI (mocking without UI).
javascript
// Basic drag using mousedown/mousemove
$("#draggable").on("mousedown", function(e) {
var startX = e.clientX, startY = e.clientY;
var startLeft = parseInt($(this).css("left"));
var startTop = parseInt($(this).css("top"));
$(document).on("mousemove.drag", function(e) {
var dx = e.clientX - startX;
var dy = e.clientY - startY;
$("#draggable").css({ left: startLeft + dx, top: startTop + dy });
});
$(document).on("mouseup.drag", function() {
$(document).off(".drag");
});
});
91. Create a sticky navigation bar that becomes fixed when scrolling past a point.
javascript
var navOffset = $("#navbar").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() >= navOffset) {
$("#navbar").addClass("fixed");
} else {
$("#navbar").removeClass("fixed");
}
});
92. Use $.param to serialize an object to a query string.
javascript
var obj = { name: "John", age: 30 };
var query = $.param(obj);
console.log(query); // name=John&age=30
93. Use $.parseHTML to parse an HTML string into DOM nodes.
javascript
var html = "<div>Hello</div>";
var nodes = $.parseHTML(html);
$("body").append(nodes);
94. Use $.contains to check if a DOM element contains another.
javascript
var parent = document.getElementById("parent");
var child = document.getElementById("child");
console.log($.contains(parent, child));
95. Use $.swap (legacy) to temporarily swap CSS for measurement (not commonly used).
javascript
// Example: $.swap(element, { display: "block" }, function() { ... });
96. Use $.fn.promise to wait for animations to complete.
javascript
$("#animDiv").slideUp(1000).promise().done(function() {
console.log("Animation finished");
});
97. Use $.fn.queue to add custom function to animation queue.
javascript
$("#box").slideUp().queue(function(next) {
$(this).text("Done").css("background", "red");
next();
}).slideDown();
98. Use $.fn.delay to delay execution of queued actions.
javascript
$("#message").show().delay(2000).hide();
99. Use $.fn.contents to get child nodes including text nodes.
javascript
$("#container").contents().filter(function() {
return this.nodeType === 3; // text nodes
}).wrap("<span class='highlight'></span>");
100. Use $.fn.end to revert to previous selection after chaining.
javascript
$("#container")
.find("p")
.css("color", "red")
.end()
.find("h2")
.css("background", "yellow");
Final Thought
One hundred jQuery problems — and you faced every single one with courage. That takes a brave heart. You didn’t hide from DOM manipulation or run from event handling. You stepped straight into the challenge, and now you stand taller, stronger, and fiercely capable.
The selector chains that once looked tangled now bend to your will. The animations, the AJAX calls, the form wizardry — you own them. jQuery might be the library veterans whisper about, but you proved you can handle any codebase, old or new, with steady hands and a sharp mind. You’re not just confident — you’re quietly unstoppable.
Carry this brave energy into every project. Old plugin needs fixing? You’ve got it. Legacy site needs love? You’re ready. You’ve moved past hoping you can do it — now you know you can. That’s real capability. That’s the confidence that catches every interviewer’s eye. Walk forward boldly. You are, without a doubt, a jQuery problem-solver now.