jQuery interview questions

What a strong answer covers

• Define `$(document).ready()`: Executes when the DOM is fully loaded and parsed, but before images and other external resources are loaded.
• Define `$(window).load()`: Executes when the entire page, including all images, scripts, CSS, and other external resources, has finished loading.
• Discuss typical use cases for `$(document).ready()`: Most DOM manipulation, event binding, and script execution that doesn't depend on resource dimensions.
• Discuss typical use cases for `$(window).load()`: Operations that require all resources to be available, such as getting image dimensions or ensuring all content is visible before layout calculations.

Where people lose the point

• ×Confusing the execution timing, believing `$(document).ready()` waits for all resources.
• ×Using `$(window).load()` for all script execution, leading to unnecessary delays for basic DOM interactions.

What a strong answer covers

• Element Selector: Selects elements by their tag name (e.g., `$('p')`).
• ID Selector: Selects a single element by its unique ID (e.g., `$('#myDiv')`).
• Class Selector: Selects elements by their CSS class (e.g., `$('.highlight')`).
• Attribute Selector: Selects elements based on their attributes and values (e.g., `$('input[type="text"]')`).
• Pseudo-class/Pseudo-element Selectors: Utilizes CSS pseudo-classes for more specific selections (e.g., `$('li:first-child')`, `$('a:hover')`).

Where people lose the point

• ×Incorrectly using `#` for class or `.` for ID selectors.
• ×Forgetting to quote attribute values in attribute selectors, or misusing attribute operators.

What a strong answer covers

• Use `$('#container').append('<p>Hello World!</p>');` to add the paragraph.
• Chain `.addClass('active')` to the newly appended paragraph, or select it again if not chained, e.g., `$('#container p:last-child').addClass('active');`.
• Use `setTimeout` to delay the removal: `setTimeout(function() { $('#container').remove(); }, 5000);`.
• Demonstrate chaining for efficiency where possible, e.g., `$('#container').append('<p>Hello World!</p>').children().last().addClass('active');`.

Where people lose the point

• ×Attempting to add a class to the container instead of the new paragraph.
• ×Forgetting to wrap the removal logic in `setTimeout` or using `remove()` without a selector.

What a strong answer covers

• Define event delegation: Attaching a single event listener to a parent element that listens for events bubbling up from its descendants.
• Explain benefits: Improves performance by reducing the number of event handlers, simplifies handling events on dynamically added elements, and reduces memory footprint.
• Describe implementation: Use the `.on()` method with a selector argument, e.g., `$('#parent').on('click', '.child-selector', function() { ... });`.
• Provide a concrete example: Handling clicks on dynamically added list items within a `<ul>`.

Where people lose the point

• ×Confusing direct event binding with delegation, or not understanding when delegation is necessary.
• ×Incorrectly using `.on()` without the selector argument for delegation, or applying it to the wrong parent element.

What a strong answer covers

• Describe `$.get()`: Used for making HTTP GET requests, typically for retrieving data from the server.
• Describe `$.post()`: Used for making HTTP POST requests, typically for sending data to the server to create or update resources.
• Key differences: GET requests append data to the URL (visible in browser history/logs), POST requests send data in the request body (not visible). GET requests are idempotent and cacheable, POST requests are not.
• Use cases: `$.get()` for fetching articles, user profiles. `$.post()` for submitting forms, creating new records, or sensitive data.

Where people lose the point

• ×Using `$.get()` for sending sensitive data or data that modifies server state.
• ×Not understanding the caching behavior difference between GET and POST.

What a strong answer covers

• Define method chaining: The ability to call multiple jQuery methods on the same jQuery object in a single statement, with each method returning the jQuery object itself.
• Explain how it works: Most jQuery methods return `this` (the jQuery object), allowing the next method to operate on the same selection.
• Provide an example: `$('p').css('color', 'blue').addClass('highlight').slideUp(500);`.
• Discuss benefits: Improves code readability, reduces code verbosity, and often enhances performance by avoiding repeated DOM selections.

Where people lose the point

• ×Attempting to chain methods that do not return the jQuery object (e.g., `.text()` when used as a getter).
• ×Not understanding that chaining operates on the *same* set of elements unless a traversal method is used.

What a strong answer covers

• Describe `$.each()`: A general-purpose iterator for arrays and objects. It iterates over a collection and executes a callback function for each item, primarily for side effects (e.g., logging, modifying elements in place). It returns the original collection.
• Describe `$.map()`: Iterates over a collection and transforms each item into a new value, returning a new jQuery object or a plain JavaScript array containing the transformed values. It's used for creating new collections based on existing ones.
• Provide examples: `$.each()` to add a class to each list item; `$.map()` to extract text content from a set of elements into an array.
• Key distinction: `$.each()` is for iteration with side effects; `$.map()` is for transformation and creating new collections.

Where people lose the point

