All jQuery Interview Questions

What is jQuery?

jQuery is a lightweight JavaScript library with the idea “write less, do more”. It gives short methods for the common work of a web page: selecting and changing elements, handling events, animations, and Ajax. It works the same in all browsers.

<p id="msg">Hello</p>

$('#msg').text('Hello jQuery').css('color', 'red');

See jQuery Introduction.

What are the advantages of jQuery?

• Short code: a task which needs many lines of plain JavaScript is often one line in jQuery.
• Cross browser: the same code works in all the supported browsers.
• Easy DOM work: simple selectors, traversing and changing of elements.
• Effects and Ajax are built in.
• Plugins: thousands of ready made plugins.
• Big community and a lot of old code and WordPress support.

The disadvantage is the extra file size, and that plain JavaScript can do many of these things now. See jQuery vs Vanilla JavaScript.

What is the difference between jQuery and JavaScript?

You cannot use jQuery without knowing the basics of JavaScript, because jQuery is JavaScript. See jQuery vs Vanilla JavaScript.

How do you add jQuery to a web page?

Use a script tag, before your own code:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="js/app.js"></script>

Other ways: download the file and use a local path, or install with npm install jquery. To check that it works, type $.fn.jquery in the browser console. See jQuery Get Started.

What is the document ready function in jQuery?

$(document).ready(function () {
  // code here
});

$(function () {
  // the short form
});

Without it, a script in the head cannot find the elements below it. See Document Ready Function.

What is the difference between $(document).ready() and window.onload?

Use ready for most code, and load when you need the size of images. See Document Ready Function.

What is the $ sign in jQuery?

<p>Page</p>

console.log($ === jQuery);
console.log($('p').length === jQuery('p').length);

If another library uses $, call jQuery.noConflict(). See noConflict.

What are jQuery selectors?

<div id="main"><p class="note">A</p><p class="note">B</p><a href="/x">Link</a></div>

console.log($('#main').length);
console.log($('.note').length);
console.log($('p').length);
console.log($('a[href]').length);
console.log($('#main > p').length);

See jQuery Selectors.

What is the difference between text(), html() and val() in jQuery?

<div id="d">Hello <b>world</b></div>
<input id="i" value="Anita">

console.log($('#d').text());
console.log($('#d').html());
console.log($('#i').val());

Use .text() for text from users, because .html() can run HTML and scripts. See Get Content.

What is the difference between attr() and prop() in jQuery?

<input type="checkbox" id="c" checked>

$('#c').prop('checked', false);
console.log('prop: ' + $('#c').prop('checked'));
console.log('is checked: ' + $('#c').is(':checked'));

The property shows the live state (false now), while the attribute in the HTML is the starting value. In jQuery 4, attr('checked') also returns a different value than in 3.x, so always use prop(). See Get Content.

What is method chaining in jQuery?

<p id="msg">Hi</p>

$('#msg').text('Hello').css('color', 'blue').addClass('big');

Getter methods like .text() without an argument return a value, so they end the chain. See Method Chaining.

How do you hide and show an element in jQuery?

<div id="box">Box</div>

$('#box').hide();
console.log($('#box').css('display'));
$('#box').show();
console.log($('#box').css('display'));
$('#box').toggle();
console.log($('#box').css('display'));

See jQuery Effects.

How do you add, remove and toggle a class in jQuery?

<p id="p" class="a">Text</p>

$('#p').addClass('b').removeClass('a').toggleClass('c');
console.log($('#p').attr('class'));
console.log($('#p').hasClass('b'));

See CSS Classes.

What is the difference between remove(), empty() and detach() in jQuery?

See Remove Elements.

What is the on() method in jQuery?

<button id="b">Click</button>

var n = 0;
$('#b').on('click', function () { n++; });
$('#b').click().click();
console.log(n);

See jQuery Events.

What is the difference between click() and on(‘click’) in jQuery?

.click(fn) attaches a click handler, and it is the same as .on('click', fn). Calling .click() without a function triggers the click. The method .on() can also handle many events at the same time (.on('mouseenter mouseleave', fn)) and delegated events (.on('click', '.item', fn)), which the shortcut cannot. Most developers use .on(). See jQuery Events.

What is event bubbling in jQuery and how do you stop it?

<div id="outer"><button id="inner">Click</button></div>

$('#outer').on('click', function () { console.log('outer'); });
$('#inner').on('click', function () { console.log('inner'); });
$('#inner').click();
console.log('--- with stopPropagation ---');
$('#inner').off('click').on('click', function (e) { e.stopPropagation(); console.log('inner only'); });
$('#inner').click();

See jQuery Events.

What is event.preventDefault() in jQuery?

<form id="f"><button type="submit">Send</button></form>

$('#f').on('submit', function (e) {
  e.preventDefault();
  console.log('default prevented: ' + e.isDefaultPrevented());
});
$('#f').trigger('submit');

• preventDefault() stops the browser action.
• stopPropagation() stops the event going to the parents.
• return false in a jQuery handler does both.

How do you get the value of an input, checkbox and radio button in jQuery?

<input type="text" id="name" value="Anita">
<input type="checkbox" id="agree" checked>
<input type="radio" name="plan" value="free">
<input type="radio" name="plan" value="pro" checked>

console.log($('#name').val());
console.log($('#agree').is(':checked'));
console.log($('input[name=plan]:checked').val());

See jQuery Forms.

How do you loop over elements with jQuery each()?

<ul><li>One</li><li>Two</li><li>Three</li></ul>

$('li').each(function (i) {
  console.log(i + ': ' + $(this).text());
  if (i === 1) return false;   // break
});

See jQuery each().