Question 1

What is jQuery and how does it differ from plain JavaScript?

Accepted Answer

jQuery is a fast, lightweight JavaScript library that simplifies DOM manipulation, event handling, animations, and AJAX. It provides a concise syntax ($() selector), handles cross-browser inconsistencies, and reduces boilerplate code. While modern JavaScript (ES6+) has closed many gaps, jQuery remains useful for legacy projects and rapid prototyping.

Question 2

What is the purpose of $(document).ready()?

Accepted Answer

$(document).ready() ensures code runs only after the DOM is fully loaded and ready for manipulation, but before images and other resources finish loading. This prevents errors from accessing elements that don't exist yet. Shorthand: $(function() { }). In modern JavaScript, DOMContentLoaded event or placing scripts at body end achieves the same result.

Question 3

What does the $ symbol mean in jQuery?

Accepted Answer

$ is an alias for the jQuery function—they're identical. $(selector) creates a jQuery object wrapping matched DOM elements, enabling jQuery methods. If another library uses $, use jQuery.noConflict() to release $ and use 'jQuery' instead, or wrap code in an IIFE: (function($) { /* code */ })(jQuery).

Question 4

What types of selectors are available in jQuery?

Accepted Answer

jQuery supports CSS-style selectors: element ('div'), class ('.className'), ID ('#idName'), attribute ('[type="text"]'), descendant ('parent child'), child ('parent > child'), multiple ('div, p, span'), pseudo-classes (':first', ':last', ':eq(n)', ':even', ':odd'), and form selectors (':input', ':checked', ':disabled'). Complex selectors are slower—prefer ID or class selectors.

Question 5

What is the difference between .find() and .children()?

Accepted Answer

.children() selects only direct (immediate) children of matched elements, one level deep. .find() searches through all descendants at any depth. Example: $('ul').children('li') gets direct li children; $('ul').find('li') gets all li descendants including nested ones. .children() is faster for direct children.

Question 6

What is the difference between .html() and .text()?

Accepted Answer

.html() gets/sets the HTML content including tags—it parses and renders HTML markup. .text() gets/sets only the text content, stripping all HTML tags and escaping special characters. Use .text() for plain text to prevent XSS vulnerabilities; use .html() when you need to insert actual HTML elements.

Question 7

How do .append(), .prepend(), .after(), and .before() differ?

Accepted Answer

.append() inserts content inside the element, at the end (as last child). .prepend() inserts inside, at the beginning (as first child). .after() inserts outside the element, immediately following it (as next sibling). .before() inserts outside, immediately preceding it (as previous sibling). All accept HTML strings, elements, or jQuery objects.

Question 8

What is event delegation in jQuery?

Accepted Answer

Event delegation attaches a single event handler to a parent element that handles events for current and future child elements matching a selector. Syntax: $(parent).on('click', 'selector', handler). Benefits: works for dynamically added elements, uses less memory than individual handlers, and improves performance with many elements.

Question 9

What is the difference between .on() and older methods like .bind() or .live()?

Accepted Answer

.on() is the unified event method introduced in jQuery 1.7, replacing .bind(), .live(), and .delegate(). It handles direct binding and event delegation. .bind() attached handlers directly (no delegation). .live() used delegation but from document (inefficient). .delegate() was like .on() but with reversed argument order. Use .on() for all event handling.

Question 10

How do you make an AJAX request in jQuery?

Accepted Answer

Use $.ajax() for full control: $.ajax({ url: '/api', method: 'POST', data: {}, success: fn, error: fn }). Shortcuts: $.get(url, callback), $.post(url, data, callback), $.getJSON(url, callback). Modern syntax uses promises: $.ajax().done(fn).fail(fn).always(fn). jQuery handles serialization, headers, and cross-browser XMLHttpRequest differences.

Question 11

What are .done(), .fail(), and .always() in jQuery AJAX?

Accepted Answer

.done() executes on successful request (replaces success callback). .fail() executes on error (replaces error callback). .always() executes regardless of outcome (replaces complete callback). They're chainable and can be called multiple times. This Deferred/Promise pattern is cleaner than nested callbacks: $.get(url).done(fn).fail(fn).always(fn).

Question 12

How do you create a basic jQuery plugin?

Accepted Answer

Extend $.fn (jQuery.fn) to add methods to all jQuery objects: $.fn.myPlugin = function(options) { return this.each(function() { /* code */ }); }. Return 'this' for chaining. Use $.extend() for default options. Wrap in IIFE to avoid conflicts: (function($) { $.fn.myPlugin = function() {}; })(jQuery);

Question 13

How do you improve jQuery performance?

Accepted Answer

Cache selectors: var $el = $('#id'); use cached reference. Use ID selectors (fastest) over class/attribute. Limit DOM manipulation—batch changes, use document fragments, or detach elements before heavy modifications. Avoid universal selectors (*). Use .on() delegation instead of many handlers. Prefer native JavaScript for simple operations in performance-critical code.

Question 14

How do you stop event propagation in jQuery?

Accepted Answer

Use event.stopPropagation() to prevent bubbling to parent elements. Use event.preventDefault() to prevent default browser action (form submit, link navigation). Use return false in handler to do both (stopPropagation + preventDefault). event.stopImmediatePropagation() also prevents other handlers on the same element from executing.