• ×Using `$.each()` when the goal is to create a new array of transformed values.
• ×Expecting `$.map()` to modify the original collection in place.

What a strong answer covers

• Define `.attr()`: Used to get or set HTML attributes (as they appear in the HTML source code). Attributes are string values.
• Define `.prop()`: Used to get or set DOM properties (the actual JavaScript object properties of a DOM element). Properties can be various data types (boolean, number, string).
• Key distinction: Attributes are initial values; properties are current values. For boolean attributes like `checked`, `selected`, `disabled`, `.prop()` should be used to get/set their current state.
• Examples: `.attr('href')` for a link's URL, `.prop('checked', true)` for a checkbox's state, `.attr('data-id')` for custom data attributes.

Where people lose the point

• ×Using `.attr('checked', true)` to check a checkbox, which might not work reliably across browsers or states.
• ×Confusing custom data attributes (which are attributes) with standard DOM properties.

What a strong answer covers

• Define `event.preventDefault()`: Prevents the browser's default action associated with an event (e.g., preventing a link from navigating, a form from submitting, or a checkbox from toggling).
• Define `event.stopPropagation()`: Prevents the event from bubbling up the DOM tree to parent elements, stopping any parent event handlers from being triggered.
• Provide use cases for `preventDefault()`: Custom form submission, preventing default link behavior for AJAX navigation, custom context menus.
• Provide use cases for `stopPropagation()`: Preventing a click on a child element from triggering a click handler on its parent, especially in nested interactive components.

Where people lose the point

• ×Confusing the two, thinking `stopPropagation()` prevents default actions.
• ×Overusing `stopPropagation()`, which can lead to unexpected behavior and make debugging harder.

What a strong answer covers

• Explain the `error` callback: A function executed if the request fails (e.g., network error, server error, timeout). It receives `jqXHR`, `textStatus`, and `errorThrown` arguments.
• Explain the `.fail()` method: A Promise-based alternative to the `error` callback, chained to the `jqXHR` object returned by `$.ajax()`, also receiving `jqXHR`, `textStatus`, `errorThrown`.
• Explain the `complete` callback / `.always()` method: Executed regardless of success or failure, useful for cleanup or hiding loading indicators.
• Provide an example: `$.ajax({ url: '/api/data', method: 'GET', error: function(jqXHR, textStatus, errorThrown) { console.error('AJAX Error:', textStatus, errorThrown); }, complete: function() { console.log('Request complete.'); } });`

Where people lose the point

• ×Not implementing any error handling, leading to silent failures in the UI.
• ×Confusing the arguments passed to `error` vs. `success` callbacks.

What a strong answer covers

• Encapsulation: Wrap the plugin code in an IIFE (Immediately Invoked Function Expression) to protect the global scope and ensure `$` refers to jQuery.
• Extension: Extend `$.fn` (the jQuery prototype) with your plugin's name, e.g., `$.fn.myPlugin = function() { ... };`.
• Chaining: Ensure the plugin method returns `this` to maintain chainability, allowing other jQuery methods to be called on the same selection.
• Options and Defaults: Implement a way to accept user-defined options and merge them with default settings using `$.extend()`.
• Iteration: Use `this.each(function() { ... });` inside the plugin to ensure it operates correctly on multiple selected elements.

Where people lose the point

• ×Forgetting to return `this` from the plugin, breaking chainability.
• ×Not using `this.each()` when the plugin needs to operate on individual elements in a collection.
• ×Failing to provide default options or merge them correctly, making the plugin inflexible.

What a strong answer covers

• Cache jQuery objects: Store frequently used selections in variables to avoid repeated DOM queries (e.g., `var $myDiv = $('#myDiv');`).
• Minimize DOM manipulation: Batch changes by building HTML strings or document fragments, then inserting them into the DOM once, rather than multiple individual insertions.
• Use efficient selectors: Prefer ID selectors (`#id`) over class (`.class`) or tag (`tag`) selectors, and avoid universal selectors (`*`) or overly complex descendant selectors.
• Delegate events: Use event delegation for dynamic elements or large collections to reduce the number of event listeners.
• Avoid `*` and `[attribute]` selectors where possible: These are generally slower than ID, class, or tag selectors.

Where people lose the point

• ×Repeatedly querying the DOM for the same element within a loop or function.
• ×Performing many small DOM insertions or modifications instead of batching them.
• ×Over-reliance on complex or inefficient selectors without understanding their performance implications.

What a strong answer covers

• Define traversal methods: jQuery methods that allow you to navigate the DOM tree relative to a selected element.
• `.parent()`: Selects the direct parent of each element in the current set. Useful for moving up one level in the DOM.
• `.children()`: Selects all direct children of each element in the current set. Can optionally take a selector to filter children.
• `.find()`: Selects descendant elements of each element in the current set that match a specified selector. Useful for searching deep within a subtree.
• Examples: `$('li').parent()` to get the `<ul>`, `$('ul').children('li.active')` to get active list items, `$('#container').find('p.intro')` to find specific paragraphs within a container.

