jQuery Interview Questions

A JavaScript library that simplified DOM selection, events, animations and AJAX with a concise, chainable API and smoothed over browser inconsistencies at a time when browsers differed greatly.

It runs a function once the DOM is fully parsed, so elements can be safely selected. The shorthand is $(function () { … }). It does not wait for images like window.onload does.

.text() gets or sets text content (safe against HTML injection). .html() gets or sets inner HTML (unsafe with untrusted input). .val() gets or sets the value of form fields.

$ is an alias for jQuery. Given a CSS selector it returns a jQuery object wrapping the matching elements; given HTML it creates elements; given a function it runs it when the DOM is ready; given a DOM element it wraps it.

Load it from a CDN or a local file with a <script> tag before your own scripts, or install it with npm and import it in a bundler. Use the minified production build and, from a CDN, add an integrity hash.

Most jQuery methods act on every element in the set without a loop: $(".item").addClass("active") updates all matches. Getters such as .val() or .attr() read only the first element.

Most jQuery setters return the same jQuery object, so calls can be chained: $("#box").addClass("on").fadeIn(200).text("Ready"). It keeps code short and selects the elements only once.

addClass, removeClass and toggleClass, plus hasClass to check. Prefer toggling classes over setting inline styles with .css(), so presentation stays in the stylesheet.

.attr() reads the HTML attribute as written in the markup. .prop() reads the live DOM property. For checked, selected and disabled use .prop(), because the attribute does not change when the user clicks.

Use delegated events: $(container).on("click", ".item", handler). The listener sits on an existing parent and handles clicks from current and future .item elements.

$.ajax({ url, method, data, dataType }) or the shortcuts $.get, $.post and $.getJSON. They return a jqXHR promise-like object that supports .done(), .fail() and .always(), and can be awaited.

.children() only looks one level down at direct children. .find() searches all descendants.

append and prepend insert content inside the element, at the end or start. after and before insert it outside, as a sibling. appendTo and prependTo do the same with the target and content swapped.

Call .stop() before starting a new animation — .stop(true, true) clears the queue and jumps to the end. Without it, hovering quickly in and out queues dozens of animations that keep running.

parent() returns the direct parent. parents() returns all ancestors, optionally filtered. closest() starts with the element itself and walks up until the first match, so it returns zero or one element.

.serialize() returns a URL-encoded string (name=Asha&email=a%40b.com) ready for $.post. .serializeArray() returns [{ name, value }] pairs. Only fields with a name attribute, that are enabled and successful, are included.

A jqXHR object that implements the promise interface. Chain .done(), .fail() and .always(), or use .then(). In modern code you can also await it.

Render the token in the page (@Html.AntiForgeryToken() or a meta tag) and send it in the RequestVerificationToken header for every POST, for example with $.ajaxSetup({ headers: { … } }).

Add a function to $.fn, loop with this.each(), merge options with $.extend({}, defaults, options) and return this so the plugin stays chainable.

1$.fn.highlight = function (options) {
2  const settings = $.extend({ color: 'yellow' }, options);
3  return this.each(function () {
4    $(this).css('background', settings.color);
5  });
6};
7$('.note').highlight({ color: '#fde68a' });

Incrementally: map common calls to native APIs (querySelectorAll, classList, fetch, addEventListener), remove plugins one at a time, keep jQuery only where unobtrusive validation or plugins still need it, and add tests around the behaviour you change.

Repeating the same selector in a loop instead of caching it, building HTML with many .append() calls instead of one, binding a handler to every row instead of delegating, and using broad selectors like $(".x") without a context.

Insert user data with .text() or by setting properties, not .html(), .append(string) or $(string). Never build selectors or HTML from user input, and keep jQuery updated — old versions had XSS issues in $() parsing.

Handlers bound with $(".btn").on("click") at page load do not apply to elements added later. Use delegation on a stable parent: $("#list").on("click", ".btn", handler).

Rarely for a new single-page app: modern DOM APIs, fetch and frameworks cover what it offered. It is still reasonable for small enhancements on server-rendered pages, for legacy codebases and where a plugin you need depends on it.

Use jQuery Validation with the unobtrusive adapter: Data Annotations on the model render data-val-* attributes, and the scripts validate on blur and submit without writing JavaScript. The server must still validate.