Question 15

How do you handle jQuery conflicts with other libraries?

Accepted Answer

Call jQuery.noConflict() to release the $ variable, then use 'jQuery' instead of $. Or wrap code in an IIFE with $ as parameter: (function($) { /* use $ safely */ })(jQuery). For multiple jQuery versions, var jq2 = jQuery.noConflict(true) releases both $ and jQuery, storing jQuery in your variable.

Basics &amp; Fundamentals(5 questions)

What is jQuery, and how does it differ from plain JavaScript?

How do you include jQuery in a web page?

What is the purpose of the ready() function (e.g. $(document).ready())?

How can you check which version of jQuery is in use at runtime?

Ehttps://learn.jquery.com/using-jquery-core/jquery-object/ the concept of the $ symbol in jQuery.

jQuery Selectors(5 questions)

What are the different types of selectors available in jQuery (e.g., by element, class, ID)?

How would you select multiple elements (e.g. multiple classes or IDs) at the same time?

How do you handle performance considerations when using complehttps://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML selectors?

How do attribute selectors in jQuery work (e.g. $("[type='tehttps://learn.jquery.com/using-jquery-core/jquery-object/']"))?

What is the difference between .find() and .children() when traversing the DOM?

DOM Manipulation &amp; Traversing(6 questions)

How do you add or remove an HTML element dynamically in jQuery?

How can you modify the tehttps://learn.jquery.com/using-jquery-core/jquery-object/ or HTML content of selected elements?

What is the difference between .html() and .tehttps://learn.jquery.com/using-jquery-core/jquery-object/()?

How do you clone elements in jQuery, and when might you need to do this?

Ehttps://learn.jquery.com/using-jquery-core/jquery-object/ how .append(), .prepend(), .after(), and .before() differ.

What are some best practices when manipulating the DOM to mahttps://www.w3schools.com/js/js_htmldom_methods.asp performance?

Event Handling(6 questions)

How do you attach an event to an element with jQuery?

What is event delegation, and how do you implement it in jQuery?

What is the difference between .on() and older methods like .bind() or .live()?

How do you handle events such as click, hover, or keyup for dynamically created elements?

How can you prevent an event from propagating (bubbling) to parent elements in jQuery?

How do you remove or unbind an event handler?

Animation &amp; Effects(5 questions)

What built-in effects and animations does jQuery provide?

How do you chain multiple animations or effects in sequence?

What is the significance of the callback parameter in jQuery's animation methods?

How can you stop an ongoing animation in jQuery?

What are the performance implications of heavy animations, and how can you optimize them?

Aja<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML">https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML</a> &amp; Networking(6 questions)

How do you make an AJAX request in jQuery using .ajahttps://api.jquery.com/jquery.ajax/ or helper methods like .get() and .post()?

How do you handle errors or failed requests in jQuery's AJAX methods?

What is the role of the success, error, and complete callbacks in jQuery AJAX?

How do you handle JSON data with jQuery AJAX calls?

What is the .done(), .fail(), and .always() syntahttps://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML in jQuery?

How can you abort an ongoing AJAX request in jQuery?

Plugin Development(5 questions)

How do you create a basic jQuery plugin?

Why is it important to ehttps://plugins.jquery.com/docs/publish/ the jQuery.fn object when writing a plugin?

What are the best practices for naming conflicts with plugins?

How can you integrate configuration options and defaults in a plugin?

How do you handle method chaining within a plugin?

Best Practices &amp; Performance(5 questions)

What techniques can improve performance when using jQuery ehttps://stackoverflow.com/questions/4182413/jquery-performance-tips-and-tricks

How do you handle multiple DOM lookups efficiently (e.g. caching selectors)?

Why should you minimize reflows/repaints, and how can jQuery operations affect that?

When might you prefer plain JavaScript over jQuery for performance reasons?

What are common pitfalls or anti-patterns people fall into when using jQuery?

Advanced Techniques &amp; Internals(10 questions)

How does jQuery internally manage the selector engine (Sizzle)?

How do you handle promises in jQuery, and what are the differences between jQuery's Deferred objects and ES6 Promises?

What are the possible drawbacks of using .html() to inject content?

Ehttps://learn.jquery.com/using-jquery-core/jquery-object/ the concept of queueing in jQuery animations.

What changes were introduced in the major jQuery versions (e.g., from 1.https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML to 2.https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML to 3.https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML?

How do you ensure compatibility between different jQuery versions or migrate older usage?

How do you load multiple versions of jQuery on the same page, and when might this be necessary?

What is the jQuery Migrate plugin, and when would you need it?

How can you integrate jQuery with other libraries that also use the $ symbol (e.g., Prototype.js)?

What are some approaches to gradually remove jQuery in favor of native JavaScript if a project needs it?

Basics & Fundamentals(5 questions)

DOM Manipulation & Traversing(6 questions)

Animation & Effects(5 questions)

Aja<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML">https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML</a> & Networking(6 questions)

Best Practices & Performance(5 questions)

Advanced Techniques & Internals(10 questions)