jQuery Interview Questions

Practice for jQuery interviews by solving TestDome questions. Our interview questions are used by more than 5,000 companies and 450,000 individual test takers.

Jobseekers: Certify Your Knowledge

Take a Certification Test

Companies: Use Our Tests for Screening

Buy a Pack Of Candidates

Try to solve 6 jQuery interview questions below. Hints can help you find answers to questions you are having trouble with.

1. Image Gallery

DOM manipulation Event handling JavaScript Selectors
   
Easy  

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>
ECMAScript 6, jQuery v3.4.1 (available as $)  
 


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


2. Product Code

Content manipulation Event handling Forms JavaScript
   
Easy  

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.

ECMAScript 6, jQuery v3.4.1 (available as $)  
 


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


3. Endangered Species

JavaScript Selectors
   
Hard  

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'.

ECMAScript 6, jQuery v3.4.1 (available as $)  
 


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


4. Closest Relative

JavaScript Recursion Selectors
   
Hard  

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>.

ECMAScript 6, jQuery v3.4.1 (available as $)  
 


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


5. Topic Coloring

Attribute manipulation CSS selectors DOM manipulation JavaScript
   
Easy  

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>
ECMAScript 6, jQuery v3.4.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


6. Food Ranking

DOM manipulation Event handling JavaScript
   
Hard  

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.

ECMAScript 6, jQuery v3.4.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

HTML/CSS and JavaScript with jQuery Online Test (Easy / Hard)

HTML/CSS, JavaScript with jQuery, and Bootstrap Online Test (Easy / Hard)

jQuery

JavaScript with jQuery Online Test (Easy / Hard)

Not exactly what you are looking for? Go to our For Jobseekers section.