jQuery Interview Questions

Want to become an expert in cracking jQuery interview questions?

Start with practicing the questions below. Whether a question involves multiple choice or live coding, we will give you hints as you go and tell you if your answers are correct or incorrect.

After that, take our timed public jQuery Interview Questions Test.

To use our service for testing candidates, buy a pack of candidates.


1. Image Gallery

jQuery DOM manipulation JavaScript Public

An image gallery is a set of images with corresponding remove buttons. This is the HTML code for a gallery with two images:

<div class="image">
  <img src="https://goo.gl/kjzfbE" alt="First">
  <button class="remove">X</button>
</div>
<div class="image">
  <img src="https://goo.gl/d2JncW" alt="Second">
  <button class="remove">X</button>
</div>

Implement the setup function that registers a click event handler and implements the following logic: When the button of class remove is clicked, its parent <div> element should be removed from the gallery.

For example, after the first image has been removed from the gallery above, it's HTML code should look like this:

<div class="image">
  <img src="https://goo.gl/d2JncW" alt="Second">
  <button class="remove">X</button>
</div>
Easy  
10min
ECMAScript 6, jQuery v3.2.1 (available as $)
 


  •   Example case: Wrong answer
  •   Remove single image: Wrong answer
  •   Remove multiple images: Wrong answer


2. Topic Coloring

jQuery CSS selectors DOM manipulation JavaScript Public New

Write the function newMessage, which receives the name of the topic as the parameter. Function should change the background-color of the p tag to red where the data-topic-name is topicName.

For example, if the HTML is:

<div>
  <p data-topic-name="discussion">General discussion</p>
  <p data-topic-name="bugs">Bugs</p>
  <p data-topic-name="animals">Animals</p>
</div>

After calling newMessage("discussion") the HTML should be:

<div>
  <p data-topic-name="discussion" style="background-color: red;">General discussion</p>
  <p data-topic-name="bugs">Bugs</p>
  <p data-topic-name="animals">Animals</p>
</div>
Easy  
10min
ECMAScript 6, jQuery v3.2.1 (available as $)
 


  •   Example case: Wrong answer
  •   The topic with the newest message is red: Wrong answer
  •   Topics without new messages keep their color: Wrong answer


3. Product Code

jQuery Event handling Forms JavaScript Selectors Public

The createProductCodeForm function is used to create a new form that accepts a product code from a user.

The current version of the form contains the hint: 'The product code can be found on the label'. This hint is currently always visible to the user.

Improve the form so that the hint is only rendered when the input element is the focused element.

Easy  
15min
ECMAScript 6, jQuery v3.2.1 (available as $)
 


  •   Hint is not visible: Wrong answer
  •   Focus shows hint: Wrong answer
  •   Unfocusing hides hint: Wrong answer


4. Endangered Species

jQuery JavaScript Selectors Public

An HTML div element contains lists of endangered species grouped by continent and the species population status.

<div>
    <ul data-continent="North America">
        <li data-species="California condor">Critically Endangered</li>
        <li data-species="American bison">Near Threatened</li>
    </ul>
    <ul data-continent="Europe">
        <li data-species="Cave bear">Extinct</li>
    </ul>
</div>

Write a function that returns how endangered a species is on a particular continent. For example endangeredSpecies('North America', 'American bison') would return 'Near Threatened'.

Hard  
5min
ECMAScript 6, jQuery v3.2.1 (available as $)
 


  •   Example case: Wrong answer
  •   Several species and continents: Wrong answer
  •   Continents with the same species: Wrong answer


5. Closest Relative

jQuery JavaScript Selectors Public

The following XML represents a family tree:

<James>
    <Dave></Dave>
    <Mike></Mike>
    <Sarah></Sarah>
</James>

Implement the closestRelative function so that it returns the parent's closest relative whose name matches the relativeName and obeys the following rules:

  • The parent parameter is a jQuery selector of which the closest relative will be a descendant.
  • Each member of the family, including children, may also be a parent to one or more children.
  • Children are more closely related to the parent than grandchildren.
  • If several children in the same generation have the same name then the first child in the tree is considered the closer.
  • If no matching relative is found the function should return an empty jQuery object.

For example, closestRelative($('James'), 'Mike') should return the jQuery object wrapping <Mike></Mike>.

Hard  
15min
ECMAScript 6, jQuery v3.2.1 (available as $)
 


  •   Example case: Wrong answer
  •   Several generations: Wrong answer
  •   Children with the same name: Wrong answer


6. Food Ranking

jQuery DOM manipulation JavaScript Public New

A website needs a list where users can rank their favorite foods. Write the setup function, which should register click handlers on all Up! and Down! buttons. The Up! button should move the list item one place up in the list, while Down! button should move the list item one place down in the list.

For example, consider this code:

document.body.innerHTML = `<ol>
  <li><button>Up!</button>Taco<button>Down!</button></li>
  <li><button>Up!</button>Pizza<button>Down!</button></li>
  <li><button>Up!</button>Eggs<button>Down!</button></li>
</ol>`;

setup();

If the button Up! button in Pizza list item is clicked, Pizza should be the first item in the list, while Taco should be the second item.

Hard  
20min
ECMAScript 6, jQuery v3.2.1 (available as $)
 


  •   Example case: Wrong answer
  •   Elements can move up: Wrong answer
  •   Elements can move down: Wrong answer


If you feel ready, take one of our timed public jQuery Interview Questions tests:
  • HTML/CSS and JavaScript with jQuery Online Test (Easy / Hard)
  • HTML/CSS, JavaScript with jQuery, and Bootstrap Online Test (Easy / Hard)
  • JavaScript with jQuery Online Test (Easy / Hard)
Not exactly what you are looking for? Go to our For Jobseekers section.