JQuery Interview Cheat Sheet

jQuery is a JavaScript library that simplifies DOM manipulation, event handling, AJAX, and animations with a concise cross-browser API. It solves the problem of inconsistent browser behavior that plagued early web development. Today most of its functionality is built into modern browsers natively, but jQuery still powers a huge portion of the web.

jQuery syntax: $(selector).action(). The dollar sign $ is an alias for jQuery. The selector targets HTML elements (like CSS selectors). The action is a jQuery method to perform. Example: $("p").hide() hides all paragraphs. $(".btn").click(fn) attaches a click handler to all elements with class "btn".

jQuery selectors use CSS selector syntax to find elements: $("p") selects all paragraphs, $(".btn") selects by class, $("#header") by ID, $("input[type=text]") by attribute. You can combine: $("ul li:first") selects the first li in a ul. Selectors return a jQuery object - a collection of matching DOM elements.

Chaining calls multiple jQuery methods on the same element in one line: $("p").addClass("active").slideDown(300).css("color", "blue"). Each method returns the jQuery object, so the next method runs on the same element. This eliminates redundant selectors and makes code more concise.

jQuery event handling: $(".btn").on("click", handler) - attaches a handler for the click event. .on() replaces the old .bind(), .live(), .delegate(). .off() removes handlers. .trigger("click") programmatically fires an event. .one() attaches a handler that fires exactly once. For delegated events: $("ul").on("click", "li", handler) - handles clicks on dynamically added li elements.

jQuery DOM manipulation: .html() gets/sets inner HTML; .text() gets/sets text content; .val() gets/sets form input values; .append() adds content at the end; .prepend() at the start; .after() after the element; .remove() deletes it; .clone() copies it. .attr() reads/sets attributes; .css() gets/sets styles; .addClass()/.removeClass() toggle classes.

jQuery DOM traversal: .parent() gets the immediate parent; .parents() gets all ancestors; .children() gets direct children; .find() searches descendants; .siblings() gets same-level elements; .next()/.prev() gets adjacent siblings; .closest() finds the nearest matching ancestor. These let you navigate the DOM tree relative to a selected element.

$.ajax() makes an HTTP request with full control over method, headers, and response handling. Shorthand: $.get(url, callback) for GET; $.post(url, data, callback) for POST; $.getJSON(url, callback) for JSON responses. All return jqXHR objects (Deferred-based). Modern jQuery AJAX is Promise-compatible via .done()/.fail()/.always().

jQuery animations: .show()/.hide() toggle visibility with optional duration; .fadeIn()/.fadeOut() animate opacity; .slideDown()/.slideUp() animate height; .animate({prop: value}, duration) animates any CSS property to a target value. Animations queue automatically - each one waits for the previous to complete. .stop() halts the current animation.

.bind() attaches to existing elements only - doesn't work for dynamically added elements; removed in jQuery 3. .live() was deprecated - attached to document, caught all events but was inefficient. .on() is the current standard - attaches to a parent, handles dynamic elements via delegation ($(parent).on("click", ".child", fn)), and is efficient.

jQuery form handling: .val() reads/sets input values; .serialize() converts form data to a URL-encoded query string for AJAX; .serializeArray() returns an array of {name, value} pairs; .submit(fn) listens for form submission. Combine with $.ajax to submit forms without a page reload.

jQuery selectors use the Sizzle engine and have extra pseudo-selectors (:animated, :visible, :checkbox). Vanilla JS querySelector/querySelectorAll are natively optimized and faster - no wrapper object creation overhead. For modern code, vanilla selectors are preferred; jQuery selectors still offer convenience pseudo-selectors and always return a jQuery object (never null).

Handle AJAX errors in jQuery: in the .ajax() options, use error: function(xhr, status, error) {} for the error callback. With Promises: $.ajax(opts).fail(function(xhr, status, error) {}). Set timeout: in ajax options, timeout: 5000 (ms) - if exceeded, triggers the error callback with status "timeout". Always handle both network errors and HTTP error status codes.

jQuery utilities: $.each(collection, callback) iterates arrays and objects; $.map(array, fn) transforms arrays; $.extend(target, source) merges objects; $.isArray(), $.isFunction(), $.type() check types; $.parseJSON() parses JSON strings; $.trim() strips whitespace; $.ajax and its shorthand methods are also utilities. Mostly replaced by native ES6 equivalents.

Include jQuery from CDN: in the HTML head or before . Or install via npm: npm install jquery and import in your build. CDN has caching benefits; local install is needed for offline or bundled builds. Always use minified (.min.js) in production.

$(document).ready(fn) fires when the DOM is fully parsed - HTML is loaded and elements are accessible, but images/stylesheets may still be loading. window.onload fires when the entire page (including images, stylesheets, iframes) has fully loaded. Use $(document).ready for most DOM manipulation - it's faster and you rarely need to wait for images.

Include the plugin script after jQuery: