30+ jQuery Interview Questions And Answers

Within jQuery callback functions, 'this' typically refers to the raw DOM element upon which the event was triggered, letting you act directly on the element without additional selector logic.

Event bubbling and event capturing are two phases of event propagation. In event bubbling, the event starts from the target element and bubbles up the DOM tree. In event capturing, the event starts from the outermost element and travels down to the target element.

To optimize jQuery selectors for better performance, you should use ID selectors when possible, scope your searches within a parent element, and minimize the use of universal and multiple selectors.

A promise/deferred object in jQuery represents an operation that hasn't completed yet but is expected in the future. It allows you to attach multiple callbacks and control the flow of deferred activities.

jQuery's .map() method applies a function to each item in the original set and constructs a new jQuery array from the values returned by that function.

You can create a deep copy of an object using the jQuery.extend(true, {}, myObject) method, which performs a deep merge, recursively copying properties from the source object to a new object.

jQuery offers several AJAX methods, like $.ajax(), $.get(), $.post(), and $.load(). The $.ajax() method is the most versatile, offering customization for complex requests. The other methods offer shorthand for common use cases.

To prevent multiple events from firing, you can use .off() to unbind previous event handlers before binding new ones or .stopPropagation() to prevent event bubbling up the DOM tree.

The .done() method is called when an AJAX call succeeds, .fail() is called upon failure, and .always() method is called regardless of the success or failure of the request.

A custom jQuery selector can be created by extending the $.expr object with a function that defines the custom behavior. This function should return true for elements that match the custom criteria.

A toggle function in jQuery can be created by using the .toggle() method inside a click event handler. The method alternates hiding and showing the matched elements.

Event delegation refers to the process where the parent element listens for events and handles them on behalf of child elements that match a specified selector. It's useful when dealing with dynamically added elements.

.bind() attaches event handlers to the current matched elements; .live() was used to attach event handlers to all elements matching a selector now and in the future (deprecated in jQuery 1.7); .on() is the preferred method that combines and improves the functionality of both .bind() and .live().

You can detach an event handler using the .off() method. This method can remove event handlers that were attached with .on().

You can chain AJAX requests by using jQuery's Deferred objects and the .then() method that allows for specifying callbacks for progressing actions as responses are received.