Where people lose the point

• ×Confusing `.children()` (direct children only) with `.find()` (all descendants).
• ×Using `.parent()` when a more specific ancestor is needed, or not understanding that it only goes up one level.

What a strong answer covers

• Explain `.animate()`: Used to create custom animations of CSS properties over a specified duration.
• Parameters: Takes an object of CSS properties to animate, a duration (in milliseconds or keywords like 'slow', 'fast'), an easing function, and a callback function.
• Animatable properties: Primarily numeric CSS properties (e.g., `width`, `height`, `opacity`, `margin-left`, `font-size`). Non-numeric properties (like `color`, `background-image`) require jQuery UI or a custom plugin.
• Queueing: Animations are automatically queued, meaning subsequent `.animate()` calls on the same element will run after the previous one completes.
• Example: `$('#box').animate({ width: 'toggle', opacity: 0.5 }, 1000, 'swing', function() { console.log('Animation complete!'); });`

Where people lose the point

• ×Attempting to animate non-numeric CSS properties directly with `.animate()` without a plugin.
• ×Not understanding the concept of animation queuing, leading to unexpected animation sequences.

What a strong answer covers

• Define `$.noConflict()`: A jQuery method that releases the `$` identifier back to the library that previously owned it, preventing conflicts with other JavaScript libraries that also use `$` (e.g., Prototype.js).
• How it works: It returns a reference to the jQuery object, which can then be assigned to a new variable (e.g., `var j = jQuery.noConflict();`).
• Use cases: When jQuery is used alongside other libraries that also use the `$` alias, to avoid namespace collisions.
• Alternative usage: Passing `true` to `$.noConflict()` also releases the `jQuery` global variable, or using an IIFE to scope `$` locally.

Where people lose the point

• ×Not understanding that `$.noConflict()` is specifically for resolving `$` alias conflicts, not general JavaScript variable conflicts.
• ×Forgetting to assign jQuery to a new variable after calling `$.noConflict()`, making jQuery inaccessible.

What a strong answer covers

• Purpose of `.data()`: Provides a way to attach arbitrary data to DOM elements, separate from HTML attributes, and retrieve it later.
• Storing data: Use `$(selector).data('key', value);` to store data. The value can be any JavaScript type (string, number, object, array).
• Retrieving data: Use `$(selector).data('key');` to retrieve a specific piece of data, or `$(selector).data();` to retrieve all data associated with the element as an object.
• Difference from `data-*` attributes: `.data()` can store complex JavaScript objects, while `data-*` attributes are always strings. jQuery's `.data()` method will automatically parse `data-*` attributes on first access.
• Use cases: Storing state information, configuration options, or references to related JavaScript objects directly on the DOM element.

Where people lose the point

• ×Confusing `.data()` with `$.data()` (which operates on arbitrary objects, not DOM elements).
• ×Expecting `.data()` to persist data across page reloads or to be visible in the HTML source.

What a strong answer covers

• `.fadeIn()`: Gradually changes the opacity of a hidden element from 0 to 1, making it visible. Useful for revealing content smoothly.
• `.fadeOut()`: Gradually changes the opacity of a visible element from 1 to 0, making it hidden. Useful for gracefully removing content.
• `.slideUp()`: Animates the height of a visible element to 0, effectively hiding it with a sliding motion. Often used for collapsing sections.
• `.slideDown()`: Animates the height of a hidden element from 0 to its full height, revealing it with a sliding motion. Often used for expanding sections.
• Common parameters: All accept a duration (milliseconds or 'slow', 'fast') and an optional callback function to execute after the animation completes.

Where people lose the point

• ×Using `fadeIn()` on an already visible element or `slideDown()` on an already expanded element, leading to no visible effect.
• ×Not understanding that these methods also toggle the `display` CSS property to `none` when hiding and restore it when showing.

What a strong answer covers

• Default context: Within a jQuery event handler or callback function (e.g., `click`, `each`, `ajax` callbacks), `this` refers to the raw DOM element that triggered the event or is currently being iterated over.
• Converting to jQuery object: To use jQuery methods on `this`, it must be wrapped in `$(this)`. For example, `$(this).addClass('active');`.
• Arrow functions: If an arrow function is used as a callback, `this` will retain the lexical context of where the arrow function was defined, not the DOM element. This can be a common source of confusion.
• Importance: Understanding `this` is crucial for interacting with the specific element that initiated an action or is being processed in a loop.

Where people lose the point

• ×Attempting to call jQuery methods directly on `this` (e.g., `this.addClass('active')`) without wrapping it in `$(this)`.
• ×Using arrow functions for event handlers when `this` needs to refer to the DOM element, leading to incorrect context.