JOBSEEKER?

jQuery Interview Questions

Practice for jQuery interviews by solving TestDome questions. Our interview questions are used by more than 7,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

Need to practice your jQuery skills for an upcoming job interview? Try solving these jQuery interview questions that test knowledge of jQuery concepts such as forms, selectors, content manipulation, and other skills. We’ll provide feedback on your answers, and you can use a hint if you get stuck.

These jQuery interview questions are examples of real tasks used by employers to screen job candidates such as jQuery developers, JavaScript developers, front-end developers, and others that require knowledge of the jQuery library and its application in web development.

1. Image Gallery

jQuery DOM manipulation Event handling JavaScript Selectors Public
   
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>

2. Product Code

jQuery Content manipulation Event handling Forms JavaScript Public
   
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.


3. Endangered Species

jQuery JavaScript Selectors Public
   
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>

Implement the function endangeredSpecies that returns how endangered a species is on a particular continent.

For example, endangeredSpecies('North America', 'American bison') should return 'Near Threatened'.


4. Closest Relative

jQuery JavaScript Recursion Selectors Public
   
Hard  

The following HTML 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 relative.
  • If no matching relative is found the function should return an empty jQuery object.

For example, the below code should print 'MIKE' for the given family tree:

let parent = $('James').eq(0);
let relative = closestRelative(parent, 'Mike');
console.log(relative && relative.eq(0).prop("tagName")); // prints MIKE

5. Topic Coloring

jQuery Attribute manipulation CSS selectors DOM manipulation JavaScript Public
   
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. A topicName that doesn't have a matching data-topic-name should be ignored.

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>

6. Food Ranking

jQuery DOM manipulation Event handling JavaScript Public
   
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.


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)

JavaScript

JavaScript with jQuery Online Test (Easy / Hard)

Not exactly what you are looking for? Go to our For Jobseekers section.
Dashboard Start Trial Sign In Home Tour Tests Questions Pricing For Jobseekers