Basic jQuery Interview Questions
In this page:
What is jQuery?
jQuery is a JavaScript library that wraps common DOM tasks — selecting elements, changing them, handling events, and animating — behind a shorter, more consistent API than working with the raw DOM directly. It became popular in large part because it smoothed over inconsistencies between different browsers' native APIs.
Example: What is jQuery?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text">Text</p>
<script>
$("#text").css("color", "blue");
</script>
</body>
</html>Selectors and DOM
Selectors are how you find the elements you want to work with, and jQuery's $() function accepts the same syntax as CSS selectors — by ID, class, tag name, attribute, or more complex combinations — returning a jQuery object wrapping whatever matches.
Example: Selectors and DOM
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p class="item">One</p>
<script>
console.log($(".item").length);
</script>
</body>
</html>Events
jQuery provides dedicated event methods like .click() and .hover(), as well as the general-purpose .on() method for binding any event type, including ones added dynamically through delegation. Events are what let a page respond as users interact with it — clicking, typing, hovering, and so on.
Example: Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
$("#btn").on("click", function() {
console.log("Clicked");
});
</script>
</body>
</html>Effects
jQuery includes simple built-in effects such as .hide(), .show(), .fadeIn(), and .slideDown(), which animate an element's visibility or size without you needing to write custom animation logic. These cover many of the basic transitions used throughout typical interface design.
Example: Effects
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Box</div>
<button id="btn">Run Effect</button>
<script>
$("#btn").on("click", function() {
$("#box").hide().fadeIn(500);
});
</script>
</body>
</html>AJAX
jQuery's AJAX methods make asynchronous HTTP requests to a server without reloading the page. The common shortcuts $.get() and $.post() cover the two most frequent cases, while $.ajax() gives full control over headers, timeouts, and other request options when the shortcuts aren't flexible enough.
Example: AJAX
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.get("data.php", function(data) { console.log(data); });
</script>
</body>
</html>Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: