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

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.

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

$(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.

What does the $ symbol mean in jQuery?

$ 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).

What types of selectors are available in jQuery?

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.

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

.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.

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

.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.

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

.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.

What is event delegation in jQuery?

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.

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

.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.

How do you make an AJAX request in jQuery?

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.

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

.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).

How do you create a basic jQuery plugin?

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);

How do you improve jQuery performance?

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.

How do you stop event propagation in jQuery?

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.

How do you handle jQuery conflicts with other libraries?

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.

Login Required

Please log in to access the interview questions, or choose a plan below.

All 2,200+ questions
All 38 technologies
Code examples

Get Started

Item added to your cart

Login Required

Choose Your Plan

Starter

Standard

Lifetime

Country/region

Login Required

Choose Your Plan

Starter

Standard

Lifetime