All jQuery Interview Questions

What does jQuery.noConflict() do?

<p id="t">Text</p>

var $j = jQuery.noConflict();
console.log('$ is ' + typeof window.$);
$j('#t').text('Works with $j');
console.log($j('#t').text());

WordPress loads jQuery in this mode, so scripts there use jQuery(...). See noConflict.

What are the main differences between jQuery 3 and jQuery 4?

<p>Page</p>

console.log('$.trim: ' + typeof $.trim);
console.log('$.isArray: ' + typeof $.isArray);
console.log('$.parseJSON: ' + typeof $.parseJSON);

Use the native JavaScript versions to make the code work in both. See jQuery 4 and Upgrading.

What is the difference between data() and attr(‘data-*’) in jQuery?

<div id="d" data-count="5"></div>

console.log(typeof $('#d').attr('data-count') + ' ' + $('#d').attr('data-count'));
console.log(typeof $('#d').data('count') + ' ' + $('#d').data('count'));

$('#d').data('count', 10);
console.log('after data(): attr = ' + $('#d').attr('data-count') + ', data = ' + $('#d').data('count'));

What is the use of end() in jQuery?

<ul id="l"><li class="a">A</li><li class="b">B</li></ul>

$('#l')
  .find('.a').addClass('first')
  .end()
  .find('.b').addClass('second');

See Method Chaining.

How do you prevent XSS (cross-site scripting) when using jQuery?

<div id="out"></div>

var userInput = '<img src=x onerror=alert(1)>';
$('#out').text(userInput);
console.log($('#out').html());
console.log($('#out').find('img').length);

• Use .text() or .val() for user data. .html(), .append(string) and $(string) read HTML.
• Create elements with $('<li>').text(data).
• Validate and escape on the server, and use a Content Security Policy.

How can you improve the performance of jQuery code?

• Save selections in variables (var $box = $('#box');).
• Use chaining and .find() from a known parent.
• Use event delegation for lists and dynamic content.
• Build HTML first and add it in one DOM change.
• Use classes (addClass) instead of many .css() calls.
• Limit the work in scroll and resize handlers.
• Use the minified file, a CDN or cache, and load scripts at the end of the page.

See Best Practices.

What is the difference between width(), innerWidth() and outerWidth() in jQuery?

For a box with width 200, padding 10, border 5 and margin 20 on each side, they give 200, 220, 230 and 270. They need a real browser layout, so they return 0 in a test tool. See Dimensions and Position.